Semantic HTML Cheat Sheet

Semantic HTML

Semantic HTML introduces meaning to the code we write. Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as <div> was used as a general‐purpose element to create things from headers to footers to articles. With Semantic HTML we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.

Semantic HTML refers to the idea that all your HTML markup should convey the underlying meaning of your content (not its appearance). Sectioning elements are a set of elements designed for the sole purpose of adding more meaning to the overall layout of a web page, and they look something like in figure 1.

Element Placement

Semantic HTML introduces elements that can tell developers exactly what the element does or where it’s placed based on the name of that element. Some of these elements are <header>, <nav>, <main>, and <footer>. <header> describes the content at the top of the page <body>. It may include a logo, navigational links or a search bar. <nav> encapsulates the page’s navigational links. It is often placed inside the <header>or <footer>. <main> encapsulates the main content of a page between the header/navigation and the footer areas. <footer> includes the page’s footer content at the bottom of the <body>.

Sectioning Elements

Element Placement Purpose Content
<header> At the beginning Denotes introductory content for a section, article, or entire web page.
  • Company’s logo
  • Navigational aids
  • Author information
<footer> At the end Denotes concluding content for a section, article, or entire web page.
  • Copyright notices
  • Footer navigation
  • Author bios
<aside> At the side Used to mark additional information that can enhance another element but isn’t required in order to understand the main content.
  • Advertisements
  • Highlighting definitions
  • Quotations
<nav> Inside header, footer or aside element Lets you mark up the various navigation sections of your website.
  • Main site navigation
  • Links to related pages
  • Tables of content
<article> At the body or inside other element Represents an independent article in a web page. Wraps content that can be plucked and distributed in a different context.
  • Headers
  • Content
  • Figures
<section> At the body or inside other element Defines elements in a document with the same theme. It doesn’t need to make sense outside the context of the document.
  • Headers
  • Content
  • Figures
Table 1: The main sectioning elements of web pages

Other Semantic Elements

Element Purpose Attributes Content
<figure> Represents a self-contained "figure" used to encapsulate media.
  • Images
  • Tables
  • Diagrams
<figcaption> Used to describe the media within the <figure> element.
  • Media's type
  • Media's description
<video> Used to embed video content into a document. Uses the src attribute or the element <source> to embed. controls
autoplay
loop
  • Video
<audio> Used to embed audio content into a document. Uses the src attribute or the element <source> to embed. controls
autoplay
loop
  • Audio
<embeded> Can embed any media content from an external source.
*Note that it is a deprecated tag
  • Audio
  • Video
  • GIFs
<time> Represents either a time of day or a calendar date. It makes it possible for browsers to link it to users’ calendars and helps search engines identify dates. datetime
  • Time of day
  • Calendar date
  • Any datetime
<address> It defines contact information for the author of the article or web page in question.
It should not be used for arbitrary physical addresses.
  • Author's name
  • Author's e-mail
  • Author's phone
Table 1: The main sectioning elements of web pages