HTML Semantics

Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.

In HTML there are several semantic elements that can be used to define different parts of a web page:

-

-

-

-

-

-

-

-

-

-

-

-

-

HTML Element

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."

Examples of where a <section> element can be used:

• Chapters

• Introduction

• News items

• Contact information

A web page could normally be split into sections for introduction, content, and contact information.

Example

HTML Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

Examples of where the <article> element can be used:

• Forum posts

• Blog posts

• User comments

• Product cards

• Newspaper articles

Example

Example 2

Nesting in or Vice Versa?

The <article> element specifies independent, self-contained content.

The <section> element defines a section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

HTML Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

• one or more heading elements ( - )

• logo or icon

• authorship information

Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.

Example

HTML Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

• authorship information

• copyright information

• contact information

• sitemap

• back to top links

• related documents

You can have several <footer> elements in one document.

Example

HTML Element

The <nav> element defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Example

<nav>

 <a href="/html/">HTML</a> |

 <a href="/css/">CSS</a> |

 <a href="/js/">JavaScript</a> |

 <a href="/jquery/">jQuery</a>

 </nav>

HTML Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

Example

Example 2

HTML and Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

Example

Why Semantic Elements?

According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."

Semantic Elements in HTML

Below is a list of some of the semantic elements in HTML.

For a complete list of all available HTML tags, visit our HTML Tag Reference.