# HTML Elements

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/elements

## Sectioning

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name                 | Source                  |
| ------------------------- | ----------------------- |
| `elements.sectioning.css` | [Github][srcSectioning] |

</div>

[srcSectioning]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.sectioning.css

  Technically, `address` and `h1` — `h6` are [content sectioning elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning), like `header`, `section`, etc. But mCSS approach is to prioritize intuitiveness and ease of use rather than technical correctness, so they're included here with the rest of the text elements.

## Text

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name                 | Source                  |
| ------------------------- | ----------------------- |
| `elements.text.css` | [Github][srcText] |

</div>

[srcText]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.text.css

  ### Headings

  Heading sizes are fluid: they scale smoothly between a mobile minimum and a desktop maximum via the `--heading-1`…`--heading-6` tokens (see [tokens](/docs/tokens)). Resize the viewport to see it in action.

  <h1>Heading One</h1>
  <p>A small paragraph of text to show the heading in context.</p>
  <h2>Heading Two</h2>
  <p>A small paragraph of text to show the heading in context.</p>
  <h3>Heading Three</h3>
  <p>A small paragraph of text to show the heading in context.</p>
  <h4>Heading Four</h4>
  <p>A small paragraph of text to show the heading in context.</p>
  <h5>Heading Five</h5>
  <p>A small paragraph of text to show the heading in context.</p>
  <h6>Heading Six</h6>
  <p>A small paragraph of text to show the heading in context.</p>

  <h1>Consecutive headings get less margin… H1 followed by a H2</h1>
  <h2>H2 right aftert a H1</h2>
  <h3>H3 right aftert a H2</h3>
  <h4>H4 right aftert a H3</h4>

  ### Inline Elements

<div class="docs_oversizedTable">

| Element    | Example                                                                      |
| ---------- | ---------------------------------------------------------------------------- |
| `<a>`      | <a href="#!">This is a text link</a>.                                        |
| `<abbr>`   | Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr> in a sentence.           |
| `<b>`      | The <b>b element</b> is only stylistically different text from normal text.  |
| `<cite>`   | <cite>This is a citation.</cite>                                             |
| `<del>`    | <del>This text is deleted</del>                                              |
| `<dfn>`    | The <dfn>dfn element</dfn> indicates a definition.                           |
| `<em>`     | <em>This text has added emphasis.</em>                                       |
| `<i>`      | The <i>i element</i> is text that is offset from the normal text.            |
| `<ins>`    | <ins>This text is inserted.</ins>                                            |
| `<mark>`   | The <mark>mark element</mark> indicates a highlight.                         |
| `<q>`      | <q cite="https://dub.sh/mdn-html-q">This is a short inline quotation.</q>    |
| `<s>`      | <s>This text has a strikethrough</s>.                                        |
| `<small>`  | <small>This small text is small for fine print, etc.</small>                 |
| `<strong>` | <strong>Strong is used to indicate strong importance.</strong>               |
| `<sub>`    | Subscript for things like H<sub>2</sub>O.                                    |
| `<sup>`    | Superscript<sup>™️</sup>.                                                     |
| `<var>`    | The <var>variable element</var>, such as <var>x</var> = <var>y</var>.        |

</div>

<section class="docs_section prose">
  ### Paragraphs

  A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.

  Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

<section class="docs_section prose">
  ### Definition list

  <dl>
    <dt>Definition List description term</dt>
    <dd>This is a definition list description details</dd>
    <dt>Another description</dt>
    <dd>With the related description details</dd>
  </dl>

  ### Ordered List

  1. List Item
  1. List Item
      1. List Item
      1. List Item
          1. List Item
          1. List Item
      1. List Item
      1. List Item
  1. List Item
  1. List Item

  ### Unordered List

  - List Item
  - List Item
    - List Item
    - List Item
      - List Item
      - List Item
    - List Item
    - List Item
  - List Item
  - List Item

