Text Elements

<h1>Top Level</h1>
<h2>Sub Level</h2>
...
<h6>Deepest Level</h6>

<h1>Annual Report</h1>
<h2>Financial Summary</h2>
<h3>Revenue by Region</h3>

Note Use only one h1 per page for best SEO. Never skip heading levels (e.g., jumping from h1 to h4). Headings create a document outline used by assistive technology.

<p>Text content here.</p>

<p>Our platform processes over two million transactions daily.</p>
<p>Each transaction is encrypted end-to-end for security.</p>

Note Browsers add default top and bottom margins to paragraphs. Reset or adjust with CSS if needed.

<span class="name">inline content</span>

<p>Status: <span class="status-active">Active</span></p>

Note A span has no semantic meaning. Use it purely for styling a portion of text when no better semantic element exists.

<strong>important</strong>
<em>emphasized</em>

<p><strong>Warning:</strong> This action <em>cannot</em> be undone.</p>

Note strong conveys urgency or importance (renders bold). em conveys stress emphasis (renders italic). Prefer these over <b> and <i> for meaningful emphasis, since screen readers alter vocal tone for strong/em.

<blockquote cite="url">
  <p>Quoted text.</p>
</blockquote>

<blockquote cite="https://example.com/speech">
  <p>The only limit to our realization of tomorrow is our doubts of today.</p>
</blockquote>

Note The cite attribute provides the source URL but is not displayed by browsers. Add visible attribution separately if needed.

<pre><code>code here</code></pre>

<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>

<p>Use <code>Array.map()</code> to transform items.</p>

Note pre preserves all whitespace and line breaks exactly as written. Wrap code inside pre for multi-line blocks. Use code alone for inline code snippets.

<br>
<hr>

<p>123 Main Street<br>Suite 400<br>Springfield, IL 62704</p>
<hr>
<p>New section begins here.</p>

Note br is for meaningful line breaks like addresses or poetry, not for spacing. Use CSS margins or padding for spacing. hr represents a thematic shift between content blocks.

<small>fine print</small>
<mark>highlighted</mark>
<del>removed</del>
<ins>added</ins>

<p>Price: <del>$49.99</del> <ins>$29.99</ins></p>
<p>Search results for <mark>flexbox</mark></p>
<small>Terms and conditions apply.</small>

Note del and ins are ideal for showing edits or price changes. mark highlights search matches or key phrases. small is for side comments and legal text.