Page Zero

This page is designed to put your stylesheets through the wringer. HTML5 comes with a number of elements you may never have heard of before. Expect your fellow developers to know them and be able to use any and all of them, without experiencing unexpected misbehavior.

This page is designed to put your stylesheets through the wringer. HTML5 comes with a number of elements you may never have heard of before. Expect your fellow developers to be able to use any and all of them, without experiencing unexpected misbehavior.

The above is also an example of a <p class="lead">, a common device used underneath a page title heading to stand out from regular paragraphs. Typically, lead paragraphs are centered, have a larger font size, and may also have a larger line-height and/or larger vertical margins.

Many frameworks come with styles for <p class="lead">, but you may have to provide them yourself. 

<style>
    .lead {
        text-align: center;
        font-size: 125%;
        line-height: 1.5;
        margin-bottom: 2rem;
    }
</style>
<p class="lead">
    This page is designed to put your stylesheets
    through the wringer. HTML5 comes with a number of
    elements you may never have heard of before. Expect
    your fellow developers to be able to use any and all
    of them, without experiencing unexpected
    misbehavior.
</p>
<p>
    The above is also an example of a &lt;p class=&quot;lead&quot;&gt;,
    a common device used underneath a page title heading
    to stand out from regular paragraphs. Typically,
    lead paragraphs are centered, have a larger font
    size, and may also have a larger <code>line-height</code>
    and/or larger vertical margins.
</p>
<p>
    Many frameworks come with styles for &lt;p class=&quot;lead&quot;&gt;,
    but you may have to provide them yourself.
</p>

Block Elements

Paragraphs — <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis, nunc a maximus eleifend, lacus mi molestie arcu, vitae pellentesque nibh odio vel nibh. Nulla sit amet ex ac est gravida aliquam ac non nisi.

Mauris facilisis, nibh non accumsan congue, massa eros egestas ante, non ultricies nibh risus vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Recommendation: Place images inside a <p> so that they receive the same top and bottom margins. 

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Vestibulum mattis, nunc a maximus eleifend,
    lacus mi molestie arcu, vitae pellentesque nibh odio
    vel nibh. Nulla sit amet ex ac est gravida aliquam
    ac non nisi.
</p>
<p>
    Mauris facilisis, nibh non accumsan congue, massa
    eros egestas ante, non ultricies nibh risus vel
    sem. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit.
</p>
<p>
    <strong>Recommendation:</strong>
    Place images inside a &lt;p&gt; so that they receive
    the same top and bottom margins.
</p>

Headings — <h1> through <h6>

Headings are one of many tools to provide semantic structure to your documents. Yes, search engines and screen readers use them.

Make sure styles for <h1> through <h6> and <p> are all different from one another.

Level One Heading

Level Two Heading

Level Three Heading

Level Four Heading

Level Five Heading
Level Six Heading

Normal Body Text 

<h1>
    Level One Heading
</h1>
<h2>
    Level Two Heading
</h2>
<h3>
    Level Three Heading
</h3>
<h4>
    Level Four Heading
</h4>
<h5>
    Level Five Heading
</h5>
<h6>
    Level Six Heading
</h6>
<p>
    Normal Body Text
</p>

Typescale — .h1 through .h6

Make sure you have styles for these classes. There will be times you need to have a paragraph with the styles of a heading but you cannot use that heading element, or a heading with the styles of a different level heading.

Many frameworks come with styles for .h1 through .h6, but you may have to provide them yourself.

Level One Heading Styles

Level Two Heading Styles

Level Three Heading Styles

Level Four Heading Styles

Level Five Heading Styles

Level Six Heading Styles 

<p class="h1">
    Level One Heading <em>Styles</em>
</p>
<p class="h2">
    Level Two Heading <em>Styles</em>
</p>
<p class="h3">
    Level Three Heading <em>Styles</em>
</p>
<h1 class="h4">
    Level Four Heading <em>Styles</em>
