Elements & Semantics

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. Programming semantic code includes keeping your code organized and making well informed decisions.

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 over arching 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.

A div is 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.

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.

Divs & Spans<!-- div -->
<div class="social">
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<!-- span -->
<p>Lorem ipsum dolor sit amet, <span class="tooltip">consectetur</span> elit.</p>

Typography

A large amount of content online is strictly text based. There are different forms of media and context 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.

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.

<h1>Lorem ipsum dolor sit amet...</h1>
<h2>Pellentesque habitant morb...</h2>

Paragraphs

Headings are often followed with supporting paragraphs. Paragraphs are defined by using the p block level element. Numerous paragraphs can appear one after the other, adding information to a page.

<p>Id quil una virtute ponunt...</p>

Bold Text with Strong

To make text bold, and to note it as important, the strong inline level element is used. It is important to understand the semantic difference between strong and b, both of which will make text bold. strong is semantically used to denote text with a strong importance, as is mostly the case when wanting to bold text. b on the other hand semantically means stylistically offset, which isn’t always the best case for text deserving prominent attention. Gage the significance of the text you are looking to set as bold and choose an element accordingly.

<p>Duis aute in <strong>voluptate</strong> velit esse cillum.</p>

Italicize Text with Emphasis

To italicize text and place a stressed emphasis on it the em inline level element is used. As with strong, there are two different tags used to italicize text, each with a slightly different semantic meaning. em semantically means to place a stressed emphasis on text and thus is the most popular option for italicizing text. The other option is i, which semantically values text to be rendered in an alternate voice. Again, you will need to gage the significance of the text you want to italicize and choose an element accordingly.

<p>Quae ars vivendi <em>putanda</em> est, non expeteretur si nih.</p>

Hyperlinks

One of the core elements of the internet is the hyperlink, established by using an anchor. Hyperlinks are defined using the a inline element however they require a source to direct the link. The href attribute, known as hyperlink reference, is used to set the destination of a link.

To accompany the href attribute it is always good practice to include the title attribute as well. The title attribute is used to help browsers, screen readers, search engines, and other devices obtain a little more context to what the link is about. Generally speaking, the title shouldn’t mimic that of the anchor text, it should provide additional support.

By nature the a element is an inline element, however with the introduction of HTML5, a elements now have the ability to wrap block or inline level elements. This is a break from the standard convention yet permissible to turn entire blocks of content on a page into a link.

<a href="http://shayhowe.com" title="Shay Howe's Website">Shay Howe</a>

HTML5 Elements

HTML5 provides a handful of new elements, all of which are focused around improving semantics. Before, if you wanted to declare a block level section of a page you were likely to use a div. With HTML5 you have a handful of new block level elements that allow you to write more semantic code.

Header

The header, just as it sounds, is used to identify the heading of a page, article, section, or other segment of a page. In general, a header may include a heading, introduction text, or navigation. You can use more than one header on a page. Depending on the website, you will ideally include a header at the beginning of the page. Additionally, a header may reappear as the header of an article or section.

<header>...</header>

Navigation

The nav is a block level element used to denote a section of major navigational links on a page. Not all links should be wrapped within a nav element. The nav should be reserved for primary navigation sections including universal navigation, a table of contents, breadcrumbs, previous/next links, or other sections of noteworthy groups of links.

<nav>
  <ul>
    <li><a href="#" title="Link">...</a></li>
    <li><a href="#" title="Link">...</a></li>
  </ul>
</nav>

Article

The article block level element is very similar to that of a div or section however it is specifically defined as an element which should include independent, self-contained content that may be independently distributable or reusable. Most often article will fall within blogs and other publishing websites as a block of published content.

<article>...</article>

Section

A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section. Where a section differentiates itself from a div is that a section is not to be used as a convenience for styling or scripting purposes.

That said – you can apply styles to a section however you shouldn’t be using a section aimlessly with the sole purpose of adding styles. Reserve the section element for large parts of a page worthy of the element.

<section>...</section>

Aside

To accompany the header and footer elements there is also the aside block level element. An aside defines content related to the document or section surrounding it. As with header and footer elements, the aside can be used multiple times per page, so long as each use is practical.

<aside>...</aside>

Footer

The footer is identical to that of the header however for the bottom of a page, article, section, or other segment of a page. A footer should not stem away from the document or section at hand and its context should include relative information.

<footer>...</footer>

Microformats & WAI-ARIA Roles

In effort to make HTML more semantic and accessible HTML5 microformats and WAI-ARIA roles have emerged. HTML5 microformats provide contextual support for content to browsers and search engines. WAI-ARIA roles provide accessibility indicators to allow screen readers to identify components of a page.

HTML5 Microformats

HTML5 microformats are written within HTML and allow machines, including browsers and search engines, to pick up on additional semantics. These semantics are then interpreted into rich content for users. Currently the more popular uses of microformats reside within programming contact information, calendar events, and reviews.

Google, as an example, will read microformats from a website and use them within their search results to display more relevant data. Have you ever performed a search on a business location and noticed the address and sub sequential contact information showing up within the results? Chances are you may be reading an hCard microformat written on an existing website.

You can add microformats to your HTML by using markup including predetermined class, rel, rev and profile attributes. These attributes will then be picked up and interrupted as necessary. As mentioned, there are many different types of microformats available for all different purposes, below is an example of a hCard microformat.

<div class="vcard">
  <p><a class="fn org url" href="http://groupon.com/">Groupon</a></p>
  <div class="adr">
    <p class="type">Work</p>
    <p class="street-address">600 W. Chicago Ave.</p>
    <p>
      <span class="locality">Chicago</span>,
      <abbr class="region" title="Illinois">IL</abbr>
      <span class="postal-code">60654</span>,
      <span class="country-name">USA</span>
    </p>
  </div>
  <p class="tel"><span class="type">Work</span> +1-312-999-3495</p>
  <p>Email: <span class="email">shay@groupon.com</span></p>
</div>

WAI-ARIA Roles

WAI-ARIA (Accessible Rich Internet Applications) roles use different HTML attributes to make content more accessible to those with disabilities. Like many semantic practices, WAI-ARIA roles are invisible to the human eye. While they may not be visually seen they greatly accommodate users, especially those using a screen reader.

Within HTML roles can be added using the role attribute. An example for adding a role to the article element can be seen below.

<article role="article">...</article>

The value for the role attribute is dependent to the element it is being applied to. There are a handful of different roles available, the most popular being modeled off of the new HTML5 structural elements. A breakdown of these elements and their corresponding roles are referenced below.

• article role="article"
• section role="region"
• header role="banner"
• footer role="contentinfo"
• aside role="complementary"
• nav role="navigation"

D.R.Y. – Don’t Repeat Yourself

One principle of development is D.R.Y., also known as don’t repeat yourself. Within CSS this principle can speak volumes as it is easy to continually write the same styles over and over again. Don’t. CSS was designed in a way to allow you to cascade styles and use classes so that you easily apply and inherent styles. The end goal is to write clean and light code, of which is semantic and easily managed.

Resources & Links

• HTML5 Doctor
• The i, b, em, & strong Elements via HTML5 Doctor
• New Structural Elements in HTML5 via Dev.Opera
• HTML5 Microformats Wiki
• Operator Firefox Add-on
• Accessible Rich Internet Applications (WAI-ARIA)

Complete! Any questions?

Please feel free to contact me on Twitter if you have any questions. Also, if you enjoyed this lesson please share it with your friends.

• «
  Lesson 1 Terminology, Syntax, & Introduction
• «
• »
  Lesson 3 Box Model & Positioning