WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 semantics

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.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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:  

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

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.

Example

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

HTML5 <article> Element

<article> Tags define independent content. .

<article> Element usage example:

  • Forum post
  • Blog post
  • News story
  • Comment

Example

<article>
  <p> Windows Internet Explorer 9 (abbreviated as IE9) was released on March 14, 2011 at 21:00. </p> </article>
Try it Yourself »

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:

Example

<article>
  <header>
    <h1> Internet Explorer 9 </h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released on
  March 14, 2011 at 21:00</p>
</article>
Try it Yourself »

HTML5 <footer> Element

<footer> Element describes the bottom area of the document.

<footer> Element should contain its containing elements

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

You can use multiple<footer>Element.

Example

<footer>
  <p>Posted by: WELOOKUPS</p>
  <p>Contact data: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
Try it Yourself »

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!

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

<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.

Example

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

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is an amusement park in Disney World, Florida.</p>
</aside>
Try it Yourself »

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:

Example

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
Try it Yourself »

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."