Useful Advanced HTML Attributes
HTML and CSS are important aspects of frontend development. Developers around the world do wonders with CSS and JavaScript, but trust me HTML shouldn’t be underestimated.
HTML is actually capable of doing a lot of things easily which can be insanely helpful to developers in making their work fun and stress-free. Let’s have a look…
Download
You can use this attribute when you want your users to download the link directly instead of navigating to the file.
<!DOCTYPE html>
<html>
<body>
<h1>The a download attribute</h1>
<p>Click on the image to download it:<p>
<a href=”/images/myw3schoolsimagesample.jpg” download>
<img src=”/images/myw3schoolsimagesample.jpg” alt=”W3Schools” width=”105" height=”143">
</a>
</body>
</html>
Tip: In case if you want to set some other name to the file that you are setting up for download, then you can write download=” filename ” with whatever name that you want to call it.
<a href=”link/to/your/file” download=”filename”>Download link</a>
Tooltip
The “title” attribute helps in easily adding a tooltip that can provide extra information to your users.
<a href=”link/to/your/file” title=”This file you can download directly “ download=”filename”>Download link</a>
Word Break Opportunity
Do you like it when HTML breaks words where it’s not supposed to? Nah, me neither!
Using <wbr>, you can easily find the points where it is okay to break words.
When you have a continuous word, it is going to resize the text. Simple!
Content Editable
You can make any content editable by setting the contenteditable attribute to true.
You don’t have to worry if it’s a div or a p, it will become editable.
<h1 contenteditable=”true”>Content Editable</h1><p contenteditable=”true”>Did you know? </p> You can click above to make edits, the way you want.</p>
Lazy Loading
You can load images on-demand, popularly called lazy loading by setting the loading attribute to ‘lazy’. This is a very simple but effective optimization technique that loads only the section that is visible to the user and the other images are loaded later, as per the user’s need.
To show an image, generally, we write an image tag like this:
<img src=”url”/>
But now since you want the images to load lazily, you just have to add loading attribute with lazy value:
<img src=”url” loading=”lazy”/>
Check out my bestselling and highest rated ReactJS course on Udemy —
Mastering React With Interview Questions,eStore Project-2021
Basic Accordion
You can create a very basic yet easy accordion by using the details and summary semantic elements.
<details>
<summary> </summary>
</details>
Spellcheck
The spellcheck attribute, when set to true, tells the browser that the user input in this element has to be checked for grammar and spelling mistakes.
<h1>Spellcheck</h1>
<p contenteditable=”true” spellcheck=”true”>This is a paragraph. It is editable. Try to change the text.</p>
Text direction
This attribute is very useful when we are dealing with languages that don’t follow the left to right rule like English.
By writing dir=”auto” the browser will change the text alignment as per the language of the content.
<p dir=”auto”>This text is following dir=auto</p>
Base URL
Often it happens that you make calls to a common domain various times on your website.
Now, in HTML you can use the <base> element to set a base URL.
If there are multiple images, then you would have to write each one of them.
The section of URL which is getting repeated can be placed inside the base url so that portion is automatically joined with <a> tag’s href. If you have used libraries like Axios, it is a very common practice to set a base URL which will help you in writing cleaner codes.
HTML is just not used to set up the structure of your data or document. With these useful advanced HTML attributes, you can do much more directly to your HTML file.
Which feature do you use most in your day-to-day work? Let me know in the comments section.
About me:
Founder and CEO of an IT company in India, I have more than 24 years experience of in dealing with people, processes, and codes. I started online training for my students when it was not in fashion and have trained more than thousands of students/working professionals personally which has helped them to secure awesome jobs or even start their own business.
I am also been an active corporate trainer for several years now and have been consulting with top Fortune 500/1000 companies to streamline their development projects efficiently. My goal is to share knowledge with a primary focus on advanced tools & techniques, projects, and standard programming practices to help my students understand the basics and fundamentals and make awesome technological implementations.
