6 HTML tags you might not know
Tags: html, codenewbie
Published: 2021-06-07 07:41:16

## 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](https://w3schools.com) for her. I navigated to the HTML section and opened [Visual Studio Code](https://code.visualstudio.com/) with a [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 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](https://www.w3schools.com/html/html_images_imagemap.asp)

**TIP**

You can use [this website](https://www.image-map.net/) to generate image maps automatically!

## PICTURE

The **< picture >** tag is used similar to the **<image>** 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](https://www.w3schools.com/html/html_images_picture.asp)

## 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](https://www.w3schools.com/html/html_formatting.asp)

## 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](https://www.w3schools.com/html/html_formatting.asp)

## 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](https://www.w3schools.com/html/html_quotation_elements.asp)

## 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](https://www.w3schools.com/html/html_lists_other.asp)

## 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](https://twitter.com/asciiden)