</h1>
<h2 class="h5">
    Level Five Heading <em>Styles</em>
</h2>
<h3 class="h6">
    Level Six Heading <em>Styles</em>
</h3>

Usage Examples

Document Structure

Hominoidea (hominoids, apes)

Hylobatidae (gibbons)

Hominidae (hominids, great apes)

Ponginae

Pongo (orangutans)

Pongo abelii
Pongo tapanuliensis
Pongo pygmaeus

Homininae (hominines)

Gorillini

Gorilla (gorillas)
Gorilla gorilla
Gorilla beringei

Hominini (hominins)

Panina
Pan (chimpanzees)

Pan troglodytes

Pan paniscus

Hominina (homininans)
Homo sapiens (humans)
<h1>Hominoidea (hominoids, apes)</h1>
<h2>Hylobatidae (gibbons)</h2>
<h2>Hominidae (hominids, great apes)</h2>
<h3>Ponginae</h3>
<h4>Pongo (orangutans)</h4>
<h5><i>Pongo abelii</i></h5>
<h5><i>Pongo tapanuliensis</i></h5>
<h5><i>Pongo pygmaeus</i></h5>
<h3>Homininae (hominines)</h3>
<h4>Gorillini</h4>
<h5>Gorilla (gorillas)</h5>
<h6><i>Gorilla gorilla</i></h6>
<h6><i>Gorilla beringei</i></h6>
<h4>Hominini (hominins)</h4>
<h5>Panina</h5>
<h6>Pan (chimpanzees)</h6>
<p><i>Pan troglodytes</i></p>
<p><i>Pan paniscus</i></p>
<h5>Hominina (homininans)</h5>
<h6><i>Homo sapiens</i> (humans)</h6>

Interaction with Paragraphs

Level One Heading

Level Two Heading

Level Three Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at velit consequat, pretium quam eget, malesuada urna. Etiam blandit at ligula quis rutrum. Donec viverra, elit at volutpat ultricies, urna erat consequat eros, a pulvinar dui quam ut est.

Level Three Heading

Suspendisse potenti. Fusce dolor mauris, gravida vel tortor eget, porta interdum massa. Nunc consectetur justo orci. Suspendisse feugiat porta sem vel tristique. Suspendisse ornare metus vel tellus maximus accumsan.

Level Two Heading

Ut id volutpat mauris. In eget ultricies nibh. Proin diam est, mollis at placerat id, pretium at mi. Donec rhoncus, turpis in hendrerit porttitor, neque sapien rhoncus mauris, eu laoreet justo massa vel metus. 

<h1>Level One Heading</h1>
<h2>Level Two Heading</h2>
<h3>Level Three Heading</h3>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Nulla at velit consequat, pretium quam eget,
    malesuada urna. Etiam blandit at ligula quis
    rutrum. Donec viverra, elit at volutpat ultricies,
    urna erat consequat eros, a pulvinar dui quam ut
    est.
</p>
<h3>Level Three Heading</h3>
<p>
    Suspendisse potenti. Fusce dolor mauris, gravida vel
    tortor eget, porta interdum massa. Nunc consectetur
    justo orci. Suspendisse feugiat porta sem vel
    tristique. Suspendisse ornare metus vel tellus
    maximus accumsan.
</p>
<h2>Level Two Heading</h2>
<p>
    Ut id volutpat mauris. In eget ultricies nibh. Proin
    diam est, mollis at placerat id, pretium at
    mi. Donec rhoncus, turpis in hendrerit porttitor,
    neque sapien rhoncus mauris, eu laoreet justo massa
    vel metus.
</p>

Lists

Unordered Lists — <ul>, <li>

  • List item text
  • List item text
    • Nested list item text
    • Nested list item text
  • List item text
  • List item text 
<ul>
    <li>
        List item text
    </li>
    <li>
        List item text
        <ul>
            <li>
                Nested list item text
            </li>
            <li>
                Nested list item text
            </li>
        </ul>
    </li>
    <li>
        List item text
    </li>
    <li>
        List item text
    </li>
