Useful HTML Tags

A collection of useful HTML tags that provide features with needing to break out the JavaScript

Details

Implementing a “Show more…” button

<details>
    <summary>A short description</summary>
    <p>More detailed markup that can be shown/hidden based on user interaction</p>
</details>

A short description

More detailed markup that can be shown/hidden based on user interaction

Dropdown with Suggestions

<form>
    <label for="inputDemo">Enter your preference:</label>
    <input list="preferences" id="inputDemo" placeholder="Type here..." />
    <datalist id="preferences">
        <option value="Before Breakfast"></option>
        <option value="Before Lunch"></option>
        <option value="Before Dinner"></option>
    </datalist>
</form>

Enter your preference:

Dialog Box

Ok, this one does require a little bit of JavaScript

MDN Documentation

<dialog></dialog>

Open Dialog

Hello World!

Color Picker

<label for="pickColor">Choose a color: </label>
<input id="pickColor" type="color" />

Choose a color:

Progress Bars

<progress value="56" max="100"></progress>
<meter min="0" max="100" value="16" low="25" high="75" optimum="50"></meter>
<meter min="0" max="100" value="42" low="25" high="75" optimum="50"></meter>
<meter min="0" max="100" value="96" low="25" high="75" optimum="50"></meter>

To Explore

• inputmode

• contenteditable

• <mark>Some text</mark> - Highlight text

• <a href="tel:0123456789">0123456789</a> - Link to a phone number

• <ins>

• <del>