Wednesday 21 August 2013

Elements & Semantics - Part 1

With a basic understanding of HTML and CSS in hand it is time to dig a little deeper and see what actually assembles these two languages.
In order to start building web pages you need to learn a little about which HTML elements are used to display different types of content. You will also want to know how these different elements behave, to help ensure you achieve your desired outcome.
Additionally, once you begin writing code you want to make sure that you are doing so semantically. Writing semantic code includes keeping your code organized and making well informed decisions.

Semantics Overview

Semantics have been mentioned a number of times thus far, so exactly what are semantics? Semantics within HTML is the practice of giving content on the page meaning and structure. These semantics portray the value of content on a page, and are not solely used for styling purposes. Using semantic code provides a handful of benefits, including giving computers, screen readers, search engines, and other devices the ability to adequately read and understand web pages. Additionaly, semantic code is easier to manage and work with, knowing clearly what each piece of content is about.

Divisions & Spans

Divisions, or divs, and spans are HTML elements that act as a container for different content. As a generic container they do not come with any overarching meaning or semantic value. Paragraphs are semantic in that when content is wrapped within a p element it is known as a paragraph. Divs and spans do not hold such meaning and are simply containers. Both divs and spans, however, are extremely valuable when building a website in that they give you the ability to apply targeted CSS styles.
div is a block level element commonly used to identify large sections of a website, helping build the layout and design. A span on the other hand, is an inline element commonly used to identify smaller sections of text within a block level element, such as a paragraph.

Block vs. Inline Elements

All elements are either block or inline level elements. What’s the difference?
Block level elements begin on a new line on a page and occupy the full available width. Block level elements may be nested inside one another, as well as wrap inline level elements.
Inline level elements do not begin on a new line and fall into the normal flow of a document, maintaining their necessary width. Inline level elements cannot nest a block level element, however they can nest another inline level element.
Divs and spans can have added value when given a class or id. A class or id is typically added for styling purposes and to signify the difference between another div or span. Choosing a class or id name is where semantics can come into play. When choosing a class or id attribute value it is important to choose something that has value to the actual context of that element.
For example, if you have a div with an orange background that contains social media links your first inclination might be to give the div a class of “orange.” What happens if that orange background is later changed to blue? Having a class of “orange” no longer makes sense. A better, more semantic, choice for a class would be “social” as it pertains to the contents of the div not the style.
  1. DIVS & SPANS<!-- div -->
  2. <div class="social">
  3. <p>Lorem ipsum dolor sit amet...</p>
  4. <p>Lorem ipsum dolor sit amet...</p>
  5. </div>
  6. <!-- span -->
  7. <p>Lorem ipsum dolor sit amet, <span class="tooltip">consectetur</span> elit.</p>

Typography

A large amount of content online is strictly text based. Many different forms of media and context exist online, however text rules the majority. There are a number of different elements to display text on a web page within HTML. We will focus on the most popular, and more semantic, elements within this lesson. For a broader overview please see theTypography lesson.

Headings

Headings are block level elements that come in six different rankings, h1 through h6, and are key identifiers for users reading a page. Headings help to quickly break up content and provide hierarchy. They are also used to help search engines index and determine the value of content on a page.
Headings should be used in the order relevant to the content. The primary heading of a page or section should be coded with h1 and subsequent headings should use h2 on as necessary. Headings should be reserved for true classification and not used to make text bold or big.
  1. <h1>This is a Level 1 Heading</h1>
  2. <h2>This is a Level 2 Heading</h2>
  3. <h3>This is a Level 3 Heading</h3>

Headings Demo

This is a Level 1 Heading

This is a Level 2 Heading

This is a Level 3 Heading