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!
Need a WordPress website? Or you prefer the more performant headless and static solutions? We can help!
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.
