Basic Text Formatting

Use for standard text display and semantic meaning.

Heading 1

Use for major section titles.

Heading 1

<h1>Heading 1</h1>

Heading 2

Use for subsection titles.

Heading 2

<h2>Heading 2</h2>

Heading 3

Use for sub-subsection titles.

Heading 3

<h3>Heading 3</h3>

Heading 4

Use for sub-sub-subsection titles.

Heading 4

<h4>Heading 4</h4>

Heading 5

Use for sub-sub-sub-subsection titles.

Heading 5

<h5>Heading 5</h5>

Heading 6

Use for the lowest level of section titles.

Heading 6

<h6>Heading 6</h6>

Paragraph

This is a paragraph of text.

<p>This is a paragraph of text.</p>

Strong importance.

This text is important.

<p><strong>This text is important.</strong></p>

Emphasis

This text is emphasized.

<p><em>This text is emphasized.</em></p>

Small text

This is some small text.

<p><small>This is some small text.</small></p>

Marked text

This text is marked.

<p><mark>This text is marked.</mark></p>

Citation

This is a citation.

<p><cite>This is a citation.</cite></p>

Code snippet

This is a code snippet.

<p><code>This is a code snippet.</code></p>

Keyboard input

Ctrl + S

<p><kbd>Ctrl + S</kbd></p>

Sample output

Example output.

<p><samp>Example output.</samp></p>

Variable

x = 5

<p><var>x</var> = 5</p>

Abbreviation

WHO

HTML

<p><abbr title="World Health Organization">WHO</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>
    

Lists

Use for presenting ordered or unordered collections of items.

Unordered List

Use for lists where order doesn't matter.

• Unordered list item 1
• Unordered list item 2
  • Nested unordered item A
  • Nested unordered item B
• Unordered list item 3
• Unordered list item 4

<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2
    <ul>
      <li>Nested unordered item A</li>
      <li>Nested unordered item B</li>
    </ul>
  </li>
  <li>Unordered list item 3</li>
  <li>Unordered list item 4</li>
</ul>
    

Ordered List

Use for lists where order is important.

1. Ordered list item 1
2. Ordered list item 2
   1. Nested ordered item A
   2. Nested ordered item B
      1. Deeply nested item i
      2. Deeply nested item ii
3. Ordered list item 3
4. Ordered list item 4

<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2
    <ol>
      <li>Nested ordered item A</li>
      <li>Nested ordered item B
        <ol>
          <li>Deeply nested item i</li>
          <li>Deeply nested item ii</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Ordered list item 3</li>
  <li>Ordered list item 4</li>
</ol>
    

Definition List

Use for defining terms and their meanings.

Definition List Term 1

Definition of term 1

Definition List Term 2

Definition of term 2

Definition List Term 3

Definition of term 3

Definition List Term 4

Definition of term 4 with a nested list:

• Related concept A
• Related concept B

<dl>
  <dt>Definition List Term 1</dt>
  <dd>Definition of term 1</dd>
  <dt>Definition List Term 2</dt>
  <dd>Definition of term 2</dd>
  <dt>Definition List Term 3</dt>
  <dd>Definition of term 3</dd>
  <dt>Definition List Term 4</dt>
  <dd>
    Definition of term 4 with a nested list:
    <ul>
      <li>Related concept A</li>
      <li>Related concept B</li>
    </ul>
  </dd>
</dl>
    

Links & Images

Use for navigation and displaying visual content.

Link

Use to navigate to other web pages or resources.

<a href="https://www.example.com">Link</a>

Image

Use to display images on a web page.

<img src="image.jpg" alt="Description">

Tables

Use for displaying tabular data.

Table

Use to organize data in rows and columns.

<table>
  <thead>
    <tr>
      <th rowspan="2">Header 1</th>
      <th colspan="2">Header Group 2</th>
      <th>Header 4</th>
    </tr>
    <tr>
      <th>Header 2a</th>
      <th>Header 2b</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Row 1, Cell 1</td>
      <td>Row 1, Cell 2a</td>
      <td>Row 1, Cell 2b</td>
      <td>Row 1, Cell 4</td>
    </tr>
    <tr>
      <td colspan="2">Row 2, Cell 2a & 2b (colspan)</td>
      <td>Row 2, Cell 4</td>
    </tr>
    <tr>
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2a</td>
      <td>Row 3, Cell 2b</td>
      <td rowspan="2">Row 3-4, Cell 4 (rowspan)</td>
    </tr>
    <tr>
      <td>Row 4, Cell 1</td>
      <td colspan="2">Row 4, Cell 2a & 2b (colspan)</td>
    </tr>
    <tr>
      <td>Row 5, Cell 1</td>
      <td>Row 5, Cell 2a</td>
      <td>Row 5, Cell 2b</td>
      <td>Row 5, Cell 4</td>
    </tr>
  </tbody>