<section class="docs_section prose">
  ### Blockquotes

  <blockquote cite="#!">
    <p>It would be going too far to call our modern offices sensory-deprivation chambers, but they are most certainly sensory-reduction chambers. They may not brainwash, but the elimination of sensory stimuli definitely increases focus on the task at hand, the work to be done, to the exclusion of all else. Modern offices were designed for that very purpose by people who knew what they were doing.</p>
  </blockquote>
  <p>—Jerry Mander, <cite>Four arguments for the elimination of television</cite></p>

<section class="docs_section prose">
  ### Horizontal Rule

  The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane.

  <hr />

  You have power over your mind — not outside events. Realize this, and you will find strength.

  <section class="docs_section prose">
  ### code

  <p>
    <strong>Keyboard input: </strong>
    <kbd>Cmd</kbd>
  </p>
  <p>
    <strong>Inline code: </strong>
    <code>&lt;div&gt;code&lt;/div&gt;</code>
  </p>
  <p>
    <strong>Sample output: </strong>
    <samp>This is sample output from a computer program.</samp>
  </p>

  ### Pre-formatted text

  <pre>
    P R E F O R M A T T E D T E X T !
    " # $ % &amp; ' ( ) * + , - . / 0 1 2
    3 4 5 6 7 8 9 : ; &lt; = &gt; ? @ A B C
    D E F G H I J K L M N O P Q R S T
    U V W X Y Z [ \ ] ^ _ ` a b c d e
    f g h i j k l m n o p q r s t u v
    w x y z ~
  </pre>

<section class="docs_section">
  ### Address

  <address>
    <p>Retro whimsical default… Because, why not?</p>
    <a href="mailto:sonny@rollins.com">sonny@rollins.com</a>
    <br />
    <a href="tel:+12121231234">+1 (212) 123 1234</a>
  </address>

## Table

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name            | Source             |
| -------------------- | ------------------ |
| `elements.table.css` | [Github][srcTable] |

</div>

[srcTable]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.table.css

  <table>
    <caption>Numbers of albums recorded</caption>
    <thead>
      <tr>
        <th scope="col">Musician</th>
        <th scope="col">Instrument</th>
        <th scope="col">Albums</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Sonny Rollins</th>
        <td>Saxophone</td>
        <td>60</td>
      </tr>
      <tr>
        <th scope="row">John Coltrane</th>
        <td>Saxophone</td>
        <td>56</td>
      </tr>
      <tr>
        <th scope="row">Joe Henderson</th>
        <td>Saxophone</td>
        <td>25</td>
      </tr>
      <tr>
        <th scope="row">Wayne Shorter</th>
        <td>Saxophone</td>
        <td>36</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Total Albums</th>
        <td>177</td>
      </tr>
    </tfoot>
  </table>

## Form

<section class="docs_section prose">

| File name            | Source           |
| -------------------- | ---------------- |
| `elements.form.css` | [Github][srcForm] |

[srcForm]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.form.css

See [How to structure a web form](https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form) on MDN.

This is just the bare minimum default styles to make any form look consistent out of the box. See the [field component](/components/field) for more.

The `legend` HTML element is notoriously impractical to style. The example below uses the following workaround:

```html
<legend>Example of custom fieldset legend</legend>
<div aria-hidden="true">Example of a fieldset legend</div>
```

```css
fieldset {
  > [aria-hidden] {
    /* [styling goes her…] */
  }
}

