Basics

Block elements

In HTML, block-level elements such as headers, paragraphs, and DIVs, occupy 100% of the width of their parent element. Their height depends on how much content they have inside.

Typography

Text sizes follow a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.

Headings

Note: The demo headings below are using h1 to h6 text utility classes, so they aren't included in any "On this page" lists we may add.

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

Base

<h2>h2 heading</h2>
<h1>h1 heading</h1>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

Paragraphs

A simple paragraph:

Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

<p>Lorem ipsum dolor sit amet...</p>

Lists

Ordered lists (numbered)

List item
List item
1. List item
2. List item
  1. List item
List item

<ol>
  <li>List item</li>
  <li>List item
    <ol>
      <li>List item</li>
      <li>List item
        <ol>
          <li>List item</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>List item</li>
</ol>

Unordered lists (bullet pointed)

List item
List item
- List item
- List item
  - List item
List item

<ul>
  <li>List item</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item
        <ul>
          <li>List item</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>List item</li>
</ul>

Definition lists

Title 1: Data 1 Lorem ipsum dolor sit amet
Title 2: Data 2 Lorem ipsum dolor sit amet
Title 3: Data 3 Lorem ipsum dolor sit amet

<dl>
  <dt>Title 1</dt>
  <dd>Data 1 Lorem ipsum dolor sit amet</dd>
  <dt>Title 2</dt>
  <dd>Data 2 Lorem ipsum dolor sit amet</dd>
  <dt>Title 3</dt>
  <dd>Data 3 Lorem ipsum dolor sit amet</dd>
</dl>

Collapsible details

HTML5 has a simple show/hide component, with functionality provided by the browser (no JavaScript required).

Clicking the (bold) <summary> will trigger the functionality of the HTML details element. When the main content of the <details> element is “open” (revealed), the indicator triangle (automatically supplied by the browser) is rotated to point downwards.

Summary/title

Here are the details – an extended discussion of what is summarised in the associated <summary> above. Hidden by default, this content becomes visible when the visitor clicks or taps the summary.

<details>
  <summary>Summary/title</summary>
  Here are the details – an extended discussion of what is summarised in the associated <code>&lt;summary&gt;</code> above. Hidden by default, this content becomes visible when the visitor clicks or taps the summary.
</details>

The HTML5 <details> is an interactive element, so it will recieve focus (and a focus ring) when keyboard tabbed onto, and it will open and close in response to enter or space.

Starting `details` in the open state

Add the open attribute to the (opening) <details> tag if you want <details> to start in the “open” state:

Summary/title

Here are the details (starting in the open state) ...

<details open>
  <summary>Summary/title</summary>
  Here are the details (starting in the open state) ...
</details>

Horizontal rules

The basic horizontal rule <hr> tag is simply styled with a thin top border, so it is consistent with border utilities and the table component cell borders.

Example:

<hr>

With can add separator text (often AND, OR, etc.) by using a <data-content> attribute:

<hr class="hr-text" data-content="Or">

We can also 'fade out' the separator line:

<hr class="hr-text-fade" data-content="And">

Block quotes

Blockquotes are indented slightly using inline padding. This is set using CSS clamp(), so that it is narrower on narrower viewports.

According to the HTML Living Standard, attribution for the quotation must be placed outside the blockquote element.

This is some blockquote example text

Citation source

<blockquote>
  Lorem ipsum dolor sit amet...
</blockquote>

Tables

A basic table:

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3

<table>
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table content 1.1</td>
      <td>Table content 2.1</td>
      <td>Table content 3.1</td>
    </tr>
    <tr>
      <td>Table content 1.2</td>
      <td>Table content 2.2</td>
      <td>Table content 3.2</td>
    </tr>
    <tr>
      <td>Table content 1.3</td>
      <td>Table content 2.3</td>
      <td>Table content 3.3</td>
    </tr>
  </tbody>
</table>

For specific table styling, see the table component.

Pre-formatted text

Use <pre> tags around any text that you want to remain in the same position in the webpage (as viewed in the browser) as you have put it in the source code. <pre> tags ensures multiple spaces will not be collapsed into one, and long lines will not be wrapped.

Here is some preformatted text
with some             extra                       spaces
    and line
breaks.

The browser default <pre> is assigned a monospace typeface.

If we need a block of preformatted monospace, combine with the inline <code> tag too. <code> renders as a block (with no wrapping, and x-axis overflow, same as <pre>), if it is the immediate child of a <pre> tag. Example:

10 print "Hello world";
20 goto 10.
Run

In the HTML source code, the example above above looks like this:

<pre><code>10 print "Hello world";
20 goto 10.
Run</code></pre>

DIVs and other HTML5 semantic block emements

All other block elements such as <div>,<section>, <article>, and <aside> have no style applied to them. They are still just blocks.