</table>
    

Form

Use to create interactive forms for users to submit data.

<form action="#" method="post">
  <fieldset>
    <legend>Basic Info</legend>
    <label for="text">Text:</label>
    <input type="text" id="text" name="text"><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    <label for="search">Search:</label>
    <input type="search" id="search" name="search"><br>
    <label for="tel">Telephone:</label>
    <input type="tel" id="tel" name="tel"><br>
    <label for="url">URL:</label>
    <input type="url" id="url" name="url"><br>
  </fieldset>
  <fieldset>
    <legend>Numbers & Dates</legend>
    <label for="number">Number:</label>
    <input type="number" id="number" name="number" min="0" max="100"><br>
    <label for="range">Range:</label>
    <input type="range" id="range" name="range" min="0" max="100"><br>
    <label for="date">Date:</label>
    <input type="date" id="date" name="date"><br>
    <label for="month">Month:</label>
    <input type="month" id="month" name="month"><br>
    <label for="week">Week:</label>
    <input type="week" id="week" name="week"><br>
    <label for="time">Time:</label>
    <input type="time" id="time" name="time"><br>
    <label for="datetime-local">Datetime-local:</label>
    <input type="datetime-local" id="datetime-local" name="datetime-local"><br>
    <label for="color">Color:</label>
    <input type="color" id="color" name="color"><br>
  </fieldset>
  <fieldset>
    <legend>Options</legend>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" id="checkbox" name="checkbox"><br>
    <label for="radio1">Radio 1:</label>
    <input type="radio" id="radio1" name="radio" value="1">
    <label for="radio2">Radio 2:</label>
    <input type="radio" id="radio2" name="radio" value="2"><br>
    <label for="file">File:</label>
    <input type="file" id="file" name="file"><br>
    <label for="hidden">Hidden:</label>
    <input type="hidden" id="hidden" name="hidden" value="hiddenValue"><br>
    <label for="textarea">Textarea:</label>
    <textarea id="textarea" name="textarea"></textarea><br>
    <label for="select">Select:</label>
    <select id="select" name="select">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Actions</legend>
    <label for="submit">Submit:</label>
    <input type="submit" value="Submit">
    <label for="reset">Reset:</label>
    <input type="reset" value="Reset">
    <label for="button">Button:</label>
    <input type="button" value="Click Me">
  </fieldset>
</form>
    

Semantic Elements

Use for defining the meaning of content.

Address

Use to provide contact information for the author/owner of a document or article.

<address>123 Main St, Springfield, USA</address>

Main

Use to indicate the dominant content of the document.

<main>...</main>

Nav

Use for navigation links.

<nav>...</nav>

Aside

Use for content tangentially related to the main content.

<aside>...</aside>

Header

Use for introductory content or navigational links.

<header>...</header>

Footer

Use for footer content at the bottom of the page.

<footer>...</footer>

Section

Use to define sections in a document.

<section>...</section>

Article

Use to represent a self-contained composition in a document, page, application, or site.

<article>
  <b>Article Example</b>
  <p>This is an example article.</p>
</article>
    

Figure

Use to encapsulate self-contained content, often with a caption.

<figure>
  <img src="https://via.placeholder.com/150" alt="Figure">
  <figcaption>Figure caption.</figcaption>
</figure>
    

Other Elements

Various other elements for specific uses.

Details & Summary

Use for expandable/collapsible content.

<details><summary>More info</summary>...</details>

Dialog

Use for dialog boxes or modals.

<dialog open>...</dialog>

Progress

Use to show progress of a task.

<progress value="70" max="100">70%</progress>

Meter

Use to show a scalar measurement within a known range.

<meter value="0.6">60%</meter>

Output

Use to display the result of a calculation.

<output>42</output>

BDI & BDO

Use for text directionality.

<bdi>User123</bdi>

<bdo dir="rtl">This text is right-to-left.</bdo>

Ruby, RT, RP

Use for East Asian annotations.

<ruby>漢 <rt>Kan</rt> 字 <rt>ji</rt> <rp>(</rp><rt>Kan</rt><rp>)</rp></ruby>

Preformatted Text

Use to display text exactly as it is written in the source code.

  // Sample code
  function hello() {
    console.log("Hello, world!");
  }

  

<pre>
  // Sample code
  function hello() {
    console.log("Hello, world!");
  }
</pre>
    

Div

Use to group content into a block-level element.

<div>
  <p>Div container.</p>
</div>
    

Span

Use to group inline elements and apply styles.

<span>Span element.</span>

Line Break

Use to insert a single line break.

<br>

Horizontal Rule

Use to create a horizontal line.

<hr/>

Time

Use to represent a specific date and/or time.

<time datetime="2023-10-27">October 27, 2023</time>