Skip to content Skip to navigation

Connexions

You are here: Home » Content » Structural Semantic Elements in HTML5

Navigation

Lenses

What is a lens?

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

This content is ...

In these lenses

  • HTML-CSS display tagshide tags

    This module is included inLens: HTML, XHTML and CSS
    By: Hannes Hirzel

    Comments:

    "Explains the idea of the new semantic tags added in HTML5 to structure web pages."

    Click the "HTML-CSS" link to see all content selected in this lens.

    Click the tag icon tag icon to display tags associated with this content.

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.
 

Structural Semantic Elements in HTML5

Module by: Hannes Hirzel. E-mail the author

Summary: In HTML5 more tags were introduced to show the meaning (semantics) of the text it contains. Some of these semantic tags are for showing the structure of a web page like header, navigation part, a section for the content and a footer.

Aim

A web page typically has a header part at the top containing a title, maybe a graphic and some other elements. Then there is a navigation area, one or more content sections and a footer.

In HTML5 semantic tags (like <header>, <footer>, <section>, <nav>, <aside>) were introduced to help people mark the structure of a web page.

These tags allow programs (e.g. search engines) to extract information better from the web pages as the elements are identified by a standard tag name.

Before HTML5

Before HTML5 people used to mark areas with div tags as this was the only element available to do this. Even before they used a table to do the layout. For the div tags attributes were used to distinguish the different parts. For a navigation box all the following code examples are possible. 

<div id="navigation">.....</div>
or 
<div id="navbox">.....</div>
or 
<div class="navigation">.....</div>
or 
<div class="nav">.....</div>

HTML5 structural semantic tags

  • <header>
  • <footer>
  • <section>
  • <nav>
  • <aside>
  • <article>

With this HTML5 standardization the ambiguity in the example of a navigation area mentioned above is eliminated. The code now is only 

<nav>.....</nav>
.

<article> tag

The <article>...</article> tags are meant to enclose text content which can stand for itself - a self-contained unit.

Examples

Example of a simple page layout

<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>

<body>
<header><h1>Our web site</h1></header>
<nav><a href="details.html">Details</a></nav>
<section >the content</section>
<footer>Contact:  ...... Email: .....</footer>
</body>

</html>
...will be expanded and commented later...

Another example

A more elaborate example.

An example with articles.

<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>

<body>
<header>
  <h1>Our web site</h1>
  <nav><a href="details.html">Details</a></nav>
</header>

<section >
  <article>
   ...
  </article>

  <article>
   ...
  </article>

  <article>
   ...
  </article>
</section>

<footer>Contact:  ...... Email: .....</footer>

</body>
</html>

Browser support

All current browsers support these tags. Internet Explorer 9 was the last to do this. It was released in March 2011 and may be installed on any Windows 7 installation. Windows 7 came out in October 2009. Alternatively Firefox, Chrome or Opera may be used. They can be installed on Windows XP.

For Internet Explorer there are JavaScript libraries which retrofit the support of the structural semantic tags. html5shiv is one of them. It is as well part of modernizr which has additional functions to retrofit HTML5 capabilities into older IE browsers.

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks