WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 semantics

Semantics is the investigation of the implications of words and expressions in language.

Semantic components are components with a meaning.


What are Semantic Elements?

A semantic component obviously portrays its significance to both the program and the developer.

Examples of non-semantic components: <div> and <span> - Tells nothing about its content.

Examples of semantic components: <form>, <table>, and <img> - Clearly characterizes its content.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

HTML5 semantic components are bolstered in all cutting edge browsers.

In expansion, you can "teach" more seasoned programs how to deal with "unknown elements".

Read about it in HTML5 Browser Support.


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

The <article> component determines free, independent content.

An article should bode well individually, and it should be conceivable to peruse it freely from whatever is left of the web site.

Examples of where a <article> component can be used:

  • Forum post
  • Blog post
  • Newspaper article

Example

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's main goal is to stop the debasement of our planet's regular environment,
  and assemble a future in which people live in concordance with nature.</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

The <header> component determines a header for a record or section.

The <header> component ought to be utilized as a compartment for basic content.

You can have a few <header> components in one document.

The following model characterizes a header for an article:

Example

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's main goal is to stop the corruption of our planet's characteristic environment,
  and fabricate a future in which people live in congruity with nature.</p>
</article>
Try it Yourself »

HTML5 <footer> Element

The <footer> component determines a footer for a record or section.

A <footer> component ought to contain data about its containing element.

A footer normally contains the creator of the report, copyright data, connections to terms of utilization, contact data, etc.

You can have a few <footer> components in one document.

Example

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

HTML5 <nav> Element

The <nav> component characterizes a lot of route links.

The <nav> component is proposed for vast squares of route joins. Notwithstanding, not all connections in a record ought to be inside a <nav> component!

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

The <aside> component characterizes some substance beside the substance it is put in (like a sidebar).

The aside substance ought to be identified with the encompassing content.

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

In books and papers, usually to have inscriptions with images.

The reason for a subtitle is to add a visual clarification to an image.

With HTML5, pictures and subtitles can be assembled together in <figure> 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."