Headings

The six HTML heading levels are styled with progressive sizes and weights.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading group

The <hgroup> element allows associating a main heading with a subtitle or tagline.

<hgroup>
    <h2>Main heading</h2>
    <p>Subtitle or tagline below the heading.</p>
</hgroup>

The paragraph inside <hgroup> is displayed in a muted style (secondary color, reduced size).

Paragraphs

Paragraphs use the default µCSS style with harmonious vertical spacing.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.</p>

Blockquotes

The <blockquote> element displays a quote with a distinct visual style (side border, indentation). A <footer> with <cite> allows attributing the source.

<blockquote>
    "Design is not just what it looks like and feels like. Design is how it works."
    <footer><cite>Steve Jobs</cite></footer>
</blockquote>

Lists

Unordered list

<ul>
    <li>First item</li>
    <li>Second item
        <ul>
            <li>Nested item A</li>
            <li>Nested item B</li>
        </ul>
    </li>
    <li>Third item</li>
</ul>

Ordered list

<ol>
    <li>Step one</li>
    <li>Step two</li>
    <li>Step three</li>
</ol>

Definition list

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

Inline semantic text

µCSS automatically styles inline semantic elements:

<p><strong>Bold text</strong> and <em>italic text</em> and <u>underlined text</u>.</p>
<p><small>Small text</small> and <del>deleted text</del> and <ins>inserted text</ins>.</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> is an abbreviation.</p>
<p><mark>Highlighted text</mark> using the mark element.</p>
<p>Text with <sub>subscript</sub> and <sup>superscript</sup>.</p>

Code

Inline code

The <code> element displays code in a monospace font with a slightly colored background.

<p>Inline <code>code element</code> within text.</p>

Code block

The <pre><code> combination displays a preformatted code block with a distinct background and horizontal scrolling if needed.

<div class="container">
  <h1>Hello World</h1>
  <p>This is a code block.</p>
</div>

<pre><code>&lt;div class="container"&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
  &lt;p&gt;This is a code block.&lt;/p&gt;
&lt;/div&gt;</code></pre>

Keyboard

The <kbd> element represents a key or key combination with a physical key style.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>

Horizontal separator

The <hr> element displays a thin line separating two content blocks.

<p>Content above the separator.</p>
<hr>
<p>Content below the separator.</p>

Figure

The <figure> element wraps content (table, image, etc.) with a caption via <figcaption>.

<figure>
    <table>
        <thead><tr><th>Name</th><th>Value</th></tr></thead>
        <tbody><tr><td>Alpha</td><td>100</td></tr></tbody>
    </table>
    <figcaption>Figure 1 — A table inside a figure element.</figcaption>
</figure>

Accessibility

• Use heading levels in hierarchical order (h1 > h2 > h3...) for screen reader navigation.
• The title attribute on <abbr> provides the full form of the abbreviation to assistive technologies.
• <blockquote> with <cite> allows screen readers to identify the source of a quote.
• The <mark> element is announced as "highlight" by screen readers.