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!
Bazar is a powerful "headless" e-commerce system. Built on Laravel and Vue.
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.