legend {
  /*  Visually hidden  */
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}
```

<section class="docs_section">
  <form class="docs_form">
    <fieldset>
      <legend>Example of custom fieldset legend</legend>
      <div aria-hidden="true">Example of a fieldset legend</div>
      <p>
        <label for="text">Text Input</label>
        <input id="text" type="text" placeholder="Text Input" />
      </p>
      <p>
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Type your Password" />
      </p>
      <p>
        <label for="webaddress">Web Address</label>
        <input id="webaddress" type="url" placeholder="https://yoursite.com" />
      </p>
      <p>
        <label for="emailaddress">Email Address</label>
        <input id="emailaddress" type="email" placeholder="name@email.com" />
      </p>
      <p>
        <label for="phone">Phone Number</label>
        <input id="phone" type="tel" placeholder="(999) 999-9999" />
      </p>
      <p>
        <label for="search">Search</label>
        <input id="search" type="search" placeholder="Enter Search Term" />
      </p>
      <p>
        <label for="text2">Number Input</label>
        <input id="text2" type="number" placeholder="Enter a Number" />
      </p>
      <p>
        <label for="file">File Input</label>
        <input id="file" type="file" />
      </p>
    </fieldset>
    <fieldset>
      <legend>Select menus</legend>
      <p>
        <label for="select">Select</label>
        <select id="select">
          <optgroup label="Group 1">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </optgroup>
          <optgroup label="Group 2">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </optgroup>
        </select>
      </p>
      <p>
        <label for="select">Select (disabled)</label>
        <select id="select" disabled>
            <option>Not Available</option>
        </select>
      </p>
      <p>
        <label for="select_multiple">Select (multiple)</label>
        <select id="select_multiple" multiple>
          <optgroup label="Group 1">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </optgroup>
          <optgroup label="Group 2">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </optgroup>
        </select>
      </p>
    </fieldset>
    <fieldset>
      <legend>Checkboxes</legend>
      <ul>
        <li>
          <label for="checkbox1">
            <input
              id="checkbox1"
              name="checkbox"
              type="checkbox"
              checked
            /> Choice A
          </label>
        </li>
        <li>
          <label for="checkbox2">
            <input id="checkbox2" name="checkbox" type="checkbox" /> Choice B
          </label>
        </li>
        <li>
          <label for="checkbox3">
            <input id="checkbox3" name="checkbox" type="checkbox" /> Choice C
          </label>
        </li>
      </ul>

      <legend>Radio buttons</legend>
      <ul>
        <li>
          <label for="radio1">
            <input id="radio1" name="radio" type="radio" checked /> Option 1
          </label>
        </li>
        <li>
          <label for="radio2">
            <input id="radio2" name="radio" type="radio" /> Option 2
          </label>
        </li>
        <li>
          <label for="radio3">
            <input id="radio3" name="radio" type="radio" /> Option 3
          </label>
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>Textareas</legend>
      <p>
        <label for="textarea">Textarea</label>
        <textarea
          id="textarea"
          rows="5"
          cols="10"
          placeholder="Enter your message here"
        ></textarea>
      </p>
    </fieldset>
    <fieldset>
      <legend>HTML5 inputs</legend>
      <p>
        <label for="ic">Color input</label>
        <input type="color" id="ic" value="#38bdf8" />
      </p>
      <p>
        <label for="in">Number input</label>
        <input type="number" id="in" min="0" max="10" value="5" />
      </p>
      <p>
        <label for="ir">Range input</label>
        <input type="range" id="ir" value="10" />
      </p>
      <p>
        <label for="idm">Month input</label>
        <input type="month" id="idm" value="2024-06" />
      </p>
      <p>
        <label for="idw">Week input</label>
        <input type="week" id="idw" value="2024-W25" />
      </p>
      <p>
        <label for="idate">Date input</label>
        <input
          type="date"
          id="idate"
          value="2024-06-18"
          min="2024-01-01"
          max="2030-12-31"
        />
      </p>
      <p>
        <label for="itime">Time input</label>
        <input type="time" id="itime" min="09:00" max="18:00" />
      </p>
      <p>
        <label for="idtl">Date & time input</label>
        <input type="datetime-local" id="idtl" value="2024-06-18T00:00" />
      </p>
      <p>
        <label for="idl">Datalist</label>
        <input type="text" id="idl" list="example-list" />
        <datalist id="example-list">
          <option value="Example #1"></option>
          <option value="Example #2"></option>
          <option value="Example #3"></option>
        </datalist>
      </p>
    </fieldset>
    <fieldset>
      <legend>Action buttons</legend>
      <p>
        <input class="bt" type="submit" value="Submit Input" />
        <input class="bt" type="reset" value="Reset Input" />
        <input class="bt" type="submit" value="Disabled Input" disabled />
      </p>
      <p>
        <button class="bt" type="submit">Submit Button</button>
        <button class="bt" type="button">Button</button>
        <button class="bt" type="reset">Reset Button</button>
        <button class="bt" type="button" disabled>Disabled Button</button>
      </p>
    </fieldset>
  </form>

  ### Meter

```html
<meter value="2" min="0" max="10" low="3" high="6" optimum="8">
    2 out of 10
