Philip Northeast's Web Design Tips

philnortheast.com

Semantic HTML5 Elements

The HTML5  specification includes some new semantic structural elements. Do not be fooled by the fancy language, it only means the names of the elements relates to their function.

There are already a couple of familiar HTML structural elements with meaningful names, <head> and <body>.

The <head> tag naturally sits at the top of the web page   and contains information about how the page is displayed for the web browser.

The <body>  HTML tag defines the main part of the web page with viewable content.

For those of you who came in late, we no longer use tables to control the structure of web pages. Instead we use containers defined in the Cascading Style Sheet (CSS).  Web designers can call these structures whatever they like, but trends have occurred.  The World Wide Web Consortium recognised them and included them in HTML5.

 <header>

Not to be confused with the head tag, this refers to the usual first structure inside the body of a web page. This is the top of the page and usually contains site identification and a main menu.

The old way :

<div id = “header>
      the page header
</div> <!— end header —>

The HTML5 way: 

<header>
     the page header
</header>

<nav>

This tag is designed for navigation menus.

The old way:

<div id = “nav”>
       menu structure
</div>   <!— end nav —>

The HTML5 way:

<nav>
     menu structure
</nav>

<aside>

This for  the extra column that often goes alongside the main content structure.

The old way:

<div = “sidebar”>
      side column content
</div > <!— end sidebar —>

The HTML5 way :

<aside>
     side column content
</aside>

<footer>

This is the bottom of the page that signals to the reader that they reached the end and where copyright and other information is displayed.

The old way:

<div id = “footer”>
       bottom of page information
</div> <!— end footer—>

The HTML5 way:

<footer>
      bottom of page information
</footer>

The characteristics of these HTML5 tags are defined in the CSS in a similar manner to the old structures.They make the web page’s  HTML code in cleaner and more readable.

One big advantage is the statement to mark the end of the structure.  The commented end of structure statements  are optional. In a complex design it is easy to lose track of where a structure ends. This is a common problem where there are a number of nested structures ending at the same place in the code.  By making the end of the structure a semantic statement is a surprisingly big help for developers.