HTML CSS MORE 

w3schools.com

HTML5 Semantic Elements

❮ Previous Next ❯

Semantics is the study of the meanings of words and phrases in a language.

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: <form> , <table> , and <article> - Clearly defines its content.

Browser Support

Yes Yes Yes Yes Yes

HTML5 semantic elements are supported in all modern browsers.

In addition, you can "teach" older browsers how to handle "unknown elements".

Read about it in HTML5 Browser Support.

New Semantic Elements in HTML5

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

HTML5 offers new semantic elements to define different parts of a web page:  

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
  
<mark>
<nav>
<section>
<summary>
<time>

HTML5 <section> Element

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

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

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

Example

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Try it Yourself »
HTML5 HTML
<article>
CSS Element
MORE 

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

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

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

Forum post
Blog post
Newspaper article

Example

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's
natural environment,
  and build a future in which humans live in harmony with nature.
</p>
</article>

Try it Yourself »

Nesting <article> in <section> or Vice Versa?

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

The <section> element defines section in a document.

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

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

You will also find pages with <section> elements containing <section> elements, and
<article> elements containing <article> elements.
 Example for a newspaper: The sport <article> in the sport section, may have a technical
HTML CSS MORE 
section in each <article> .

HTML5 <header> Element

The <header> element specifies a header for a document or section.

The <header> element should be used as a container for introductory content.

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

The following example defines a header for an article:

Example

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's
natural environment,
  and build a future in which humans live in harmony with nature.
</p>
</article>

Try it Yourself »

HTML5 <footer> Element

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

A <footer> element should contain information about its containing element.

A footer typically contains the author of the document, copyright information, links to terms of use,
contact information, etc.

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

 ExampleHTML CSS MORE 

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

Try it Yourself »

HTML5 <nav> 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 block of navigation links.

Example

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Try it Yourself »

HTML5 <aside> Element

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

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

 ExampleHTML CSS MORE 

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.
</p>
</aside>

Try it Yourself »

HTML5 <figure> and <figcaption> Elements

The purpose of a figure caption is to add a visual explanation to an image.

In HTML5, an image and a caption can be grouped together in a <figure> element:

Example

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Try it Yourself »

The <img> element defines the image, the <figcaption> element defines the caption.

Why Semantic Elements?

With HTML4, developers used their own id/class names to style elements: header, top, bottom, footer,
menu, navigation, main, container, content, article, sidebar, topnav, etc.

This made it impossible for search engines to identify the correct web page content.
With the new HTML5 elements ( <header> <footer> <nav> <section> <article> ), this
HTML CSS MORE 
will become easier.

According to the W3C, a Semantic Web: "Allows data to be shared and reused across applications,
enterprises, and communities."

Semantic Elements in HTML5

Below is an alphabetical list of the new semantic elements in HTML5.

The links go to our complete HTML5 Reference.

Tag Description

<article> Defines an article

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<figcaption> Defines a caption for a <figure> element

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

<footer> Defines a footer for a document or section

<header> Specifies a header for a document or section

<main> Specifies the main content of a document

<mark> Defines marked/highlighted text

<nav> Defines navigation links

<section> Defines a section in a document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

❮ Previous Next ❯
HTML CSS MORE 

COLOR PICKER

HOW TO

Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

SHARE

 

CERTIFICATES
HTML
CSS
JavaScript
 SQL
HTML CSS MORE 
Python
PHP
jQuery
Bootstrap
XML

Read More »

REPORT ERROR

PRINT PAGE

FORUM

ABOUT

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP 5 Tutorial
PHP 7 Tutorial
jQuery Tutorial
Java Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
 jQuery Reference
HTML CSS MORE Angular Reference
Java Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
XML Examples

Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

Get Certified »

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2019 by
Refsnes Data. All Rights Reserved.
Powered by W3.CSS.