Heading Elements

Use headings where semantically appropriate to act as a title for the content that immediately follows it. Choose a heading level of the appropriate rank in the document outline, not for its font size. You can always adjust the size and style of headings with CSS.

MDN

This is a Heading of Words

<h1>This is a Heading of Words</h1>
<h2>This is a Heading of Words</h2>
<h3>This is a Heading of Words</h3>
<h4>This is a Heading of Words</h4>
<h5>This is a Heading of Words</h5>
<h6>This is a Heading of Words</h6>

Paragraphs

These are some paragraphs with a heading.

We’re building a better Internet

Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.

At Mozilla, we’re a global community of technologists, thinkers and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.

List Elements

We most frequently use lists for semantic structure and don’t actually want to display them as lists. It’s simpler to reset lists globally and only display them as lists in text when needed with the .prose class.

List item
List item
1. Nested list

List item
List item
- Nested list

<ol class="prose">
  <li>List item</li>
  <li>List item
    <ol class="prose">
      <li>Nested list</li>
    </ol>
  </li>
</ol>

<ul class="prose">
  <li>List item</li>
  <li>List item
    <ul class="prose">
      <li>Nested list</li>
    </ul>
  </li>
</ul>

Data tables

Tables have no base styling (apart from the browser defaults). Use the .data-table class to display tabular data with a bit more polish.

MDN

Table caption
	Column	Column	Column
Row	Cell	Cell	Cell
Row	Cell	Cell	Cell

<table class="data-table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Column</th>
      <th scope="col">Column</th>
      <th scope="col">Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">Row</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Text

This is a Heading of Words