Structural tags in HTML5

HTML 5 specification added some new tags for the markup that will replace many typical div entries and a new doctype.

First of all, HTML5 uses a new and simple doctype: <!DOCTYPE html>. This indicates that the broswer should use HTML5.

The new tags in the structure are:

<header>
– intended to mark a section of the HTML page as the header.

<section>
– meant to identify significant portions of the content
– sections can be nested inside each other if needed
– can have a header and a footer
– sections are like chapters of a book

<article>
– identifies major sections of content

<aside>
– indicates that the content contained within the tag is related to the main content of the page, but not part of it
– provides additional information

<footer>
– marks the section of the HTML page as the footer
– typically contains information about its section such as who wrote it, copyright data, links to related documents

<nav>
– defines the navigation area, tipically a list of links
– the nav should be a sibling of the main section, header and footer

Example of use:

<!DOCTYPE html>
<html>
  <head>
    <title>Structural tags in HTML5</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Structural tags in HTML5</a></h1>
      <nav>
        <a href="#">Home</a> |
        <a href="#">Link 1</a> |
        <a href="#">Link 2</a> |
      </nav>
    </header>
    <section>
      <article>
        <p>This is an important section of content on the page.</p>
        <aside>
          <p>This is an aside for the first article.</p>
        </aside>
      </article>
      <article>
        <p>This is an important section of content on the page.</p>
      </article>
    </section>
    <footer>This is the footer</footer>
  </body>
</html>

Using HTML5 in all browsers

Because some browsers don’t understand the new HTML5 doctype, they don’t recognize the new tags. All unknown tags have no default style, and are treated as inline tags (and we need to use them as block elements).
We can style them with CSS like this:
header, nav, section, article, aside, footer { display: block; }

Supporting IE
IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. For reparing that, we need to creare a DOM node with JavaScript for each of the new tag, like this:

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s