HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Semantic Elements

In any language, semantics is used to study the meaning of words and phrases.

Semantic elements have a simple and clear meaning for both, the browser and the developer.

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

And semantic elements: <form>, <header>, <footer> and <article> - Clearly defines its content.

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

This made it impossible for search engines to identify the correct web page content.

With the new HTML5 elements this will become easier.


New Semantic Elements in HTML5

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


HTML5 <header> Element

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

It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on.

Run code

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



HTML5 <nav> Element

The HTML5 <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.

Run code

It's not necessary for all links to be contained in a <nav> element. <nav> is intended only for major block of navigation links; typically the <footer> element often has a list of links that don't need to be in a <nav> element.


HTML5 <article> Element

The HTML5 <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).

Examples include:

  • Forum post
  • Blog post
  • News story
  • Comment
Run code

HTML5 <section> Element

The HTML5 <section> element represents a standalone section in a document, such as chapter, header, footer, or any other section of the document.

Run code

You can use <section> elements within <article> elements, and <article> elements within <section> elements.

Do not use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes.


HTML5 <aside> Element

The HTML5 <aside> element is used to specify a section of a page aside from the related section.

This tag can be used for glossary definitions, author biography, author profile etc.

Run code

HTML5 <footer> Element

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

A footer typically contains information about the author of the section, copyright data or links to related documents.

Run code

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


HTML5 <figure> and <figcaption> Elements

The <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.

The <figcaption> element is used to add a caption for the <figure> element.

Run code

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


HTML5 Semantic Elements

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

Tag Description
<article> Specifies an article
<aside> Represents a content that is indirectly related to the main content
<details> Specifies additional details that the user can view or hide
<figcaption> Specifies a caption for a <figure> element
<figure> Represents self-contained content
<footer> Specifies 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> Specifies highlighted text
<nav> Specifies navigation links
<section> Specifies a section in a document
<summary> Specifies a visible heading for a <details> element
<time> Specifies a date/time