Structure Tags in HTML

Objectives

Practice

More Info.

• Lecture Code
• Page Layout in HTML5 Video
• W3 Schools - HTML5 Semantic Tags
• Page Layout with Semantic Tags

This lesson will teach you to...

• Use HTML5 semantic structure tags to build a web page

Structure Tags

A basic HTML page typically has several parts or sections. These may include:

• the header, with a logo and often the navigation
• the main content, often broken up into sections
• the footer

In the past, this type of page division was handled with div tags that were given unique dis like header, nav, content, and footer. Maintaining appropriate style requIred a variety of CSS ids in the style sheet. An example of this page structure can be seen below:
<div id='header'> <h2>Page Title</h2> <div id='nav'> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </div> </div> <div id='content'> Lorem ipsum... </div> <div id='footer'> copyright NewWebWorlds.com </div>

In 2012, in an effort to help designers appropriately structure pages, HTML 5 was released. This new language guide included semantic structure tags of block level containers. These new semantic tags better identify the the coded sections of a page AND provide a means to better store data for web applications. The new tags included:

• <header>-the header of a page or section
• <footer>-the footer of a page or section
• <nav>-the navigation section of a page
• <section>-used for grouping together related content. These are often treated as the main divisions within a page
• <article>-a stand alone set of information that could exist independently outside of the page
• <aside>- information that is related to the topic - often used as a sidebar

An example of the previous page written with the new semantic tags can be seen below: <header> <h2>Page Title</h2> <nav> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </nav> </header> <section> Lorem ipsum... </section> <footer> copyright NewWebWorlds.com </footer>

HTML was created with new browsers in mind and, to that end, uses tags that may not be compatible with older browsers. To remedy this situation, designers can use a a JavaScript library called html5shiv that helps these browsers to recognize/handle the new tags. To utilize this library, download it and ink to it in the top of your document as follows: <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]-->