Hello, world!

HTML 5 Semantic Elements HTML

New semantic elements discussed in the HTML tutorial are article element, section element, nesting semantic elements, header element, nav element, aside element, footer element and the figure and figcaption elements.



HTML5 Semantic Elements

What are Semantic Elements?
A semantic element defines its meaning or function to the browser and to the developer.
 
The following are Non-semantic elements:
<div> and <span> - Doesn’t express any clear meaning about its content.
 
The following are Semantic elements:
<form>, <table>, and <img> - Clearly express the meaning and purpose of its content.
 
Supported Browser:
Internet Explorer
Mozilla Firefox
Opera
Google Chrome
Safari
 
HTML5 semantic elements can be processed in all modern browsers.
Moreover, you can "teach" old browsers to handle "unknown" HTML elements.

New Semantic Elements in HTML5

Some web sites icnlude HTML code such as: <div id="nav"> <div class="header"> <div id="footer">to specify navigation, header, and footer.
 
Here are new semantic elements in HTML 5 to identify various parts of a web page:   
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
 <header>
<hgroup>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Nesting Semantic Elements

In basic HTML5, the <article> element specifies an article in the page content that consists of a self-contained block of related elements.
As a block of related elements, the <section> element is identified.

But we cannot conclude on those definitions on how to nest element.
You will identify Web pages with <section> elements on the Internet  that include <article> elements, and <article> elements containing <sections> elements.
And you will indentify HTML pages as well with <section> elements that include <section> elements, and <article> elements that include <article> elements.

HTML5 <article> Element

The HTML <article> Element identifies an article in the page content that consists of a self-contained content in a document.
An Article is intended to be independently readable from any other website. This could be a forum post, a blog post, a magazine article, newspaper article or any other independent item of composition.

HTML code example html5 <article> element:

<article>
<h1>HTML5 Article Element</h1>
<p>WThe HTML Article Element specifies an article in the page content that consists of a self-contained content in a document.An Article is intended to be independently readable from any other website. This could be a forum post, a blog post, a magazine article, newspaper article or any other independent item of composition.
</p>
</article>

HTML output html5 <article> element:

HTML5 Article Element

WThe HTML Article Element specifies an article in the page content that consists of a self-contained content in a document.An Article is intended to be independently readable from any other website. This could be a forum post, a blog post, a magazine article, newspaper article or any other independent item of composition.



HTML5 <section> Element

The HTML <section> Element specifies a section in the page document.
In the W3C's HTML5 documentation, it is stated that: "A section is a thematic grouping of content, typically with a heading."
You can divide the Web site's home page into sections for introduction, content, and contact information.

HTML code example html5 <section> element:

<section>
<h1>HTML5 Section Element</h1>
<p> The HTML Section Element specifies a section in the page document.You can divide the Web site's home page into sections for introduction, content, and contact information. </p>
</section>
<section>
<h1>HTML5 Section Element According to W3C</h1>
<p>
In the W3C's HTML5 documentation, it is stated that: "A section is a thematic grouping of content, typically with a heading."
</p>
</section>

HTML output html5 <section> element:

HTML5 Section Element

The HTML Section Element specifies a section in the page document.You can divide the Web site's home page into sections for introduction, content, and contact information.

HTML5 Section Element According to W3C

In the W3C's HTML5 documentation, it is stated that: "A section is a thematic grouping of content, typically with a heading."



HTML5 <header> Element

Applying the HTML <header> Element allows you to identify a header for the content or a section.
Also the HTML <header> is applied as a container of introductory or navigational aids.  
You can put some <header> elements in one document.

HTML code example html5 <header> element:

<header>
<h1>HTML5 Header Element</h1>
<p>HTML Header Description:</p>
</header>
<p>The HTML Header Element specifies a header for the content or a section.
The HTML header is used as a container of introductory or navigational aids. You can put some header elements in one document.
</p>
</article>

HTML output html5 <header> element:

HTML5 Header Element

HTML Header Description:

The HTML Header Element specifies a header for the content or a section. The HTML header is used as a container of introductory or navigational aids. You can put some header elements in one document.



HTML5 <aside> Element

