Semanticus CSS

Appearance

Typography ​

Semanticus stylizes headings with different font sizes, but you should not rely on heading elements alone for visual hierarchy.

The best practice is to start with an <h1>, then an <h2> and so forth, don't jump straight to an <h4> or <h5>.

In case you need, for example, an <h2> to have the size of an <h4>, you can apply the .fs-4 utility class to it. This maintains a proper semantic structure for accessibility and SEO, while achieving the desired visual appearance.

Note: In case you are using the no-utilities bundle, .fs-4 or any other utility class won't be available.

See Typography Utilities for more details.

Headings ​

live preview
editable html
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Paragraphs ​

live preview
editable html
<p>The paragraph element is the most basic block of text content.</p>
<p>Paragraph has a margin-bottom of var(--typography-spacing-vertical).</p>
<p>Use paragraphs to structure text content into readable blocks.</p>

Address ​

The <address> element provides contact information for the nearest <article> or the document body. Semanticus removes the default italic style and adds vertical spacing.

live preview
editable html
<address>
  <strong>Acme Corp</strong><br>
  123 Main Street<br>
  Springfield, IL 62701<br>
  <a href="mailto:hello@acme.example">hello@acme.example</a>
</address>

Blockquote ​

The <blockquote> element indicates that the enclosed text is an extended quotation. Semanticus styles it with a left border accent.

live preview
editable html
<blockquote>"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
<footer>
  <cite>- Phasellus eget lacinia</cite>
</footer></blockquote>

Code Block ​

Wrap <code> in <pre> for a multi-line code block that preserves whitespace.

live preview
editable html
<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));</code></pre>

Inline Elements ​

live preview
editable html
<div class="auto-grid">
  <p><a href="#">Regular Link</a></p>
  <p><a href="#" aria-current="page">Active link</a></p>
  <p><code>Code</code></p>
</div>
<div class="auto-grid">
  <p><strong>Bold</strong></p>
  <p><em>Italic</em></p>
  <p><u>Underline</u></p>
</div>
<div class="auto-grid">
  <p><del>Deleted</del></p>
  <p><ins>Inserted</ins></p>
  <p><s>Strikethrough</s></p>
</div>
<div class="auto-grid">
  <p><small>Small </small></p>
  <p>Text <sub>Sub</sub></p>
  <p>Text <sup>Sup</sup></p>
</div>
<div class="auto-grid">
  <p><kbd>Kbd</kbd></p>
  <p>
    <abbr aria-describedby="tip-abbr">Abbr.</abbr>
    <span id="tip-abbr" role="tooltip">Abbreviation</span>
  </p>
  <p><mark>Highlighted</mark></p>
</div>

<abbr> ​

The <abbr> element marks an abbreviation or acronym. When a title attribute is provided, Semanticus adds a dotted underline and a help cursor so users know they can hover for the full form.

live preview
editable html
<p>The <abbr title="HyperText Markup Language">HTML</abbr> standard defines the structure of web pages. Use <abbr title="Cascading Style Sheets">CSS</abbr> for styling and <abbr title="JavaScript">JS</abbr> for interactivity.</p>

<mark> ​

The <mark> element highlights text of contextual relevance — such as search result matches.

live preview
editable html
<p>Search results for <strong>"semantic HTML"</strong>: Use <mark>semantic HTML</mark> elements to convey meaning to both browsers and assistive technologies. <mark>Semantic HTML</mark> improves accessibility and SEO.</p>

<small> ​

The <small> element acts as helper text and is styled with a muted color and smaller font size.

Use aria-describedby to associate it with the input.

live preview
editable html
<input
  type="email"
  name="email"
  placeholder="Email"
  autocomplete="email"
  aria-label="Email"
  aria-describedby="email-helper"
/>
<small id="email-helper">We'll never share your email with anyone else.</small>

<strong> / <b> ​

Both <strong> and <b> render as bold text (font-weight: bolder).

Use <strong> for content of importance, seriousness, or urgency.

Use <b> for stylistic offset without semantic weight.

live preview
editable html
<p>This is <strong>critically important</strong> information.</p>

<p>The <b>bold element</b> is visually identical to strong but carries no semantic importance.</p>

<sub> / <sup> ​

The <sub> element renders subscript text — positioned below the baseline with a smaller font size.

The <sup> element renders superscript text — positioned above the baseline with a smaller font size.

Common uses include chemical formulas, mathematical exponents and footnote references.

live preview
editable html
<p>Water is H<sub>2</sub>O. Carbon dioxide is CO<sub>2</sub>.</p>

<p>Einstein's famous equation: E = mc<sup>2</sup>.</p>

<footer>
  <p>Semantic HTML is the foundation of accessible web development.<sup>1</sup> It improves SEO<sup>2</sup> and is recommended by W3C.<sup>3</sup></p>
</footer>

<del> / <ins> ​

The <del> element represents deleted text and the <ins> element represents inserted text — useful for showing editorial changes or price reductions.

live preview
editable html
<p>The original price was <del>$99.00</del> <ins>$49.00</ins>.</p>

<kbd> ​

Use <kbd> to represent keyboard shortcuts.

live preview
editable html
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, or <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>

<samp> ​

Use <samp> to represent sample output from a program.

live preview
editable html
<p>The program outputs: <samp>Hello, World!</samp></p>