Semantic HTML Cheat Sheet

Sectioning Tags

 <header>: The header of a content section or the web page, often containing branding or
logos.

 <nav>: Navigation links for a section or the web page.

 <footer>: The footer of a content section or the web page, typically containing secondary
links, copyright notices, and policies.

 <main>: Main content of a section or the web page.

 <aside>: Secondary content not required to understand the main content.

 <article>: Independent, self-contained block of content like a blog post or product.

 <section>: Standalone section of the document, often used

 <details>: Collapsed section of content that can be expanded by the user.

 <summary>: Summary or caption for a <details> element.

 <h1> to <h6>: Headings on the web page, with <h1> being the most important and <h6> the
least important.

Content Tags

 <blockquote>: Describes a quotation.

 <dd>: Defines a description for the preceding <dt> element.

 <dl>: Defines a description list.

 <dt>: Describes terms inside <dl> elements.

 <figcaption>: Caption for a photo image.

 <figure>: Applies markup to a photo image.

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

 <li>: Defines an item within a list.

 <menu>: Semantic alternative to <ul> tag.

 <ol>: Defines an ordered list.

 <p>: Defines a paragraph.

 <pre>: Represents preformatted text, typically rendered in a monospace font.

 <ul>: Defines an 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 (e.g., 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

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