</ul>

Ordered Lists — <ol>, <li>

  1. List item text with numbers
  2. List item text
    1. Nested list item text with lowercase letters
    2. Nested list item text
  3. List item text
    1. Nested list item text with lowercase Roman numerals
    2. Nested list item text
  4. List item text 
<ol>
    <li>
        List item text with numbers
    </li>
    <li>
        List item text
        <ol type="a">
            <li>
                Nested list item text with lowercase letters
            </li>
            <li>
                Nested list item text
            </li>
        </ol>
    </li>
    <li>
        List item text
        <ol type="i">
            <li>
                Nested list item text with lowercase Roman numerals
            </li>
            <li>
                Nested list item text
            </li>
        </ol>
    </li>
    <li>
        List item text
    </li>
</ol>

Mixed List Nesting

  • List item text
  • List item text
    1. Nested list item text
    2. Nested list item text
  • List item text
  • List item text 
<ul>
    <li>
        List item text
    </li>
    <li>
        List item text
        <ol>
            <li>
                Nested list item text
            </li>
            <li>
                Nested list item text
            </li>
        </ol>
    </li>
    <li>
        List item text
    </li>
    <li>
        List item text
    </li>
</ul>

Definition Lists — <dl>, <dt>, <dd>

You may also know these as description lists. Note that a single <dt> may have multiple <dd> definitions.

Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.
The dimensions of height, depth, and width within which all things exist and move. 
<dl>
    <dt>
        Time
    </dt>
    <dd>
        The indefinite continued progress of existence
        and events in the past, present, and future
        regarded as a whole.
    </dd>
    <dt>
        Space
    </dt>
    <dd>
        A continuous area or expanse that is free,
        available, or unoccupied.
    </dd>
    <dd>
        The dimensions of height, depth, and width within
        which all things exist and move.
    </dd>
</dl>

Blockquotes — <blockquote>, <cite>

Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov 
<blockquote>
    Those people who think they know everything are a
    great annoyance to those of us who do.
    <cite>Isaac Asimov</cite>
</blockquote>

Disclosure Elements — <details>, <summary>

Details Something small enough to escape casual notice.
I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I? A keyboard. 
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
<details>
    <summary>
        I have keys but no doors. I have space but no
        room. You can enter but can’t leave. What am I?
    </summary>
    A keyboard.
</details>

Horizontal Rule, for Thematic Breaks — <hr>

Recommendation: Be sure you give horizontal rules the same top and bottom margins as p, h1 through h6, ul, ol, dl, etc., then add roughly 1/2 em.

This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.

This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text. 

<p>
    This is the first paragraph of text.
    This is the first paragraph of text.
    This is the first paragraph of text.
    This is the first paragraph of text.
</p>
<hr>
<p>
    This is the second paragraph of text.
    This is the second paragraph of text.
    This is the second paragraph of text.
    This is the second paragraph of text.
</p>

Preformatted Text — <pre>

  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
               
<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
               </pre>

Contact Address — <address>

Contact the author of this page:

jim@example.com
(311) 555-2368 
<p>Contact the author of this page:</p>
<address>
    <a href="mailto:jim@example.com">jim@example.com</a><br>
    <a href="tel:+13115552368">(311) 555-2368</a>
</address>

Inline Elements

Links — <a>

You can reach Michael at:

<p>You can reach Michael at:</p>
<ul>
    <li><a href="https://example.com/">Website</a></li>
    <li><a href="mailto:m.bluth@example.com">Email</a></li>
    <li><a href="tel:+13115551212">Phone</a></li>
</ul>

Emphasis, Strong Emphasis — <em>, <strong>

In HTML 5, what was previously called block-level content is now called flow content.

Before proceeding, make sure you put on your safety goggles.

Important: Before proceeding, make sure you add plenty of butter. 

<p>
    In HTML 5, what was previously called
    <em>block-level</em> content is now called
    <em>flow</em> content.
