People say that HTML is easy and that statement is true to some extent. Perhaps, because of its easy syntax, it is taken for granted. What they don't seem to understand is that HTML is a powerful markup language that can be used to give our web applications structure and provide powerful accessibility benefits. But these things can only be achieved when one is familiar with HTML and uses it appropriately. That being said, there are various tags and attributes in HTML to make your products more interactive.
So, here are some of the most underused or unknown tags in HTML. You might not be familiar with them but they may prove to be quite useful in certain situations ;)
1. < picture >
This tag allows you to specify image sources. Normally you have an image that you scale up and down depending upon the viewport width. But what if multiple images can be designed to fill the browser viewport?
This tag contains two different tags:
one or more elements
one < image > element.
The source element has the following attributes:
srcset (required): It defines the URL of the image that is to be displayed.
media: It accepts any valid media query that you define within CSS.
sizes: It is used to define a single width value, a single media query with width value, or a comma-separated list of media queries with a width value.
type: It defines the MIME type.
Our browsers use the attribute values to load the most appropriate image. They use the first < source > element with a matching hit and ignore the subsequent source elements.
The < img > tag is used to provide backwards compatibility if a browser doesn’t support the element or in case none of the < source > tags match.
<picture>
<source media = "(min-width: 500px)" srcset = "pineapple.jpg">
<source media = "(min-width: 400px)" srcset = "apple.jpg">
<img src = "orange.jpg" alt = "orange" style = "width:auto;">
</picture
2. wbr tag
Sometimes the browser automatically breaks long word in an incorrect position. When this happens, you can just use the wbr tag in order to tell the browser where it is okay to break the line.
<p>
A longggggggggggggggggggggggg <wbr> paragraphhhhhhhhhhhhhhhhhhhhhhhh
</p>
3. < details >
This tag specifies the details that the user can open and close on demand as shown below;
<details>
<summary>The Coding Co</summary>
<p>The Coding Co is my blog that I started about 1 and a half months ago. I post content related to Python, C++, Web Development and UX Design. Sometimes I post articles on topics that are not directly related to programming but are essential.</p>
</details>
4. Contenteditable
It is a global attribute that makes the HTML content editable by the user or not! You should be careful to changes only made to visible content vs DOM content.
<div contenteditable = "true">
I'm an editable div!
</div>
5. Spellcheck
It is a global attribute. It can be used to check spelling and grammar on HTML elements like input fields or any other editable element. But generally, non-editable elements are not checked for spelling errors.
<p contenteditable = "true" spellcheck = "true>
Thankssss uuu fer chekng me spellinj!
</p>
6. < bdi >
This abbreviation stands for Bi-Directional Isolation. This tag isolates a part of the text that might be formatted in a different direction from other text outside it. It is very useful when embedding user-generated content with an unknown text direction.
<ul>
<li>User <bdi>hina</bdi>: 60 points</li>
<li>User <bdi>jackdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
7. < param >
It is used to define parameters for an element.
It can be used when you want some audio or video to play as soon as the page loads. Just set the "autoplay" parameter to "true" and the sound will start playing just as the page loads.
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
8. Hidden
It is a boolean attribute. It specifies that an element is not yet or no longer relevant.
It can be used to keep a user from seeing an element until some other condition has been met such as selecting a checkbox or filling an input field etc. Then we could use JavaScript to remove the hidden attribute and make it visible!
<p hidden>This paragraph is hidden.</p>
<p>This paragraph is not hidden.</p>
9. < mark >
You can use it to define text that should be marked or highlighted.
<p>Do not forget to buy the <mark>chocolates</mark> today.</p>
10. < meter >
It defines a scalar measurement within either a known range or a fractional value that is also known as a gauge. Some examples include disk usage, the relevance of a query result, etc.
Note: Don't use this tag to indicate progress (as in a progress bar). For that purpose, use the < progress > tag.
Pro-tip: Don't skip the < label > tag!
<label for="disk_e">Disk usage C:</label>
<meter id="disk_e" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="disk_f">Disk usage D:</label>
<meter id="disk_" value="0.6">60%</meter>
Conclusion
These are just some HTML attributes and tags. There are many more out there! Web developers are often expected to know more than just 1 language so many do not spend too much time on HTML. If you are new to web development, then I'd advise you to spend more time on the basics to explore the true potential of HTML and CSS!
Let's connect!
✨ Github