Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

Semantic Elements

One of the most significant changes in HTML 5 is the introduction of new content-specific elements, like <article>, <footer>, <header>, <nav>, and <section>. These are called semantic elements because their names indicate their function.

HTML 4 Structural Elements:

HTML 5 Semantic Structural Elements:

Used for the header of a document or section - should be used as a container for introductory content or navigational links. You can have several <header> elements in one HTML document.

<nav>

Defines a set of navigation links - intended only for major block of navigation links.

Used for independent, self-contained content which should make sense on its own and it should be possible to distribute it independently from the rest of the site such as a blog post or news story.

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. - its position is independent of the main flow, and if removed it should not affect the flow of the document.

Defines a caption for a <figure> element.

Defines sections in a document, such as chapters, headers, footers.

<aside>

Defines content that is related to but aside from the main content. Aside content usually appears in a sidebar on the page.

Defines a footer for a document or section. Typically contains the author of the document, copyright information, links to terms of use, contact information, etc. You can have several <footer> elements in one document.

Styling Semantic Elements

The semantic elements can be styled in the same way that <div> tags are styled:

Source Style Code:

Source HTML Code:

<header>This is the header element.</header>

<nav>This is the nav element.</nav>

<article>
<p>
These two paragraphs are in the article element. All of these elements (new in HTML 5) are called semantic elements because, unlike the div element, their names indicate their function.</p>
<p>
The advantage of semantic naming of HTML elements is that browser apps, search engines, and human beings can more easily determine their purpose in the page.</p>
</article>

<footer>This is the <footer> element.</footer>

Web page:

This is the header element.

These two paragraphs are in the article element. All of these elements (new in HTML 5) are called semantic elements because, unlike the div element, their names indicate their function.

The advantage of semantic naming of HTML elements is that browser apps, search engines, and human beings can more easily determine their purpose in the page.

<header>	Used for the header of a document or section - should be used as a container for introductory content or navigational links. You can have several <header> elements in one HTML document.
<nav>	Defines a set of navigation links - intended only for major block of navigation links.
<article>	Used for independent, self-contained content which should make sense on its own and it should be possible to distribute it independently from the rest of the site such as a blog post or news story.
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. - its position is independent of the main flow, and if removed it should not affect the flow of the document.
<figcaption>	Defines a caption for a <figure> element.
<section>	Defines sections in a document, such as chapters, headers, footers.
<aside>	Defines content that is related to but aside from the main content. Aside content usually appears in a sidebar on the page.
<footer>	Defines a footer for a document or section. Typically contains the author of the document, copyright information, links to terms of use, contact information, etc. You can have several <footer> elements in one document.