HTML, the backbone of the web, has come a long way with the introduction of HTML5. While you may be well-acquainted with common HTML tags, there's a wealth of lesser-known tags and essential elements that can elevate your web projects.
In this comprehensive guide, we'll uncover these gems and explore HTML5 tags and elements that every developer should be familiar with.
By the end of this journey, you'll have a powerful toolkit for creating modern, accessible, and engaging web experiences.
1. The Hidden Gems
1.1. <main>
Tag 👉 Structuring Main Content
The <main>
tag represents the main content of your web page. It's especially valuable for improving web accessibility and search engine optimization by providing a clear structure to your primary content.
<main>
<h1>Main Content</h1>
<p>Your primary content goes here.</p>
</main>
1.2. <figure>
and <figcaption>
Tags 👉 Image Captions
Use the <figure>
and <figcaption>
tags to associate captions with images, illustrations, charts, or diagrams. This enhances readability and accessibility.
<figure>
<img src="image.jpg" alt="An image">
<figcaption>Caption for the image</figcaption>
</figure>
1.3. <details>
and <summary>
Tags 👉Collapsible Content
Creating interactive and collapsible sections on a web page is easy with the <details>
and <summary>
tags. These tags enable you to hide and reveal content, perfect for FAQs and documentation.
<details>
<summary>Show More</summary>
<p>Hidden content goes here.</p>
</details>
2: Multimedia Magic
2.1. <audio>
and <video>
Tags 👉 Multimedia Embedding
While these tags are known to many, they provide options for embedding audio and video content in various formats, and recent updates introduce new attributes for greater interactivity.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls width="320" height="240">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
2.2. <canvas>
Tag 👉 Dynamic Graphics
The <canvas>
tag provides a blank slate for creating dynamic graphics, animations, and games using JavaScript. It's a playground for developers interested in interactive visual elements.
<canvas id="myCanvas" width="200" height="100"></canvas>
3: Forms and Input Extensions
3.1. <datalist>
and <input list>
Tags 👉 Autocomplete Dropdowns
Enhance user input with the <datalist>
and <input list>
tags. They allow you to create autocomplete dropdowns and input suggestions, improving the user experience on your forms.
<input list="colors">
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Blue">
</datalist>
3.2. <meter>
and <progress>
Tags 👉 Displaying Progress
When it comes to displaying progress, levels, or statistics, the <meter>
and <progress>
tags offer simple yet effective solutions. Learn how to make your web forms more informative and engaging.
<meter value="75" min="0" max="100">75%</meter>
<progress value="60" max="100">60%</progress>
4: Structuring Content
4.1. <article>
Tag 👉 Self-Contained Content
The <article>
tag is perfect for marking up self-contained content that could be distributed and understood independently. It's commonly used for blog posts, news articles, and forum posts.
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
4.2. <mark>
Tag 👉 Text Highlighting
Need to highlight and emphasize specific parts of your text? The <mark>
tag allows you to do just that, whether it's for highlighting search results or drawing attention to essential information.
<p>Search results: <mark>HTML5</mark> elements</p>
5: Improved Text Semantics
5.1. <time>
Tag 👉 Date and Time Indication
The <time>
tag is perfect for indicating specific dates, times, or durations. It adds semantic meaning to your content and can be a game-changer for search engine optimization and accessibility.
<p>Published: <time datetime="2023-10-31">October 31
5.2. <cite>
Tag 👉 Proper Citation
When citing the title of a creative work within your content, the <cite>
tag is your friend. It adds clarity to your references and helps give credit where it's due.
<p><cite>Let's Develop Websites</cite> by Satyam Anand </p>
5.3. <abbr>
Tag 👉 Abbreviation Clarification
When using abbreviations or acronyms in your content, the <abbr>
tag lets you specify the full form of the abbreviation, improving the accessibility and understanding of your text.
<p><abbr title="Hypertext Markup Language">HTML</abbr></p>
6: Additional Elements for Experienced Developers
6.1. Web Components: 👉 Resuable Elements
Web Components, consisting of HTML templates, custom elements, and the Shadow DOM, allow you to create reusable, encapsulated components for web applications.
<head>
<script src="my-component.js" type="module"></script>
</head>
<body>
<my-component></my-component>
</body>
6.2. <dialog>
Tag 👉 Modal Dialogs
The <dialog>
tag is used for creating modal dialogs and pop-up windows. It's becoming increasingly important for creating user-friendly interactions on the web.
<dialog open>
<p>This is a modal dialog.</p>
<button>Close</button>
</dialog>
6.3. Responsive and Accessibility Elements:
Incorporate responsive design with the <meta name="viewport">
tag, and ensure accessibility by using proper <alt>
attributes for images.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<img src="image.jpg" alt="A descriptive image">
6.4. Semantic HTML5 Elements:
Use elements like <header>
, <nav>
, and <footer>
to create accessible, well-structured content that improves search engine optimization and aids assistive technologies.
<header>
<h1>Header Content</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<footer>
<p>© 2023 Your Website</p>
</footer>
Conclusion
HTML5 offers a plethora of tags and elements that enhance web development in countless ways. By incorporating these features, both newcomers and experienced developers can create more expressive, structured, and user-friendly web pages.
Embrace the richness of HTML5, harness the power of these tags and elements, and elevate your web development to the next level.
💡Remember, the true power of HTML lies in your ability to harness these elements and create engaging, accessible, and informative web experiences.
🙋 Follow me @uiuxsatyam for more cool informational content on Web Development & FrontEnd.
If you are into UIUX, follow me on other social platforms for more amazing posts on UIUX Design, Figma, & Tech.
Linkedin : https://www.linkedin.com/in/uiuxsatyam
Twitter : https://twitter.com/uiuxsatyam
Threads : https://www.threads.net/@satyam.satx
Thanks for reading the post 🙌
Share with your developer friends, if found this useful. ↗️
Top comments (6)
Great article Satyam.
I've used
<main>
and<figure>
in many projects, but barely used / knew of the others.It came to my mind that many UI frameworks ship components for dialogs and progress bars. I wonder if they are using these HTML5 elements under the hood.
Just a quick note, I think that this article could be even better if it included images showing how the elements are rendered. Since some of them are unfamiliar to readers you might want to save them the few steps required to test them themselves.
Over all, great article and powerful list.
I will definitely be using more of those soon.
Thanks for the kind words @mosaabemam Yeah !! You are right, all these Frameworks you know like Bootstrap, Tailwind, Material are built on CSS, HTML and even JS.
Sass & Less preprocessors also compiles to plain CSS at the browser window.
In case of React Components, UI elements are created in JSX that is exactly like HTML . HTML & CSS is the backbone of Web Development 😀
Ahh! I too thought of including Preview Screen after code, to get a clear view of what is heck code is doing on browser.
Awesome article! I tried everything in it, all is very cool! I especially liked the experienced section. :) Thanks so much!
Great !!!
HTML5 it's underrated too much for me, but its potential is incredible.
Good article and thank you for share 🤗
PS I didn't know some of those tags, thanks again
Great article to keep "saved", wasn't aware we had progress and meter tags also!
thanks!