Sans

This is a short text embedded into a p tag with no specific class. This is then the default font style, padding and margin, etc. This is then the bold default font style. This is then the italic default font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Serif

This is a short text embedded into a p tag with no serif class. This is the serif font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Mono

This is a short text embedded into a p tag with no serif class. This is the mono font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

Pre

This is a short text embedded into a p tag with no serif class. This is the pre font style, with default padding and margin, etc. This is the bold font style. This is the italic font style. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this file, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

<p class="font-sans">Sans</p>
<p class="font-serif">Serif</p>
<p class="font-mono">Mono</p>
<p class="font-pre">Pre</p>

<div class="dark">
    <p class="font-sans contrast">Sans contrast</p>
</div>

Sans Font Normal view

This is Sans Font with weight-thin.

This is Sans Font with weight-normal.

This is Sans Font with weight-bold.

This is Sans Font with weight-black.

Sans Font Contrast view

This is Sans Font with contrast weight-thin.

This is Sans Font with contrast weight-normal.

This is Sans Font with contrast weight-bold.

This is Sans Font with contrast weight-black.

Serif Font Normal view

This is Serif Font with weight-thin.

This is Serif Font with weight-normal.

This is Serif Font with weight-bold.

This is Serif Font with weight-black.

Serif Font Contrast view

This is Serif Font with contrast weight-thin.

This is Serif Font with contrast weight-normal.

This is Serif Font with contrast weight-bold.

This is Serif Font with contrast weight-black.

<p class="font-sans font-weight-thin">weight-thin</p>
<p class="font-sans font-weight-bold">weight-bold</p>
<p class="font-sans contrast font-weight-thin">contrast weight-thin</p>

Greetings, one and all!

I'm a dialog element with "open" attribute, I override some content when I'm opened...

Makes me disappear!

This is an alert message!

ok!

<dialog open>
    <p>Message text.</p>
    <form method="dialog"><button>Close</button></form>
</dialog>
<dialog role="alertdialog" open>
    <p>Alert message.</p>
    <form method="dialog"><button>ok</button></form>
</dialog>

This modal dialog has a custom backdrop!

I'm a dialog element with "autofocus" attribute, I override some content when I'm opened...

Javascript is required to open and to close me. Add this after the dialog:

     <script>
        const dialog = document.querySelector("#dialog-autofocus");
        const showButton = document.querySelector("#dialog-autofocus + button");
        const closeButton = document.querySelector("#dialog-autofocus button");

        // "Show the dialog" button opens the dialog modally
        showButton.addEventListener("click", () => {
            dialog.showModal();
        });

        // "Close" button closes the dialog
        closeButton.addEventListener("click", () => {
        dialog.close();
        });
    </script>
                

Close

Try to open this other one dialog

<dialog id="modaldialog">
    <button autofocus>Close</button>
</dialog>
<button>Try to open this other one dialog</button>
<script>
    dialog.showModal(); // on button click
    closeButton.addEventListener('click', () => dialog.close());
</script>

So, this is a text with a Primary link inside...

Bold Italic Underline Deleted Inserted Strikethrough Small Text _Sub Text ^Sup Abbr. Kbd+x Highlighted

<strong>Bold</strong> <em>Italic</em> <u>Underline</u>
<del>Deleted</del> <mark>Highlighted</mark> <kbd>Kbd+x</kbd>
<abbr title="...">Abbr.</abbr> <sub>Sub</sub> <sup>Sup</sup>

La règle d'or de la conduite est la tolérance mutuelle, car nous ne penserons jamais tous de la même façon, nous ne verrons qu'une partie de la vérité et sous des angles différents. — Ghandi

<blockquote>
    Quote text.
    <cite>&mdash; Author</cite>
</blockquote>

Simply use the standard ul, ol or dt HTML elements.

An ul list

• This is the 1st item.
• then the second one.
• For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
• And the last li tag.

An ol list

1. This is the 1st item.
2. then the second one.
3. For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
4. And the last li tag.

A dt list

This is the 1st item

Some item in a first line.

And a second item.

Then the second one

A item related to the second.

And the last dt tag.

with the last dd tag.

ul nested in ul

• Item 1
  • Item 1.1
  • Item 1.2
• Item 2
• Item 3
  • Item 3.1
  • Item 3.2

ol nested in ul

• Item 1
  1. Item 1.1
  2. Item 1.2
• Item 2

ul nested 3 levels

• Level 1 — item A
  • Level 2 — item A.1
    • Level 3 — item A.1.a
    • Level 3 — item A.1.b
  • Level 2 — item A.2
• Level 1 — item B

<ul><li>Item</li></ul>
<ol><li>Item</li></ol>
<dl><dt>Term</dt><dd>Definition</dd></dl>

Normal view

a button a disabled button

Contrast view

<button>a button</button>
<button disabled>a disabled button</button>
<div class="contrast">
    <button>a button</button>
</div>

Normal view

Table 1: A caption of the table in this normal view.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<table role="grid">
    <thead><tr><th scope="col">...</th></tr></thead>
    <tbody><tr><td>...</td></tr></tbody>
    <caption><span>Table N:</span> Caption text.</caption>
</table>

Contrast view

Table 2: A caption of the table: with contrast view.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<table role="grid" class="contrast"></table>

<div class="dark">
    <table role="grid"></table>
</div>

Here is a form with <fieldset>:

An "input" of type "text": A "select" element with several "option" elements: don't want to say female male Radio "input" elements: I'm under 18 I'm over 18 Below is a "select" element with "optgroup" used to group the "option" elements. It does not work on Safari: Pizza Spaghetti Sushi Hamburger Borsht A "textarea" element: I agree with all possible terms and conditions Subscribe Reset Can't click

This is a form without <fieldset>:

Add funds: Pay

<form method="get" action="#">
    <fieldset>
        <legend>...</legend>
        <label for="x">Label:</label>
        <input name="x" type="text" id="x"/>
        <button type="submit">Submit</button>
    </fieldset>
</form>

Who is Sarah Connor?

Sarah Jeanette Connor is a fictional character and the main protagonist of the Terminator franchise. Sarah was portrayed by Linda Hamilton in The Terminator, Terminator 2: Judgment Day, T2-3D: Battle Across Time, and Terminator: Dark Fate

I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?

A keyboard

A more complex one... add buttons in the summary:

A summary text. button link

...an header in details...

Some text in the main part of the details element.

Some text in the main part of the details element.

Some text in the main part of the details element.

A more complex one... add buttons in the summary in contrast view:

<details>
    <summary>Summary text</summary>
    Content
</details>
<div class="contrast">
    <details><summary>Contrast summary</summary>Content</details>
</div>

This is the main content related to the side one.

<aside>Emphasized content.</aside>
<p>Main content.</p>

File progress: 70%

<progress id="file" max="100" value="70">70%</progress>
<progress value="25" max="100" aria-label="25%"></progress>
<progress aria-label="Loading…"></progress>

<figure>
    <img src="..." alt="...">
    <figcaption>Caption text</figcaption>
</figure>