May 15, 2024

No tags 😭

6 HTML tags you might not know

Check out DigitalOcean

DigitalOcean Holdings, Inc. is an American multinational technology company and cloud service provider. The company is headquartered in New York City, New York, US, with 15 globally distributed data centers. DigitalOcean provides developers, startups, and SMBs with cloud infrastructure-as-a-service platforms.

Introduction (Skippable)

A few days ago I was working on my desk and next to me was my lovely girlfriend who was interested in what I really do for a living. She already knows I am doing IT and she also knows I write some code sometimes. She asked me how she can understand if she likes writing code. I did what I had to do. I explained to her how I believe a website code is working, showed her a couple of videos, and opened w3schools for her. I navigated to the HTML section and opened Visual Studio Code with a Live Server turned on. And she started.

Little did I know, she would know more HTML tags than me in a couple of hours. It was then, when I realized HTML is actually a lot more flexible than I imagined.

Post Structure

The structure of this post is the following:

  • HTML tag name
  • Explanation of the tag
  • Usage example
  • Link to W3Schools page

Ready? Let's begin!

We will start with the most (in my opinion) interesting & useful ones.


The < map > tag is used to map an image. That means you can define areas on the image and when interacted with, you can set a different outcome. For example, you could map an image and have 2 areas, when you click on area 1 - you get to Google, when you click on area 2 - you get to Twitter.


<img src="https://asciiden.com/assets/img/profile-img.jpg" usemap="#map-name">

<map name="map-name">
    <area target="_blank" alt="ALT_TEXT" title="TITLE_TEXT" href="https://example.com" coords="93,57,305,169" shape="rect">
    <area target="" alt="ALT_TEXT" title="TITLE_TEXT" href="https://example.com" coords="144,248,253,278" shape="rect">

{% codepen https://codepen.io/denislav__/pen/XWMqQyr %}

W3Schools Link


You can use this website to generate image maps automatically!


The < picture > tag is used similar to the tag but it gives developers more flexibility. You can define different viewports on different sources, therefore showing different images on different screens without any CSS.


  <source media="(max-width: <WIDTH>px)" srcset="someimage.jpg">
  <source media="(min-width: <WIDTH>px)" srcset="someimage.jpg">
  <img src="DEFAULT_IMAGE" style="width:auto;">

{% codepen https://codepen.io/denislav__/pen/zYZjXQG %}

W3Schools Link


The < sup > tag lifts the text a little higher. It stands for superscripted text.


<sup> supscripted text </sup>

{% codepen https://codepen.io/denislav__/pen/poeVBoL %}

W3Schools Link


The < sub > tag lowers the text. It stands for subscripted text.


<sub> subscripted text </sub>

{% codepen https://codepen.io/denislav__/pen/RwpyOGG %}

W3Schools Link


The < bdo > tag is used to choose a text direction. It can override the current direction.


<bdo dir="ltr"> text from left to right </bdo>
<bdo dir="rtl"> text from right to left </bdo>

{% codepen https://codepen.io/denislav__/pen/rNyvbjR %}

W3Schools Link


The < dl > tag defines 'description list' which is one more list you can use in HTML. It pushes the list items a little to the right which in a way creates the feeling of a description.


<dt>Item title</dt>
<dd>Item description</dd>

{% codepen https://codepen.io/denislav__/pen/jOBxoER %}

W3Schools Link

About the author

I am Dennis, going by ASCIIden online and I am a DevOps engineer. However, I don't like the title of 'DevOps' to identify myself with. I rather consider myself a futurist & tech enthusiast.

I am doing IT for about 2 years now. I am striving to become a helping hand to all juniors in the industry and I am doing my best to provide good, understanding (even fun!) content for you all to enjoy.

If you want to hit me up for a project or just want to say hi, feel free to do it on my Twitter profile

Latest Comments

  • No comments yet.

More From This User

3 0 3
Read Now
1 0 2
Read Now
0 0 7
Read Now
0 0 25
Read Now
1 0 6
Read Now

© 2024 Geeklore - DEV Community RPG

Facebook Twitter Linkedin Instagram