Semantics = Meaning
Semantic elements = meaningful elements
What are semantic elements?
A semantic element can clearly describe its meaning to browsers and developers.
No semantics Element example: <div> with <span>- No need to think about content.
Semantics Element example: <form>, <table>, and <img> -Its content is clearly defined.
Note: This element is not supported in Internet Explorer 8 and earlier. But compatible solutions are provided at the bottom of the article.
New Semantic Elements in HTML5
Many sites contain HTML code like:
<div id="nav"> <div class="header"> <div id="footer">
to show route, header, and footer.
HTML5 offers new semantic components to characterize diverse pieces of a website page:
HTML5 <section> Element
The <section> component characterizes a segment in a document.
According to W3C's HTML5 documentation: "A segment is a topical gathering of substance, commonly with a heading."
A Web webpage's landing page could be part into areas for presentation, substance, and contact information.
<p>The World Wide Fund for Nature (WWF) is....</p>
HTML5 <article> Element
<article> Tags define independent content. .
<article> Element usage example:
- Forum post
- Blog post
- News story
<p> Windows Internet Explorer 9 (abbreviated as IE9) was released on March 14, 2011 at 21:00. </p> </article>
Nesting Semantic Elements
In the HTML5 standard, the <article> component characterizes a total, independent square of related elements.
The <section> component is characterized as a square of related elements.
Can we utilize the definitions to choose how to settle components? No, we cannot!
On the Internet, you will discover HTML pages with <section> components containing <article> components, and <article> components containing <sections> elements.
You will likewise discover pages with <section> components containing <section> components, and <article> components containing <article> elements.
HTML5 <header> Element
<header>Element describes the head area of the document
<header>The element is mainly used to define the presentation area of the content.
You can use multiple <header> Element.
The following example defines the head of the article:
<h1> Internet Explorer 9 </h1>
<p><time pubdate datetime="2011-03-15"></time></p>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released on
March 14, 2011 at 21:00</p>
HTML5 <footer> Element
<footer> Element describes the bottom area of the document.
<footer> Element should contain its containing elements
You can use multiple<footer>Element.
<p>Posted by: WELOOKUPS</p>
<p>Contact data: <a href="mailto:email@example.com">
HTML5 <nav> Element
<nav> The label defines the part of the navigation link.
<nav> Element is used to define the navigation link part of the page. However, not all links need to be included in <nav>Element!
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
HTML5 <aside> Element
<aside> Tags define content outside the main area of the page (such as the sidebar).
The content of the aside tag should be relevant to the content of the main area.
<p>The Epcot Center is an amusement park in Disney World, Florida.</p>
HTML5 <figure> and <figcaption> Elements
<figure>Tags specify independent streaming content (images, charts, photos, code, etc.).
<figure> The content of the element should be relevant to the main content, but if deleted, it should not affect the document flow.
<figcaption> Label definition <figure> The title of the element.
<figcaption>The element should be placed at the first or last child of the "figure" element.elements:
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
The <img> component characterizes the picture, the <figcaption> component characterizes the caption.
Why Semantic HTML5 Elements?
With HTML4, engineers utilized their own most loved ascribe names to style page elements:
header, top, base, footer, menu, route, fundamental, holder, content, article, sidebar, topnav, ...
This made it outlandish for web indexes to distinguish the right site page content.
With HTML5 components like: <header> <footer> <nav> <section> <article>, this will wind up less demanding.
According to the W3C, a Semantic Web:
"Allows information to be shared and reused crosswise over applications, endeavors, and communities."