Semantic HTML cheat sheet

There are hundreds of semantic tags available to help describe the meaning of your HTML documents. Below is a cheat sheet with some of the most common ones you’ll use in this course and in your development career.

Sectioning tags

Use the following tags to organize your HTML document into structured sections.

<header> The header of a content section or the web page. The web page header often contains the website branding or logo.

<nav> The navigation links of a section or the web page.

<footer> The footer of a content section or the web page. On a web page, it often contains secondary links, the copyright notice, privacy policy and cookie policy links.

<main> Specifies the main content of a section or the web page.

<aside> A secondary set of content that is not required to understand the main content.

<article> An independent, self-contained block of content such as a blog post or product.

<section> A standalone section of the document that is often used within the body and article elements.

<details> A collapsed section of content that can be expanded if the user wishes to view it.

<summary> Specifies the summary or caption of a <details> element.

<h1><h2><h3><h4><h5><h6> Headings on the web page. <h1> indicates the most important heading whereas <h6> indicates the least important. 

Content tags

<blockquote> Used to describe a quotation.

<dd> Used to define a description for the preceding <dt> element.

<dl> Used to define a description list.

<dt> Used to describe terms inside <dl> elements.

<figcaption> Defines a caption for a photo image.

<figure> Applies markup to a photo image.

<hr> Adds a horizontal line to the parent element.

<li> Used to define an item within a list.

<menu> A semantic alternative to <ul> tag.

<ol> Defines an ordered list.

<ul> Unordered list

<p> Defines a paragraph.

<pre> Used to represent preformatted text. Typically rendered in the web browser using a monospace font.

Inline tags

<a> An anchor link to another HTML document.

<abbr> Specifies that the containing text is an abbreviation or acronym.

<b> Bolds the containing text. When used to indicate importance use <strong> instead.

<br> A line break. Moves the subsequent text to a new line.

<cite> Defines the title of creative work (for example a book, poem, song, movie, painting or sculpture). The text in the <cite> element is usually rendered in italics.

<code> Indicates that the containing text is a block of computer code.

<data> Indicates machine-readable data.

<em> Emphasizes the containing text.

<i> The containing text is displayed in italics. Used to indicate idiomatic text or technical terms.

<mark> The containing text should be marked or highlighted.

<q> The containing text is a short quotation.

<s> Displays the containing text with a strikethrough or line through it.

<samp> The containing text represents a sample.

<small> Used to represent small text, such as copyright and legal text.

<span> A generic element for grouping content for CSS styling.

<strong> Displays the containing text in bold. Used to indicate importance.

<sub> The containing text is subscript text, displayed with a lowered baseline.

<sup> The containing text is superscript text, displayed with a raised baseline.

<time> A semantic tag used to display both dates and times.

<u> Displays the containing text with a solid underline.

<var> The containing text is a variable in a mathematical expression.

Embedded content and media tags

<audio> Used to embed audio in web pages.

<canvas> Used to render 2D and 3D graphics on web pages.

<embed> Used as a containing element for external content provided by an external application such as a media player or plug-in application.

<iframe> Used to embed a nested web page.

<img> Embeds an image on a web page.

<object> Similar to <embed> but the content is provided by a web browser plug-in.

<picture> An element that contains one <img> element and one or more <source> elements to offer alternative images for different displays/devices.

<video> Embeds a video on a web page.

<source> Specifies media resources for <picture>, <audio> and<video> elements.

<svg> Used to define Scalable Vector Graphics within a web page.

Table tags

<table> Defines a table element to display table data within a web page.

<thead> Represents the header content of a table. Typically contains one <tr> element.

<tbody> Represents the main content of a table. Contains one or more <tr>elements.

<tfoot> Represents the footer content of a table. Typically contains one <tr> element.

<tr> Represents a row in a table. Contains one or more <td> elements when used within <tbody> or <tfoot>. When used within <thead>, contains one or more <th> elements.

<td> Represents a cell in a table. Contains the text content of the cell.

<th> Defines a header cell of a table. Contains the text content of the header.

<caption> Defines the caption of a table element.

<colgroup> Defines a semantic group of one or more columns in a table for formatting.

<col> Defines a semantic column in a table.