</p>
<p>
    Before proceeding, <strong>make sure you put on your safety goggles</strong>.
</p>
<p>
    <strong>Important:</strong> Before proceeding, make sure you add plenty of butter.
</p>

Abbreviations — <abbr>

Using HTML is fun and easy!

Using CSS, you can style your abbreviations! 

<p>
    Using <abbr title="Hypertext Markup Language">HTML</abbr> is fun and easy!
</p>
<p>
    Using <abbr title="Cascading Style Sheets">CSS</abbr>, you can style your abbreviations!
</p>

Code — <code>

The function selectAll() highlights all the text in the input field so the user can, for example, copy or delete the text. 

<p>
    The function <code>selectAll()</code> highlights all the text in the
    input field so the user can, for example, copy or delete the text.
</p>

Keystrokes — <kbd>

You can also create a new document using the keyboard shortcut Ctrl+N. 

<p>
    You can also create a new document using the keyboard shortcut
    <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.
</p>

Sample Input or Output — <samp>

When the process is complete, the utility will output the text Scan complete. Found N results. You can then proceed to the next step. 

<p>
    When the process is complete, the utility will output the text
    <samp>Scan complete. Found <em>N</em> results.</samp> You can then
    proceed to the next step.
</p>

Boldface (Bring Attention) — <b>

This article describes several text-level elements. It explains their usage in an HTML document.

Keywords are displayed with the default style of the element, likely in bold. 

<p>
    This article describes several <b class="keywords">text-level</b> elements.
    It explains their usage in an <b class="keywords">HTML</b> document.
</p>
<p>
    Keywords are displayed with the default style of the <b>element, likely in bold.</b>
</p>

Italic (Idiomatic) — <i>

The Latin phrase Veni, vidi, vici is often mentioned in music, art, and literature. 

<p>
    The Latin phrase <i>Veni, vidi, vici</i> is often
    mentioned in music, art, and literature.
</p>

Line Break — <br>

O’er all the hilltops
Is quiet now,
In all the treetops
Hearest thou
Hardly a breath;
The birds are asleep in the trees:
Wait, soon like these
Thou too shalt rest. 

<p>
    O’er all the hilltops<br>
    Is quiet now,<br>
    In all the treetops<br>
    Hearest thou<br>
    Hardly a breath;<br>
    The birds are asleep in the trees:<br>
    Wait, soon like these<br>
    Thou too shalt rest.
</p>

Deleted and Inserted Text — <del>, <ins>

There is nothing no code either good or bad, but thinking running it makes it so.

“You're late!”

“I apologize for the delay.”

“A wizard is never late …”

 
<blockquote>
    There is <del>nothing</del> <ins>no code</ins> either good or bad,
    but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
<hr>
<p>“You're late!”</p>
<del>
    <p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
    <p>“A wizard is never late …”</p>
</ins>

Word Break — <wbr>

Fernstraßenbauprivatfinanzierungsgesetz

Fernstraßenbauprivatfinanzierungsgesetz

Fernstraßen­bau­privat­finanzierungs­gesetz

<p>Fernstraßenbauprivatfinanzierungsgesetz</p>
<p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
<p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>

Underline (Unarticulated Annotation) — <u>

You could use this element to highlight speling mistakes, so the writer can corect them. 

<p>
    You could use this element to highlight <u>speling</u> mistakes,
    so the writer can <u>corect</u> them.
</p>

Strikethrough — <s>

There will be a few tickets available at the box office tonight.

SOLD OUT!

<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>

Superscript — <sup>

The Pythagorean theorem is often expressed as the following equation:

a2 + b2 = c2 

<p>
    The <b>Pythagorean theorem</b> is often expressed as the following equation:
</p>
<p>
    <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>

Subscript — <sub>

Almost every developer's favorite molecule is C8H10N4O2, also known as "caffeine." 

<p>
    Almost every developer's favorite molecule is
    C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as "caffeine."
</p>

Variable — <var>

