HTML Sementics

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Sementics

Semantic elements are the elements with a meaning.

What is meant by Semantic Elements?

A semantic element defines its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about the content.

Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.

Semantic Elements in HTML

Several web sites have HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”> to indicate navigation, header, and footer.

In HTML, there are some semantic elements that are used to define different parts of a web page:  

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

HTML <section> Element

The <section> element denotes a section in a document.

Examples of where a <section> element can be used:

  • Chapters
  • Introduction
  • News items
  • Contact information
				
					<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

				
			

HTML <article> Element

The <article> element defines independent, self-contained content.

An article must have sense, and it should be possible to distribute it independently from the rest of the website.

Examples of where the <article> element can be used:

  • Forum posts
  • Blog posts
  • User comments
  • Product cards
  • Newspaper articles
				
					<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

				
			

Nesting <article> in <section> or Vice Versa?

The <article> element defines independent, self-contained content.

The <section> element specifies section in a document.

You can find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

HTML <header> Element

The <header> element illustrates a  container for introductory content or a set of navigational links.

A <header> element consists of :

  • one or more heading elements (<h1> – <h6>)
  • logo or icon
  • authorship information
				
					<header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>


				
			

HTML <footer> Element

The <footer> element  is used to define a footer for a document or section

A <footer> element consists:

  • authorship information
  • copyright information
  • contact information
  • sitemap
  • back to top links
  • related documents

Several <footer> elements  can be used in one document

				
					<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


				
			

HTML <nav> Element

The <nav> element denotes a set of navigation links.

				
					<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

				
			

HTML <aside> Element

The <aside> element describes some content aside from the content it is placed in (like a sidebar).

The <aside> content must indirectly related to the surrounding content.

				
					<aside>
  <h4>Epcot Center</h4>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

				
			

HTML <figure> and <figcaption> Elements

The <figure> tag denotes self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag is used to caption a <figure> element. The <figcaption> element can be placed either as first or the last child of a <figure> element.

The <img> element denotes the actual image/illustration.

				
					<figure>
  <img decoding="async" src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>