6 HTML tags you might not know

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.

MAP

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.

Syntax

<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">
</map>

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

W3Schools Link

TIP

You can use this website to generate image maps automatically!

PICTURE

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.

Syntax

<picture>
  <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;">
</picture>

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

W3Schools Link

SUP

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

Syntax

<sup> supscripted text </sup>

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

W3Schools Link

SUB

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

Syntax

<sub> subscripted text </sub>

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

W3Schools Link

BDO

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

Syntax

<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

DL

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.

Syntax:

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

{% 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