---
title: Semantic HTML Elements
---
## Semantic HTML Elements
The `` element marks text as being emphasized above the text around it. Typically, the browser renders this in *italics*, but you can add other styles using CSS.
Semantic HTML elements provide meaning to browsers, developers, and users of a site. In contrast to elements like `` or `
`, semantic elements like `` and `` more clearly explain the purpose of each section of a website.
### 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 1
### Useful Semantic Elements
* `` defines a header for the document or a section
* `` defines a footer for the document or a section
* `` defines navigation links in the document
* `` defines the main content of a document
* `` 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
* `` defines an article in the document
* `` defines content aside from the page content
* `` defines the contact information for the author/owner of a document or an article
* `` defines self-contained content, like illustrations, diagrams, photos, code blocks, etc. 2
### Lesser-known Semantic Elements
* `` 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)
* `` defines additional details that people can view or hide (like a tooltip)
* `` defines a dialog box or window
* `` defines the caption for a ``
* `` defines marked or highlighted text
* `` defines a command/menu item that the user can select from a popup menu
* `` defines a scalar measurement within a known range (a gauge)
* `` defines the progress of a task
* `` defines what to show in browsers that do not support ruby annotations
* `` defines an explanation/pronunciation of characters (for east asian typography)
* `` defines a ruby annotation (for east asian typography)
* `` defines a visible heading for a `` element
* `` defines a date/time
* `` defines a possible line-break 2
### Sources
1. [Lee, Michelle. "An Overview of HTML5 Semantics." *CodePen*. February 16, 2016. Accessed: October 24, 2017](https://codepen.io/mi-lee/post/an-overview-of-html5-semantics)
2. [Bidaux, Vincent. "HTML5 semantic elements and Webflow: the essential guide." *Webflow*. December 16, 2016. Accessed: October 24, 2017](https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide)
#### More Information:
For more information: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
Refer to the [MDN Web Docs article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em).