As a web developer, you should know these 9 incredibly useful HTML tags and attributes.
Image by rawpixel.com on Freepik
For those who don’t know, HTML is the standard markup language. HTML plays a major role in building websites. It consists of different tags, elements, and attributes.
Here I have mentioned the nine most important tags and attributes. Every developer should be familiar with the important and effective HTML tags and attributes listed in this article.
Check out all the HTML tags and attributes below:
1. “required” attribute
Therequired attribute ensures that an input field with the required attribute is filled up before submitting the form, preventing users from submitting a form with empty fields.
It supports text, passwords, radio buttons, checkboxes, date pickers, numbers, files, email, tel, URL, and search input types.
Code Example👇🏻
<form action="#">
Username:<input type="text" name="username" required>
<input type="submit">
</form>
2. <output> tag
The<output> element displays the findings of different calculations. It is a container element that applications and websites can utilize to retrieve the results of calculations or user activities.
Example👇🏻
3. <dialog> tag
A<dialog> tag indicates a subwindow or a dialog box. It makes it simple for you to easily generate popups and modals for your website.
Example👇🏻
4. <mark> tag
A<mark> tag defines the text that needs to be underlined or marked because of its relevance to the current situation.
An example of the<mark> tag is a search result with matched keywords.
It's possible to mistakenly think that the tags <strong> and <mark> are interchangeable.
But this is not the case.
As you may know, content that is written within the <mark> tag demonstrates its relevance in the current context, whereas text written between the <strong> tag demonstrates its significance.
Example👇🏻
5. <area> element
The<area> element in the <map> tag defines clickable regions on the image. It is always written within the <area> element.
Example👇🏻
6. <noscript> tag
It is used to provide alternate information to visitors with browsers that do not support scripting or viewers whose browsers have scripts disabled.
You can use it in both the <head> and the <body>.
Code Example👇🏻
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript! </noscript>
Note that a browser that does not support JavaScript will not display “Hello World!” but text inside the **<noscript>** element.
7. The alt Attribute
This is used to show alternative text if a photo cannot be displayed for some reason. A slow internet connection, an image source problem, or the use of a screen reader could all be the reason for the picture.
It also improves SEO (search engine optimization) and enhances search engine rankings.
Code Example👇🏻
<img src="img_girl.jpg" alt="Girl with a jacket">
8. <ins> and <del> tags
Removed text in a document is represented with the <del>tag. For erased text, most browsers show a strikethrough on text.
In a document, the newly inserted text is identified by the <ins> tag. The text is highlighted in this instance by the browser.
Code Example👇🏻
<p> My favorite color is <del> blue </del><ins>red</ins>!</p>
9. HTML Favicon
Favicons are small (16x16 pixels) images displayed next to a website’s title in the browser tab. It helps users remember your site better, whether in the search history or in the bookmarks.
Since an image is worth a thousand words, you have a better chance of receiving visitors than websites without favicons.
Example👇🏻
Wrap Up
That’s a wrap! :)
I really hope that you find it helpful.
If you are interested in learning web development, make sure to follow Ishrat Umar, as I’m planning to share more interesting stories in the coming days.
You can also find me on Twitter , GitHub , Hashnode, and DEV.to.