10 Awesome Things HTML Tags Can Do

Did you know that there are a whopping 142 HTML elements recognized by W3C? That’s a lot! And even though some of them might be new or even obsolete, it’s easy to overlook a few that can actually be super helpful when you need them.

In a previous post, I shared some cool CSS tricks that you might have missed. But today, I want to remind you of some HTML tags that you probably didn’t know could do some amazing things:

15 Stunning Text Effects Created with CSS

Typography and beautiful text can really make your designs pop. And with CSS, you can add some serious style. Want to learn more?

1. Map Your Images

You can use HTML elements to create image maps. Image maps are images with clickable areas that can be linked to other web pages or different parts of the same document. To make specific areas of an image clickable, you can indicate the corresponding X and Y coordinates within the “ element.

It’s important to note that the clickable areas cannot be styled using CSS. If you want to add visual markers to the clickable areas, you can use image editing software to draw the markers on the image itself.

Here’s a helpful tip: If you need to find the coordinates for a specific point in an image, open the image in an image editing software and hover your cursor over that point. The software should display the coordinates for that point. For example, in GIMP, the coordinates are shown on the left side of the bottom bar.

Now, let’s move on to some input suggestions.

Here’s how you can use autocomplete to get a list of suggestions while typing:

Step 3: Highlight Text

When you want to highlight some text, you can do it using markup alone. All you have to do is enclose the text you want to highlight in the <mark> tags.

You can change the highlight color by using the background-color CSS property on the <mark> tag and the text color using the color property.

Step 4: Define Templates

With HTML5, we got a new element called <template>. It allows us to include markup that is not rendered by the browser. We can use this markup to generate dynamic content on the page using JavaScript.

Step 5: Fine Print

Fine print refers to the text of a document that is usually printed in very small size. This text contains important information like conditions, terms, restrictions, citations, and legal rights. In HTML, the tag can be used to display fine print. Starting from HTML5, the tag not only styles the text as fine print but also semantically defines it as legal disclaimers and caveats.

Now, let’s move on to a new topic.

6. Assign a Base URL

The element in HTML is really useful when you have multiple links in your document with the same domain URLs. It allows you to add a base URL to the document, which means you can use relative URLs for other links on the page as needed.

Just remember that all the relative URLs on the page will be referenced based on the base URL. So if you have a link with a different domain, make sure to assign the complete URL to it.

Now, let’s explore another topic.

7. Responsive Images

Responsive web development is all the rage these days, especially with the increasing use of mobile devices. It allows you to toggle images based on different screen sizes using markup. With the HTML5 element, you can add multiple image sources for different media within the element.

Please keep in mind that this feature currently only works in Chrome. If you’re using Firefox, you’ll need to enable the “dom.image.picture.enable” setting to “true” in the “about:config” page.

Now onto some other exciting HTML5 features!

One of these features is the color picker input element. It’s a handy tool that lets you choose a color directly on a webpage using a color picker. No more guessing hex codes or RGB values!

Another cool feature is the option group element. If you have a long list of options in a dropdown menu and want to group them together, this element is here to save the day. You can also style these groups using CSS to make them look even more organized and visually appealing.

Last but not least, we have the element. This element is used to define a section in a document. It can be used to group a set of related elements together, making it easier to style and manipulate them.

So there you have it, some awesome HTML5 features that can take your web development skills to the next level. Have fun experimenting with them!

Hey there, I have a cool fact to share with you about how web pages work!

You know, when you visit a website, a lot of things happen in the background to make it look and function the way it does. One really important thing is JavaScript, which is a programming language that helps add interactivity and functionality to web pages.

But here’s the catch: sometimes, for various reasons, JavaScript might be disabled in your browser. When that happens, certain parts of the website that rely on JavaScript won’t work properly, and that’s a bummer.

That’s where this HTML markup comes in handy. You see, this special code is rendered by your browser only when JavaScript is disabled. It’s like a little message that tells you, “Hey, JavaScript is disabled in your browser.”

Not only does it let you know that JavaScript isn’t working, but it also allows website creators to provide an alternate fallback mechanism. This means they can come up with a backup plan or an alternative way for the components on the web page to still function, even without JavaScript.

So next time you come across a website where JavaScript isn’t working, don’t panic! Just look out for this HTML markup, and know that there might be an alternate way for you to still enjoy the website without JavaScript.