Applying the HTML <aside> Element allows you toidentify the content aside from the HTML document, they are displayed similar to sidebars.
The aside content must be related to the content around the aside element.

HTML code example html5 <aside> element:

<p>The aside content must be related to the content around the aside element</p>
<aside>
  <h4>HTML5 Aside Element</h4>
  <p>The HTML Aside Element specifies the content aside from the HTML document, they are displayed like sidebars.</p>
</aside>

HTML output html5 <aside> element:

The aside content must be related to the content around the aside element



HTML5 <nav> Element

Applying the HTML Navigation <nav> Element allows you to identify navigation links in the page document.
Not all links in a document need to be within a nav element, only sections that contain major blocks of navigation links are primarily intended for the nav element.

HTML code example html5 <nav> element:

<nav>
  <a href="http://ny.pe/">Home</a> |
  <a href="http://images-of.eu/About">About</a> |
  <a href="http://images-of.eu/Categories">Categories</a> |
  <a href="http://images-of.eu/">Images</a>
</nav>

HTML5 <footer> Element

Applying the HTML <footer> Element allows you to identify the footer for the content or a section.
A footer usually have data regarding its section such as author, links to related documents, copyright data, and contact information.
You can put some <footer> elements in one document.

HTML code example html5 <footer> element:

<footer>
  <p>Created by: Prince</p>
  <p>Email: <a href="mailto:nobody@yahoo.com">
  nobody@yahoo.com</a>.</p>
</footer>

HTML5 <figure> and <figcaption> Elements

Applying the HTML <figure> Element allows you to specify self-contained content, such as image, illustrations, diagrams, schema, code listings, etc.
Also the HTML <figcaption> Element specifies a caption or legend for a <figure> element.
Captions with images are usually found in books and newspapers, the reason of this is to include a visual explanation to an image.
On HTML5, the <figure> element is designed to be applied in relation with the <figcaption> element to mark up diagrams, illustrations, and images.

HTML code example html5 <figure> and <figcaption> elements:

<p>The Tubbataha Reefs Natural Park is a protected area of the Philippines located in the middle of Sulu Sea. The marine and bird sanctuary consists of two huge atolls and the smaller Jessie Beazley Reef covering a total area of 97,030 hectares</p>

HTML code example html5 <figure> and <figcaption> elements:

<figure>
  <img src="https://drive.google.com/uc?id=0B3wdKlA6ta9rTjFHbUxQdkIxMzQ" alt="Tubbataha Reef" width="304" height="228">
  <figcaption>Fig.1 - Coral reef in Cagayancillo, Philippines.</figcaption>
</figure>

HTML output html5 <figure> and <figcaption> elements:

Tubbataha Reef
Fig.1 - Coral reef in Cagayancillo, Philippines.


The <img> element corresponds to the image, the <figcaption> element corresponds to the caption.

Recommending HTML5 Elements

To design HTML page elements with HTML4, developers applied their own favorite attribute names: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …
But with HTML4, specifying the proper HTML content is made impossible for search engines.
This made easier with HTML5 elements such as <header> <footer> <nav> <section> <article>.
W3C defines Semantic Web as: "Allows data to be shared and reused across applications, enterprises, and communities."

Semantic Elements in HTML5

List of the new semantic elements in HTML5:
<article> - The HTML <article> Element specifies an article in the page content.
<aside> - The HTML <aside> Element specifies the content aside from the HTML document.
<details> - The HTML <details> Element retrieves additional information that the user can view or hide.
<figcaption> - The HTML <figcaption> Element specifies a caption or legend for a <figure> element.
<figure> - The HTML <figure> Element specifies self-contained content, such as image,  illustrations, diagrams, schema, code listings, etc.
<footer> - The HTML <footer> Element specifies the footer for the content or a section.
<header> - The HTML <header> Element specifies a header for the content or a section.
<main> - The HTML <main> Element specifies the main content of the body of a document.
<mark> - The HTML <mark> Element specifies marked or highlighted text.
<nav> - The HTML Navigation <nav> Element specifies navigation links in the page document.
<section> - The HTML <section> Element specifies a section in the page document.
<summary> - The HTML <summary> element specifies a visible heading for a <details> element.
<time> - The HTML <time> element specifies a date/time