</meter>
<meter value="5" min="0" max="10" low="3" high="6" optimum="8">
    5 out of 10
</meter>
<meter value="8" min="0" max="10" low="3" high="6" optimum="8">
    8 out of 10
</meter>
  ```

<p>
  <meter value="2" min="0" max="10" low="3" high="6" optimum="8">2 out of 10</meter>
</p>
<p>
  <meter value="5" min="0" max="10" low="3" high="6" optimum="8">5 out of 10</meter>
</p>
<p class="mb-lg3">
  <meter value="8" min="0" max="10" low="3" high="6" optimum="8">8 out of 10</meter>
</p>

### Progress

<p class="mb-lg3">
  <label for="progress-bar">Uploading Document: 70%</label>
  <progress id="progress-bar" value="70" max="100">70%</progress>
</p>

## Media

<section class="docs_section prose">

| File name            | Source             |
| -------------------- | ------------------ |
| `elements.media.css` | [Github][srcMedia] |

[srcMedia]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.media.css

  <ul class="docs_section_media">
    <li>
      Plain `<img>` element
      <Image src={img} width="384" alt="Saxophonist playing in Central Park" />
    </li>
    <li>
      `<figure>` element with `<img>` element
      <figure><Image src={img} width="384" alt="Saxophonist playing in Central Park" /></figure>
    </li>
    <li>
      `<figure>` element with `<img>` and `<figcaption>` elements
      <figure>
        <Image src={img} width="384" alt="Saxophonist playing in Central Park" />
        <figcaption>Here is a caption for this image.</figcaption>
      </figure>
    </li>
    <li>
      `<figure>` element with a `<picture>` element
      <figure>
        <picture>
          <source srcset={img.src} width="384" media="(min-width: 800px)" />
          <Image src={imgCrop} width="384" alt="Saxophonist playing in Central Park" />
        </picture>
      </figure>
    </li>
  </ul>

<section class="docs_section">
  ### Audio
  <audio controls>
    <source src={audioFile} type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio>

<section class="docs_section">
  ### Video
  <video controls width="384">
    <source src={videoFile} type="video/mp4" />
    Your browser does not support the video element.
  </video>

<section class="docs_section">
  ### Canvas
  <script src="/_js/triangles.js" type="module"></script>
  <canvas class="triangles docs_canvas">canvas</canvas>

<section class="docs_section">
  ### Inline Frame
  <iframe width="384" height="200" src="https://www.openstreetmap.org/export/embed.html?bbox=115.69423198699953%2C-8.367407790226663%2C115.70669889450075%2C-8.358820459526953&layer=mapnik&marker=-8.363114148527767%2C115.70046544075012"></iframe>

<section class="docs_section prose">
  ### Inline SVG
  <svg width="100px" height="100px">
    <circle cx="50" cy="50" r="50" fill="#0ea5e9"></circle>
  </svg>

## Interactive

<section class="docs_section prose">

| File name            | Source             |
| -------------------- | ------------------ |
| `elements.interactive.css` | [Github][srcInteractive] |

[srcInteractive]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.interactive.css

  ### Details & Summary
  <details>
    <summary>Expand for details</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
  </details>

<section class="docs_section">
  ### Dialog
  <dialog>
    <button aria-label="close pop-up"><Fragment set:html={iconX} /></button>
    <h3>A random quote you might enjoy…</h3>
    <p><q>If you want to awaken all of humanity, then awaken all of yourself. If you want to eliminate the suffering of the world, then eliminate all that is negative in yourself. Truly the greatest gift you have to give is that of your own self-transformation.</q></p>
  </dialog>
  <button class="bt">Show the dialog</button>

<script src="/_js/DocsElementsScript.js" type="module"></script>