Text Formatting

<p> – Paragraph

<p>This is a paragraph with regular body text. Paragraphs are the basic building blocks of text.</p>

<strong> – Strong emphasis

<strong>Strongly emphasized text</strong>

<em> – Emphasis

<em>Emphasized text</em>

<mark> – Marked text

<mark>Marked text</mark>

<del> – Deleted text

<del>Deleted text</del>

<ins> – Inserted text

<ins>Inserted text</ins>

<sup> – Superscript

Superscript<sup>2</sup>

<sub> – Subscript

Subscript H<sub>2</sub>O

<code> – Code example

<code>Code example</code>

<kbd> – Keyboard input

Press <kbd>Ctrl</kbd> + <kbd>C</kbd>

<abbr> – Abbreviation

<abbr title="HyperText Markup Language">HTML</abbr>

<cite> – Work title

<cite>The Great Gatsby</cite>

<q> – Inline quote

<q>A short quote</q>

<dfn> – Definition

<dfn>Definition</dfn>

<time> – Date and time

<time datetime="2024-12-10">December 10, 2024</time>

<blockquote> – Block quote

<blockquote cite="https://example.com">
  <p>A longer quote presented as a standalone block.</p>
</blockquote>

<pre> – Preformatted text

Preformatted text
  with   spaces
    and line breaks

<pre>
Preformatted text
  with   spaces
    and line breaks
</pre>

<hr> – Horizontal rule

<hr>

<address> – Contact information

<address>
  Contact us:<br>
  Email: <a href="mailto:info@example.com">info@example.com</a><br>
  Phone: 012345-67890
</address>

Headings

<h1> – Heading level 1

<h1>Main heading level 1</h1>

<h2> – Heading level 2

<h2>Heading level 2</h2>

<h3> – Heading level 3

<h3>Heading level 3</h3>

<h4> – Heading level 4

<h4>Heading level 4</h4>

<h5> – Heading level 5

<h5>Heading level 5</h5>

<h6> – Heading level 6

<h6>Heading level 6</h6>

Lists

<ul> and <li> – Unordered list

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<ol> and <li> – Ordered list

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<dl>, <dt> and <dd> – Description list

<dl>
  <dt>Term</dt>
  <dd>Definition of the term</dd>
  <dt>Another term</dt>
  <dd>Another definition</dd>
</dl>

Links & Navigation

<a> – Link

<a href="https://example.com">A link</a>

<nav> – Navigation

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Media

<img> – Image

<img src="demo.jpg" alt="Example image" width="300" height="200">

<figure> and <figcaption> – Figure with caption

<figure>
  <img src="demo.jpg" alt="Landscape photo">
  <figcaption>A beautiful autumn landscape</figcaption>
</figure>

<picture> and <source> – Responsive image

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="Responsive image">
</picture>

<audio> and <source> – Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>

<video>, <source> and <track> – Video

<video controls width="320" height="240">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
  Your browser does not support video.
</video>

Tables

<table> – Table

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

<colgroup> and <col> – Column formatting

<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col span="2" style="background-color: #e0e0e0;">
  </colgroup>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

Forms

<form> – Form

<form action="/submit" method="post">
  Form
</form>

<label> – Label

<label for="email">Email address:</label>
<input type="email" id="email" name="email">

<input> – Input field

<input type="text" name="username" placeholder="Username">

<textarea> – Multi-line text field

<textarea name="message" rows="4" cols="50" placeholder="Your message"></textarea>

<button> – Button

<button type="button">Click me</button>

<input type=”checkbox”> – Checkbox

<label>
  <input type="checkbox" name="newsletter" value="yes">
  Subscribe to newsletter
</label>

<input type=”radio”> – Radio button

<label>
  <input type="radio" name="title" value="ms">
  Ms
</label>
<label>
  <input type="radio" name="title" value="mr">
  Mr
</label>
<label>
  <input type="radio" name="title" value="other">
  Other
</label>

<select> and <option> – Select menu

<select name="country">
  <option value="de">Germany</option>
  <option value="at">Austria</option>
  <option value="ch">Switzerland</option>
</select>

<optgroup> – Option group

<select name="vehicle">
  <optgroup label="Cars">
    <option value="vw">Volkswagen</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Trucks">
    <option value="man">MAN</option>
    <option value="mercedes">Mercedes</option>
  </optgroup>
</select>

<fieldset> and <legend> – Form group

<fieldset>
  <legend>Personal information</legend>
  <label>First name: <input type="text" name="firstname"></label><br>
  <label>Last name: <input type="text" name="lastname"></label>
</fieldset>

<datalist> – Autocomplete

<input list="browser" name="browser" placeholder="Choose a browser">
<datalist id="browser">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

<progress> – Progress bar

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

Interactive Elements

<details> and <summary> – Expandable content

<details>
  <summary>Show more information</summary>
  <p>Here are the additional details that are initially hidden.</p>
</details>

<dialog> – Dialog window

<dialog open>
  <p>This is a dialog window.</p>
  <button>Close</button>
</dialog>