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.
HTML5 offers new semantic elements to define different parts of a web page:
<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.
<h1>Main Page Title</h1>
<h2>Less important heading here</h2>
<p>Some additional information here</p>
<img src="parrot-icon.svg" alt="Parrit Tutorial logo">
You can have several
<header> elements in one document.
<nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
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.
<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).
<p>PHP is PHP Hypertext Preprocessor</p>
<section> element represents a standalone section in a document, such as chapter, header, footer, or any other section of the document.
<p>The assignment of more than one behavior to a particular function.</p>
You can use <section> elements within <article> elements, and <article> elements within <section> elements.
<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.
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
<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.
<p>© 2018 Parrot Tutorial</p>
You can have several
<footer> elements in one document.
<img src="lizard.png" alt="Lizard">
<figcaption>Fig.1 - A green Lizard</figcaption>
The purpose of a figure caption is to add a visual explanation to an image.
Below is an alphabetical list of the HTML5 new semantic elements.
|<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|