The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box. 

<p>
    The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>,
    where <var>l</var> represents the length,
    <var>w</var> the width and <var>h</var> the height of the box.
</p>

Definition — <dfn>

A validator is a program that checks for syntax errors in code or documents. 

<p>
    A <dfn id="def-validator">validator</dfn> is a program
    that checks for syntax errors in code or documents.
</p>

Mark Text — <mark>

Search results for "salamander":

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. 

<p>Search results for "salamander":</p>
<hr>
<p>
    Several species of <mark>salamander</mark> inhabit the
    temperate rainforest of the Pacific Northwest.
</p>
<p>
    Most <mark>salamander</mark>s are nocturnal, and hunt
    for insects, worms, and other small creatures.
</p>

Inline Quotation — <q>

When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that. 

<p>
    When Dave asks HAL to open the pod bay door, HAL answers:
    <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave.
        I'm afraid I can't do that.</q>
</p>

Small Text for Side Comments and Fine Print — <small>

This is the first sentence. This whole sentence is in small letters. 

<p>
    This is the first sentence.
    <small>This whole sentence is in small letters.</small>
</p>

(Date and) Time — <time>

The Cure will be celebrating their 40th anniversary on in London's Hyde Park.

The concert starts at and you'll be able to enjoy the band for at least . 

<p>
    The Cure will be celebrating their 40th anniversary on
    <time datetime="2018-07-07">July 7</time> in London's Hyde Park.
</p>
<p>
    The concert starts at <time datetime="20:00">20:00</time>
    and you'll be able to enjoy the band for at least
    <time datetime="PT2H30M">2h 30m</time>.
</p>

Tables

Recommendation:
Add styles for a surrounding <div class="table-container"> to accommodate wide tables. Some frameworks provide such a thing already.

Expense On Campus Commuter
Tuition (27 credits) $11,502 $11,502
Fees $336 $336
Books (27 hours x $45) $1,215 $1,215
Room/Board** $9,139** $10,608
Transportation $3,468 $3,468
Personal* $6,324 $6,324
Average Federal Loan Fees $156 $156
Total $32,140 $33,609 
<div class="table-container">
    <table class="lpts-table">
        <thead>
            <tr>
                <th>Expense</th>
                <th class="text-center">On Campus</th>
                <th class="text-center">Commuter</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Tuition (27 credits)</th>
                <td>$11,502</td>
                <td>$11,502</td>
            </tr>
            <tr>
                <th scope="row">Fees</th>
                <td>$336</td>
                <td>$336</td>
            </tr>
            <tr>
                <th scope="row">Books (27 hours x $45)</th>
                <td>$1,215</td>
                <td>$1,215</td>
            </tr>
            <tr>
                <th scope="row">Room/Board**</th>
                <td>$9,139**</td>
                <td>$10,608</td>
            </tr>
            <tr>
                <th scope="row">Transportation</th>
                <td>$3,468</td>
                <td>$3,468</td>
            </tr>
            <tr>
                <th scope="row">Personal*</th>
                <td>$6,324</td>
                <td>$6,324</td>
            </tr>
            <tr>
                <th scope="row">Average Federal Loan Fees</th>
                <td>$156</td>
                <td>$156</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">Total</th>
                <td>$32,140</td>
                <td>$33,609</td>
            </tr>
        </tfoot>
    </table>
