Text-Level HTML Elements – PokeDB Docs | The Ultimate Pokémon Database

Text-Level Semantic HTML Elements

In HTML, elements like <br>, <b>, <i>, <em>, and <strong> are called text-level semantic or inline (phrasing) elements.

These elements provide meaning and structure within blocks of text, and they flow inline with surrounding content. They are part of what HTML5 defines as phrasing content.

Categories and Examples

Category	Tag	Input	Output
Emphasis	`<em>`	`<em>emphasized</em>`	emphasized
Emphasis	`<strong>`	`<strong>strong</strong>`	strong
Styling	`<b>`	`<b>bold</b>`	bold
Styling	`<i>`	`<i>italic</i>`	italic
Styling	`<u>`	`<u>underlined</u>`	underlined
Styling	`<small>`	`<small>small text</small>`	small text
Styling	`<mark>`	`<mark>highlight</mark>`	highlight
Punctuation & Metadata	`<q>`	`<q>quoted text</q>`	quoted text
Punctuation & Metadata	`<abbr>`	`<abbr title="Cascading Style Sheets">CSS</abbr>`	CSS
Punctuation & Metadata	`<cite>`	`<cite>HTML Living Standard</cite>`	HTML Living Standard
Punctuation & Metadata	`<dfn>`	`<dfn id="html">HTML</dfn>`	HTML
Punctuation & Metadata	`<time>`	`<time datetime="2025-06-14">June 14, 2025</time>`	June 14, 2025
Typography	`<sub>`	`H<sub>2</sub>O`	H₂O
Typography	`<sup>`	`x<sup>2</sup>`	x²
Typography	`<code>`	`<code>console.log('hello')</code>`	`console.log('hello')`
Typography	`<var>`	`<var>x</var> + 2 = 5`	`x` + 2 = 5
Typography	`<kbd>`	`Press <kbd>Ctrl</kbd> + <kbd>C</kbd>`	Press `Ctrl` + `C`
Structure	`<a>`	`<a href="https://example.com">Visit site</a>`	Visit site
Structure	`<span>`	`<span style="color: red;">red text</span>`	red text
Structure	`<br>`	`First line<br>Second line`	First line Second line
Structure	`<ins>`	`<ins>inserted</ins>`	inserted
Structure	`<del>`	`<del>deleted</del>`	~~deleted~~

Use these elements whenever you need to semantically mark up or style parts of a text without breaking the flow into block-level elements.

You may also use these elements to create custom layouts or hierarchies.

Categories and Examples

Category Tag Input Output

Structure

<div>

<div>Block 1</div><div>Block 2</div>

Block 1

Block 2

Structure

<table>
<tbody>
<tr>
<td>

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

Column 1	Column 2
Row 1 Cell 1	Row 1 Cell 2

Reference

For a complete overview of all HTML elements, see the MDN Web Docs