Semantic HTML cheat sheet
Tags: learning, beginners, html, newbie
Published: 2024-03-24 02:09:04

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-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.

**< p >**
Defines a paragraph.

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

**< ul >**
Unordered list

## 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.