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>

W3Schools Link

TIP

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

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>

W3Schools Link

SUP

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

Syntax

<sup> supscripted text </sup>

W3Schools Link

SUB

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

Syntax

<sub> subscripted text </sub>

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>

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>

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