HTML

HTML Tricks

Meters

A meter element is availble natively for HTML.

<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>

<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>

<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>

Ordered list start

Change the starting point of an ordered list.

<ol start="11">
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
</ol>
  1. Eleven
  2. Twelve
  3. Thirteen
  4. Fourteen
<div class="wrapper">
  <h1>HTML native search</h1>

  <input list="items">

  <datalist id="items">
    <option value="Rui">
    <option value="Vieira">
    <option value="ruivieira.dev">
    <option value="HTML">
  </datalist>
</div>

Native HTML Search

Fieldset element

<form>
  <fieldset>
    <legend>Best editor</legend>

    <input type="radio" id="emacs" name="editor">
    <label for="emacs">Emacs</label><br/>

    <input type="radio" id="vim" name="editor">
    <label for="vim">Vim</label><br/>

    <input type="radio" id="nano" name="editor">
    <label for="nano">nano</label>
  </fieldset>
</form>
Best editor
<input type="radio" id="emacs" name="editor">
<label for="emacs">Emacs</label><br/>

<input type="radio" id="vim" name="editor">
<label for="vim">Vim</label><br/>

<input type="radio" id="nano" name="editor">
<label for="nano">nano</label>

Spellchecking

<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">

<label for="input2">spellcheck="false"</label>
<input type="text" id="input2" spellcheck="false">

Sliders

<label for="volume">Volume (goes to 11): </label>
<input type="range" id="volume" name="volume" min="0" max="11">

Details

  <details>
    <summary>
      Spoiler
    </summary>

    <p>
      Keyser Söze is a myth.
    </p>
  </details>
Spoiler

Keyser Söze is a myth.

Mark

<p>This is an <mark>example with highlight</mark> since it's so important</p>

This is an example with highlight since it's so important