New Semantic Elements (Part 1)

Semantics Explained The textbook definition of "semantics" is the study of the relationship between words and their meanings. In the context of HTML, a semantic element is one whose name describes its actual purpose. Take, for example, the element that we used extensively in XHTML. It's useful for defining a section of a web page but it does not indicate anything about the nature of the section itself. HTML5 introduces new semantic elements that better define and organize web documents.

Benefits of Semantic Elements Pages become much easier to understand when it comes time to edit them in the future. This is especially true if someone other than the original programmer is doing the editing. Search engines can better understand our website's content. The better Google, Yahoo, and Bing can pinpoint what our pages are all about, the higher our pages will likely appear in the search results. Screen readers and assistive devices can more easily interpret the organization of a page, therefore presenting site content more effectively to disabled visitors.

The Header Section in XHTML Remember how a typical XHTML web page defined the header section? My Super Cool Website And here's the CSS styling to define the height, width, and background color of the header section, as well as the text color and size of the heading:.header { height: 100px; width: 800px; background-color: #0033FF; }.header h1 { text-size: 24px; color: #CCCCCC; }

The HTML5 Element HTML5 now gives us a new semantic element for the header section: My Super Cool Website In the CSS style sheet, adding styling to the header section is done using the element itself, rather than via a class. Notice there is no preceding dot: header { height: 100px; width: 800px; background-color: #0033FF; } header h1 { text-size: 24px; color: #CCCCCC; } The HTML5 page still looks identical to the XHTML page.

The Footer Section in XHTML In XHTML, defining the footer section was done in a similar fashion: © 2013 SuperCool LLC Here is the corresponding CSS styling to the footer section and text:.footer { height: 40px; width: 800px; background-color: #0033FF; }.footer p { text-size: 16px; color: #CCCCCC; text-align: center; }

The HTML5 Element HTML5 now provides us with a dedicated element: © 2013 SuperCool LLC The CSS styling remains the same, but we are now styling the element directly, rather than a class: footer { height: 40px; width: 800px; background-color: #0033FF; } footer p { text-size: 16px; color: #CCCCCC; text-align: center; } Again, the two pages (XHTML and HTML5) look the same when rendered by a browser.

Navigation in XHTML In XHTML, defining the navigation menu followed a similar path: Home Page 2... The CSS styled the class:.nav { border: 1px solid black; width: 798px; height: 35px;... }.navlink { width: 199px;... }

The HTML5 Element HTML5 now provides us with the semantic element: Home Page 2... The CSS now styles the element: nav { border: 1px solid black; width: 798px; height: 35px;... }.navlink { width: 199px;... }

Revisiting the Header Element The official W3C specification for the element says that it "represents a group of introductory or navigational aids." The specification further states that, "A header element is intended to usually contain the section's heading (an h1–h6 element) but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos." Since the header section often includes site navigation menus, let's go back to our simple site and move the within the.

Nesting Within Here we have moved the navigation menu to be inside the section: My Super Cool Website Home Page 2... Many HTML5 web designers prefer to place the main site menu within the top header section, as we just did.

Summary of Semantic Elements The new semantic elements in HTML5 add meaning to sections of a web document, assisting other programmers, search engines, and screen readers for the visually impaired. Just like the elements they replace, the new semantic elements do not actually do anything that is visible on the web page. That is accomplished completely with CSS styling. In the coming days, we will be learning about and using several more of the new semantic elements in HTML5.