HTML Semantics

HTML Semantic Elements

 
Semantic elements = elements with a meaning.


What are Semantic Elements?

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

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

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

Semantic Elements in HTML

Many web sites contain 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 can be 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 defines a section in a document.

According to W3C’s HTML documentation: “A section is a thematic grouping of content, typically with a heading.”

A home page could normally be split into sections for introduction, content, and contact information.

<!DOCTYPE html>

<html>

<body>

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

<section>

  <h1>WWF’s Panda Symbol</h1>

  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>

 

</section>

 

</body>

</html>

WWF

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.

WWF’s Panda symbol

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

HTML <article> Element

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

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

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

  • Forum post
  • Blog post
  • Newspaper article

<!DOCTYPE html>
<html>
<body

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF’s mission is to stop the degradation of our planet’s natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

</body>
</html>

What Does WWF Do?

WWF’s mission is to stop the degradation of our planet’s natural environment, and build a future in which humans live in harmony with nature.

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

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

The <section> element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, on the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

Example for a newspaper: The sport <article> in the sport section, may have a technical section in each <article>.

HTML <header> Element

The <header> element specifies a header for a document or section.

The <header> element should be used as a container for introductory content.

You can have several <header> elements in one document.

The following example defines a header for an article:

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF’s mission:</p>
  </header>
  <p>WWF’s mission is to stop the degradation of our planet’s natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>

What Does WWF Do?

WWF’s mission:

WWF’s mission is to stop the degradation of our planet’s natural environment, and build a future in which humans live in harmony with nature.

HTML <footer> Element

The <footer> element specifies a footer for a document or section.

<footer> element should contain information about its containing element.

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

You may have several <footer> elements in one document.

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href=”mailto:someone@example.com”>
  someone@example.com</a>.</p>
</footer>
</body>
</html>

Posted by: Hege Refsnes

Contact information: someone@example.com.

HTML <nav> Element

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

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

HTML <aside> Element

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

The <aside> content should be related to the surrounding content.

<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>

My family and I visited The Epcot center this summer.

HTML <figure> and <figcaption> Elements

An image and a caption can be grouped together in a <figure> element.

The purpose of a caption is to add a visual explanation to an image.

<!DOCTYPE html>

<html>

<body>

 

<h2>Places to Visit</h2>

 

<p>Puglia’s most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>

 

<figure>
  <img src=”pic_trulli.jpg” alt=”Trulli”>
  <figcaption>Fig1. – Trulli, Puglia, Italy.</figcaption>
</figure>

 

</body>

</html>

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

The <img> element defines the image, the <figcaption> element defines the caption.

 

Why Semantic Elements?

According to the W3C: “A semantic Web allows data to be shared and reused across applications, enterprises, and communities.”