Semantic HTML elements you need to care about!

Semantic HTML elements you need to care about!

Writing semantic HTML is fundamental to good web development. Take time to understand this topic and become better at writing good usable markup for the web.


What is semantic html?

Semantic HTML are HTML elements that describe its function and contents to both the browser and the developer. It helps you determine what type of content needs to go into the tags and it helps browsers as well as google determine what type of content to expect.

Here is a definition from technopedia.com

A semantic element is an element of code that uses words to clearly represent what that element contains, in human language. For practical purposes, many of those researching semantic elements are looking at English language words used for the purposes of semantic labeling.

HTML elements for writing more semantic markup:

< article >

The article element specifies independent, self-contained content. It's good practice to wrap a single piece of content that can be shared on its own without any context, for example a blog post. Wrapping your entire page in an article is not a good idea and bad practice.

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

< aside >

The aside element defines some content aside from the content it is placed in. A good example is a sidebar with related articles or a set of definitions from an article. The content inside this tag should be indirectly related to the main content of a page.

<p>My family and I visited The Epcot centre this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

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

< details >

The details tag specifies additional details that the user can open and close on demand. This tag is an interactive widget that the user can control, by default is is closed and a user can open it to reveal the content. The detail can contain any sort of content.

Tip: The summary tag is used in conjunction with details to specify a visible heading for the details.

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

< figcaption >

The figcaption tag defines a caption for a figure element. The figcaption element can be placed as the first or last child of the figure element. This is a great way to display images with a caption inside a figure tag, especially if you have images with information that provides data much like in a scientific case study where figure's are used and referred to for information or context.

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

< figure >

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

While the content of the figure element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

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

The footer tag defines a footer for a document or section. I have seen many website misuse this tag and they often miss the value a good structured footer can give their website.

A footer element typically contains:

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

You can have several footer elements in one document.

Tip: Contact information inside a footer element should go inside an address tag.

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

The header element represents a container for introductory content or a set of navigational links.

A header element typically contains:

  • one or more heading elements (h1 - h6)
  • logo or icon
  • authorship information

Note: You can have several header elements in one HTML document. However, header cannot be placed within a footer, address or another header element.

<article>
  <header>
    <h1>A heading here</h1>
    <p>Posted by John Doe</p>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

< main >

The main tag specifies the main content of a document.

The content inside the main element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one main element in a document. The main element must NOT be a descendant of an article, aside, footer, header, or nav element.

<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

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

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

< mark >

The mark tag defines text that should be marked or highlighted.

<p>Do not forget to buy <mark>milk</mark> today.</p>

The nav tag 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.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/python/">Python</a>
</nav>

< section >

The section tag defines a section in a document. This tag is a good one to use to separate block of content inside article tags instead of using div everywhere.

<section>
<h2>WWF History</h2>
<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>
<h2>WWF's Symbol</h2>
<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>

< summary >

The summary tag defines a visible heading for the details element. The heading can be clicked to view/hide the details.

Note: The summary element should be the first child element of the details element.

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

< time >

The time tag defines a specific time (or datetime).

The datetime attribute of this element is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

Thank you for reading I hope this article gave you some new insight into how to better structure your html markup for a semantic web experience. If you found this helpful share this article and tag me on twitter @britzdm

Show Comments