Text Tags Cheatsheet

"A quick reference for Table tags you'll actually use"

Updated July 2026

Table, Table Caption, Column Group, Column, Table Body, Table Row, Table Header Cell, Table Data Cell,
Table Footer

Heading

<h1>The Ultimate Developer Cheatsheet</h1>

Paragraph

<p>Master HTML tags sequentially with optimized semantic layouts for high performance.</p>

Bold

<p>Always use semantic markup to make your code <b>stand out</b> globally.</p>

All Headings

<h1>Main Page Title</h1>
<h2>Major Section Heading</h2>
<h3>Sub-Section Heading</h3>
<h4>Detailed Topic Title</h4>
<h5>Minor Category Title</h5>
<h6>Deepest Nested Label</h6>

Emphasis

<p>You <em>must</em> validate all form inputs before execution.</p>

Subheading

<h2>Advanced Core Component Setup</h2>

Horizontal Rule

<p>End of module contents.</p>
<hr />
<p>Beginning of subsequent topic.</p>

Line Break

<p>Build Office 404,<br />Tech Zone Avenue, Pakistan.</p>

Italic

<p>The term <i>Vanilla JS</i> refers to pure native JavaScript layout scripts.</p>

Underline

<p>Review the configuration path marked <u>incorrect</u> below.</p>

Highlight

<p>Search match found for: <mark>semantic element mapping</mark></p>

Small Text

<p>Product Price: $99 <small>(Excluding local state taxes)</small></p>

Superscript

<p>The calculation formula is set as x<sup>2</sup> + y<sup>2</sup></p>

Subscript

<p>The molecule structural symbol for pure water is H<sub>2</sub>O.</p>

HTML Text Elements Complete Core Snippet

<!-- Headings Hierarchy -->
<h1>Main Article Title</h1>
<h2>Section Subheading</h2>

<!-- Paragraph with Inline Formatting -->
<p>
    Use <b>bold text</b> for visual weight, but prioritize <em>emphasis</em> or 
    <i>italics</i> for technical terms. Highlight query matches with <mark>keyword</mark>.
</p>

<!-- Layout Division and Text Adjustments -->
<hr />
<p>
    Formula: X<sup>2</sup> + Y<sub>1</sub> <br />
    Please check the <u>mispelled text</u> inside the file layout. <br />
    <small>Legal Notice: Values are subject to change.</small>
</p>

Beginner Tips

  1. Never skip heading levels (e.g., jumping from h1 straight to h3) as it breaks the accessibility document outline for search crawlers.
  2. Choose em over i when you want screen readers to actually verbally emphasize a word with voice modulation.
  3. Avoid using br tags to create vertical layout spacing between blocks; always handle layout margins via CSS instead.
  4. Use mark purely for dynamic keyword highlights, and use modern CSS background-gradients for decorative text styling.
  5. Apply small semantically for side-notes, disclaimers, or copyright text rather than using it just to visually shrink standard paragraphs.
  6. Do not use the u tag for general text styling because users mistake underlined words for clickable links; use it strictly to point out spelling spelling errors or proper nouns.
  7. Ensure sup and sub math distributions don't disrupt your global line-height metrics by stabilizing them with CSS vertical-align.
Download HTML CheatSheet