TIL: HTML tags edition

I have a week off work, whey! And what better way to spend some of it then refreshing my knowledge of HTML tags. Now before you go bashing the keyboard labelling me a madman, hear me out. I feel HTML is deemed as 'the basic one' when people refer to programming languages, like you learn it on your first day then that's it, forever...

Here's 10 -ish tags I've found that I wanted to share, enjoy!

<dl>, <dt> and <dd>

First up is more of a 3-in-1, where <dt> and <dd> are descendants to <dl>. The Descriptive List element, contains a collection of terms <dt>, and descriptions <dd>. Let's look at an example:

<dl>
  <dt>Client</dt>
  <dd>Apple</dd>

  <dt>Role</dt>
  <dd>Web development</dd>

  <dt>Year</dt>
  <dd>2019</dd>
</dl>

MDN: Descriptive List element

<del>, <ins>

The Deleted Text element, along with its <ins> counterpart, highlight when text has been deleted, or added to the document respectively. You can also pass a datetime attribute on both to signify a date/time when the contents within the tag were deleted or inserted.

<p>It was a <del>sunny</del><ins>rainy</ins> day.</p>

MDN: Deleted Text element

<address>

Now I did find this one cool, it signifies that the HTML inside provides contact information.

<address>
  <p>Westminster, London SW1A 1AA</p>
    <a href="mailto:info@example.com">info@example.com</a>
  <a href="tel:02056123456">020 5612 3456</a>
</address>

MDN: Contact Address element

<time>

A way to specify a date or time in a more machine readable way. Could be great for including on your date stamp of a blog post.

<p>Tickets will go on sale <time datetime="07-06-21">Monday 7th June</time></p>

MDN: Time element

<fieldset>, <legend>

The Field Set element represents a collection of HTML form elements, which can be logically grouped. This may be handy where you have a quote form with multiple sections, and you can define the sections by <fieldset>. The <legend> tag is a label to the overall <fieldset>.

A neat trick is that you can pass the disabled attribute to the <fieldset> tag, which causes all form elements inside to also be disabled.

<form>
  <fieldset>
    <legend>Your details</legend>

    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="tel" name="phone" />
  </fieldset>
</form>

MDN: Field Set element

<optgroup>

I did actually discover this one a few months back, however it's too good not to share anyway! If you have a <select> element with a load of options, which could be split up into groups, then this is for you!

<select>
  <optgroup label="Audi">
    <option>A3</option>
    <option>A5</option>
    <option>Q5</option>
  </optgroup>
  <optgroup label="BMW">
    <option>1 series</option>
    <option>3 series</option>
    <option>X4</option>
  </optgroup>
</select>

MDN: element

<output>

I love this, if you say have a quotation form that takes user input and spits out some sort of calculated result, that's exactly what <output> is for!

<form>
  <input type="number" name="mileage" id="mileage" />

  <p>Miles remaining: </p>
  <output name="remaining-miles" for="mileage"></output>
</form>

MDN: Output element

<datalist>

While I can't see myself coming to use this very often, it's still good to know it's there, in the corner, waiting... You could think of it like being a <select> element, but you can type in your own value if you wish.

<form>
    <input list="parts" name="part" />

    <datalist id="parts">
      <option value="Water pump" />
      <option value="Battery" />
      <option value="Spark plug" />
      <option value="Front brake disk" />
    </datalist>
</form>

MDN: Data List element

<progress>

Again, limited use-cases yet still keeping it tucked away. Fairly self explanatory, the progress element indicates the progress of any given task. Perhaps you're running a process on a server and want to keep the user updated when it'll be complete?

If you wanted greater styling control, you could probably do something like how custom radio buttons work, where the main element (<progress>) is visually hidden and you use a <div> for the visual. Just remember to get your aria attributes correctly defined so it's all accessible!

<progress id="upload-status" max="100" value="30">30%</progress>

MDN: Progress Indicator element

Well there we have it! Who'd have thought refreshing my knowledge of mere HTML tags would prove so rewarding... Thanks for reading!

Photo by Valery Sysoev on Unsplash