The Hidden HTML Tags You Should Be Using
HTML tags they will never teach you.
What if I told you that all this time that your web page’s traffic didn’t increase what merely by not leveraging HTML in your web page properly? HTML is not only about the div, p, img, and a tags; these are only the tip of the iceberg and using only these tags in your web page for any type of purpose is completely wrong and will unquestionably destroy your web page’s SEO.
So let’s dive in and discover some of the most underrated HTML tags, you must know.
The <abbr> Tag
First up, the <abbr> tag, also known as the abbreviation tag. This one is used when you want to display the meaning of an acronym or abbreviation.
<abbr title="A type of snake">Python</abbr>
<abbr>` tag outputNotice the title attribute used with the <abbr> tag. This works with every tag. Now, when you hover your cursor over that abbreviation, it shows you the title that you set. I recommend putting this on buttons or icons for enhanced accessibility.
The <code> Tag
The <code> tag is extremely useful for displaying code blocks. You could use CSS and a normal <p> element to make it look like a code block, but why do that when the <code> tag exists for this exact use case?
<p>In JS we have <code>console.log("Heyo!")</code></p>
You can go ahead and use CSS to make it prettier.
The <kbd> Tag
It is similar to the <code> tag, we have the <kbd> tag, also known as the keyboard tag. It's used to showcase keyboard input.
<p>Press <kbd>Ctrl</kbd> to start.</p>
You can simply use CSS to make it look like an actual keyboard button.
The <datalist> and <option> Tags
The <datalist> and <option> tags. These are super useful for displaying suggestions or an option menu, and it's easier than you might think.
<input type="text" list="fruits">
<datalist id="fruits">
<option value="apple"></option>
<option value="orange"></option>
<option value="banana"></option>
</datalist>
Keep in mind that the list attribute’s value must match the id attribute of the <datalist> tag to make it work.
Exclusive content for passionate programmers! Subscribe to our newsletter for tips, hacks, and advice that will transform your coding journey.
The <dialog> Tag
The fifth tag is the <dialog> tag. This is a quick and easy way to create a pop-up or modal on the fly.
<dialog open>Follow Halim Shams</dialog>
Whenever you add the open attribute, the dialog box will show up.
The <details> and <summary> Tags
In the sixth, we have the <details> and <summary> tags. I'm shocked at how many people don't know these tags because they are some of the most useful out there. They are especially helpful for creating native drop-down menus with no CSS or JavaScript, ideal for FAQ sections.
<details>
<summary>Who to follow?</summary>
Halim Shams
</details>
You’ll see that if you click the little arrow, the content will appear and disappear — all without JavaScript or CSS.
The <time> Tag
The seventh tag is the <time> tag. This tag allows the browser to read time as an actual value. It helps search engines and can make your website more SEO-friendly, which is a good habit to start early on.
<p>It's <time>02:59</time> right now.</p>
The <ruby> and <rt> Tags
In the eighth spot, we have the <ruby>, <rt>, and <rp> tags. These tags come from Ruby notation, displaying a small text on top of a word or character for additional information. While mainly used for Asian typographies, you can get pretty creative with them.
<ruby>👋
<rt>ni hao</rt>
</ruby>
Note: You can add the <rp> tags for browsers that don't support Ruby notation. It's a simple way to add text on top of other text with absolutely no CSS required.
If you find this information useful, consider following me for more content like this. And don’t forget to share it with others as well.
Don’t forget to subscribe to my exclusive newsletter for My Audience: 👇
— You can follow me on X (formerly Twitter) or LinkedIn as well, where I’ll share short and incredible stuffs out there, so don’t miss those. 🚀