</div>
Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.
Name Mass (1024kg) Diameter (km) Density (kg/m3) Gravity (m/s2) Length of day (hours) Distance from Sun (106km) Mean temperature (°C) Number of moons Notes
Terrestrial planets Mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 Closest to the Sun
Venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0
Earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 Our world
Mars 0.642 6,792 3933 3.7 24.7 227.9 −65 2 The red planet
Jovian planets Gas giants Jupiter 1898 142,984 1326 23.1 9.9 778.6 −110 67 The largest planet
Saturn 568 120,536 687 9.0 10.7 1433.5 −140 62
Ice giants Uranus 86.8 51,118 1271 8.7 17.2 2872.5 −195 27
Neptune 102 49,528 1638 11.0 16.1 4495.1 −200 14
Dwarf planets Pluto 0.0146 2,370 2095 0.7 153.3 5906.4 −225 5 Declassified as a planet in 2006, but this remains controversial. 
<div class="table-container">
    <table class="lpts-table">
        <caption>Data about the planets of our solar system (Planetary facts taken from <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption>
        <thead>
            <tr>
                <td colspan="2"></td>
                <th scope="col">Name</th>
                <th scope="col">Mass (10<sup>24</sup>kg)</th>
                <th scope="col">Diameter (km)</th>
                <th scope="col">Density (kg/m<sup>3</sup>)</th>
                <th scope="col">Gravity (m/s<sup>2</sup>)</th>
                <th scope="col">Length of day (hours)</th>
                <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
                <th scope="col">Mean temperature (°C)</th>
                <th scope="col">Number of moons</th>
                <th scope="col">Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
                <th scope="row">Mercury</th>
                <td>0.330</td>
                <td>4,879</td>
                <td>5427</td>
                <td>3.7</td>
                <td>4222.6</td>
                <td>57.9</td>
                <td>167</td>
                <td>0</td>
                <td>Closest to the Sun</td>
            </tr>
            <tr>
                <th scope="row">Venus</th>
                <td>4.87</td>
                <td>12,104</td>
                <td>5243</td>
                <td>8.9</td>
                <td>2802.0</td>
                <td>108.2</td>
                <td>464</td>
                <td>0</td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Earth</th>
                <td>5.97</td>
                <td>12,756</td>
                <td>5514</td>
                <td>9.8</td>
                <td>24.0</td>
                <td>149.6</td>
                <td>15</td>
                <td>1</td>
                <td>Our world</td>
            </tr>
            <tr>
                <th scope="row">Mars</th>
                <td>0.642</td>
                <td>6,792</td>
                <td>3933</td>
                <td>3.7</td>
                <td>24.7</td>
                <td>227.9</td>
                <td>&minus;65</td>
                <td>2</td>
                <td>The red planet</td>
            </tr>
            <tr>
                <th rowspan="4" scope="rowgroup">Jovian planets</th>
                <th rowspan="2" scope="rowgroup">Gas giants</th>
                <th scope="row">Jupiter</th>
                <td>1898</td>
                <td>142,984</td>
                <td>1326</td>
                <td>23.1</td>
                <td>9.9</td>
                <td>778.6</td>
                <td>&minus;110</td>
                <td>67</td>
                <td>The largest planet</td>
            </tr>
            <tr>
                <th scope="row">Saturn</th>
                <td>568</td>
                <td>120,536</td>
                <td>687</td>
                <td>9.0</td>
                <td>10.7</td>
                <td>1433.5</td>
                <td>&minus;140</td>
                <td>62</td>
                <td></td>
            </tr>
            <tr>
                <th rowspan="2" scope="rowgroup">Ice giants</th>
                <th scope="row">Uranus</th>
                <td>86.8</td>
                <td>51,118</td>
                <td>1271</td>
                <td>8.7</td>
                <td>17.2</td>
                <td>2872.5</td>
                <td>&minus;195</td>
                <td>27</td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Neptune</th>
                <td>102</td>
                <td>49,528</td>
                <td>1638</td>
                <td>11.0</td>
                <td>16.1</td>
                <td>4495.1</td>
                <td>&minus;200</td>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <th colspan="2" scope="rowgroup">Dwarf planets</th>
                <th scope="row">Pluto</th>
                <td>0.0146</td>
                <td>2,370</td>
                <td>2095</td>
                <td>0.7</td>
                <td>153.3</td>
                <td>5906.4</td>
                <td>&minus;225</td>
                <td>5</td>
                <td>Declassified as a planet in 2006, but this <a href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
            </tr>
        </tbody>
    </table>
</div>