Important HTML tags (part 1) 👨🏻‍💻

Well, if you are here reading this article, it means that you are most probably interested in Web Development. Let me tell you that you’ve landed on the perfect web page, then! 👨🏻‍💻

What is HTML and why do we need it?

HTML is a standard markup language used to build web pages. With HTML, you can define the structure of the web page.

This article will cover five important HTML tags that every new Developer in town should know. I will cover again five other tags shortly after.

⚠️(UPDATE)⚠️- PART TWO is available here.

1️⃣ HTML <picture> tag

The HTML <picture> tag can contain one <img> tag and one or more <source> tags.

<picture>
    <img src="example.jpg" alt="logo">
    <source srcset="large_img.jpg" media="(min-width: 1024px)">
    <source srcset="small_img.jpg" media="(min-width: 512px)">
</picture>

This tag helps developers to display images for different screen sizes scenarios. By showing an alternative image version for smaller screens with smaller viewports.

tag serves as a fallback option in the case where none of the elements are matching the viewport and also if the browser does not support it.

2️⃣ HTML <video> tag

This HTML tag allows us to embed a media player for video playback.

<video autoplay="" loop="" controls="" width="640" height="480">
    <source type="video/mp4" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    <p>Have fun watching the video!</p>
</video>

First, you need to upload your video to a platform that you prefer.

Within the <video> tag, you can specify certain attributes, such as autoplay, loops, controls, height and width.

3️⃣ HTML <progress> tag

This HTML tag represents the completion progress of a task, you might know it under the name of “progress bar”.

<progress value="55" max="100"></progress>

It is important not to confuse the with the tag. The <meter> tag, does represent a scalar value within a known range.

4️⃣ HTML <meter> tag

As explained above, the tag is used to measure data within a known range. This can be achieved using the min and max values or with a percentage.

<!-- Measure data within a given range -->
<meter value="4" min="0" max="10">4 / 10</meter>
<!-- This also can be achieved with min and max values or with % -->
<meter value="0.2">20%</meter>

5️⃣ HTML <map> tag

This HTML tag allows us to define an image map (an image with a clickable link area).

What you have to do is to define the X and Y coordinates in the elements within the <map> tag.

<img src="countries.png" width="600" height="400" alt="Countries" usemap="#countries">

<map name="countriesmap">
    <area shape="circle" coords="15,52,92" href="romania.html" alt="Romania">
    <area shape="circle" coords="60,48,5" href="italy.html" alt="Italy">
    <area shape="circle" coords="135,48,12" href="israel.html" alt="Israel">
</map>

Comments

[Calin Baenen]

How can I define a color for <map> <shape>s?
The color property, the CSS `color property?

Thanks in advance for answering.
Cheers!

[Ionut Cornea]

Hi!

Not sure that I understand your question, but if you would like to style the <map>, you can do it in CSS, for example:

map {
color: #F21332;
}

Cheers!