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>
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>
SUP
The < sup > tag lifts the text a little higher. It stands for superscripted text.
Syntax
<sup> supscripted text </sup>
SUB
The < sub > tag lowers the text. It stands for subscripted text.
Syntax
<sub> subscripted text </sub>
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>
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>
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
Top comments (5)
Glad you learned something!! To be honest, I did not know map either until I started researching and I can only say I am going to be using it a lot!
Awesome post. Only if there was a
<brah>tag to go with the<sup>tagGreat post! You learn something new everyday 🙌
Thanks dude, keep rocking! 🤘