# Connexions

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

### 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?

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

#### In these lenses

• HTML-CSS

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

"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 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

• <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>
<title>The title of the document</title>

<body>
<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>
<title>The title of the document</title>

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

<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

PDF | EPUB (?)

### What is an EPUB file?

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

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?

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