freeCodeCamp

3.4 KiB

Raw Blame History

title
Semantic HTML Elements

Semantic HTML Elements

Semantic HTML elements provide meaning to browsers, developers, and users of a site. In contrast to elements like <div> or <span>, semantic elements like <header> and <footer> more clearly explain the purpose of each section of a website and make the website structure easier to understand.

Why Use Semantic Elements?

Developers use semantic elements to enhance the following:

accessibility: help assistive technologies read and interpret your webpage
searchability: help computers make sense of your content
internationalization: only 13% of the world are English native speakers
interoperability: help other programmers understand the structure of your webpage and separate content from display ¹

Useful Semantic Elements

<header> defines a header for the document or a section
<footer> defines a footer for the document or a section
<nav> defines navigation links in the document
<main> defines the main content of a document
<section> defines a section in the document—the spec defines this as “a thematic grouping of content, typically with a heading," so you can think of it as being like a chapter
<article> defines an article in the document
<aside> defines content aside from the page content
<address> defines the contact information for the author/owner of a document or an article
<figure> defines self-contained content, like illustrations, diagrams, photos, code blocks, etc. ²

Lesser-known Semantic Elements

<bdi> defines a section of text that might be formatted in a different direction from other text (for instance, a quote in Hebrew or Arabic in an otherwise-English article)
<details> defines additional details that people can view or hide (like a tooltip)
<dialog> defines a dialog box or window
<figcaption> defines the caption for a <figure>
<mark> defines marked or highlighted text
<menuitem> defines a command/menu item that the user can select from a popup menu
<meter> defines a scalar measurement within a known range (a gauge)
<progress> defines the progress of a task
<rp> defines what to show in browsers that do not support ruby annotations
<rt> defines an explanation/pronunciation of characters (for east asian typography)
<ruby> defines a ruby annotation (for east asian typography)
<summary> defines a visible heading for a <details> element
<time> defines a date/time
<wbr> defines a possible line-break ²

Sources

More Information:

For more information: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics

Refer to the MDN Web Docs article.

You might also want to check out this old school article in Scientific American co-authored by Tim Berners-Lee himself!

3.4 KiB Raw Blame History