3.4 KiB
3.4 KiB
title
| 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 1
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. 2
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 2
Sources
- Lee, Michelle. "An Overview of HTML5 Semantics." CodePen. February 16, 2016. Accessed: October 24, 2017
- Bidaux, Vincent. "HTML5 semantic elements and Webflow: the essential guide." Webflow. December 16, 2016. Accessed: October 24, 2017
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!