Less Popular HTML Tags

In HTML, we can create almost everything with just a small subset of the available elements. Using this language isn’t the hardest part of web development, but as always, there is room for improvement.

We have a lot of elements, a lot. So many that I’m sure there are a “new” for everyone (for me there is more than one). Usually, this isn’t a problem because some of these elements are particular, and we don’t need them so often.

Unlike the new landmarks like the <main>, <aside>, <section> these tags aren’t major building blocks.

We can also find elements that we should use more frequently because they are beneficial, and this is what this post is about. I tried to collect the ones which I should use more often. For a complete list, visit MDN!

Form Related HTML Tags

If you start to learn about accessibility, these elements will come to you. Making a usable form for everybody is hard. If you want to learn more about the topic, please buy Adam Silver’s book.

<fieldset>

Using the <fieldset> element, we can logically group a part of our form. In the case of a long-form, it is often necessary. It can be useful for the user, especially the ones with a disability.

<form>
    <fieldset>
        <legend>Personal informations</legend>

        <div class="input-group">
            <label for="name">Name</label>
            <input type="input" id="name" name="name">
        </div>

        <div class="input-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email">
        </div>
     </fieldset>
</form>

<legend>

The <legend> element is serve as a caption for the <fieldset>. Like in the case of a <label> and <input> element here we also set a meaning/naming to the section to be universally understandable.

<optgroup>

With the help of <optgroup>, we can group our select lists into a custom logical order. If we have a long list with many records, we can separate it with headings.

<div class="input-group">
    <label for="teams">Choose a team:</label>
    <select id="teams">
        <optgroup label="Germany">
            <option value="bayern">FC Bayern München</option>
            <option value="leverkursen">Bayer 04 Leverkusen</option>
        </optgroup>
        <optgroup label="England">
            <option value="united">Manchester United FC</option>
            <option value="chelsea">Chelsea FC</option>
        </optgroup>
    </select>
</div>

Content Section Elements

The content elements are the most basic building blocks.

<address>

Semantically show contact information; this can be a physical address or just an email. Should include anything related to contact information (name, number, coordinates).

<address>
    Written by <a href="mailto:[email protected]">Adam Laki</a>.<br>
    Szombathely<br>
    Hungary
</address>

<hgroup>

With the <hgroup> tag, we can group the primary heading with any secondary heading in a way that doesn’t modify the document outline.

<hgroup> 
    <h1>This is the title</h1> 
    <h2>This is subtitle</h2> 
</hgroup> 

In this way, we can declare a subtitle and connect it logically to the title.

Inline Text Elements

There are many inline type element that I never used or didn’t know like the <bdi> and <bdo>.

<abbr>

The <abbr> tag represents an abbreviation or acronym. It has an optional title attribute that is used to show the full expression.

The <abbr title="United Nations Children's Fund">UNICEF</abbr> is a United Nations agency responsible for providing humanitarian and developmental aid to children worldwide.

This tag is useful for usability if you write something technical with professional expressions. Although besides the <abbr>, it is an excellent technique to write out the expression entirely on the first appearance.

<cite>

Using <cite> we can describe a reference.  A good example is the <blockquote> element where we can use the <cite> to caption the author of the quote.

<blockquote>
    <p>Be yourself; everyone else is already taken.</p>
    <cite>Oscar Wilde</cite>
</blockquote>

Editing Texts

This two-element  can mark modifications in our contents like deleting or inserting.

• <del> – Mark a text section that was removed from the document.
• <ins> – Mark a text section that was added to the document.

<p>My favorite preprocessor is <del>Less</del> <ins>Sass</ins>!</p>

As you see, these are contrasting elements that can be handy when you edit blog or news posts (to be more transparent).

Both have two attributes: cite (URI to explain the change) and datetime (to mark the date of the modification).

Interactive Elements

I think these are the most exciting elements — the ones that try to push the limitations of the HTML language.

<details>

The <details> element can be used to create an accordion-like widget which has open and closed states.

It is a native element to create disclosed content. Using the <summary> tag, we can also declare a label for it. It has one attribute which is named open (true/false).

<details>
    <summary>The topics on Pine</summary>
    Laravel, JavaScript, WordPress, CSS, HTML ...
</details>

<dialog>

The <dialog> is an interactive element that helps us to create dismissable alerts, modals. It has one attribute which is named open (true/false).

For a complete tutorial about it, please visit Viget’s blog.

Need a web developer? Maybe we can help, get in touch!