5 HTML Attributes which Beginners Should Explore

A Blog on Web Development Basics

·

3 min read

5 HTML Attributes which Beginners Should Explore

Introduction

Hey Guys!! Today I am here with a new blog to learn about 5 Useful Attributes. There are many unknown Attributes which can be used to work on many common easy tasks while developing a webpage. But due to a big library, many of them become unexplored. Let me tell you about some of them.


Useful Attributes

1. Download

Ever Used The Download Attribute? I hope you have learned how to add a link to your webpage. Just make sure The Link source contains the document or video or audio or whatever it is and use the download attribute. It will specify that the target will be downloaded when the user clicks on the hyperlink.

<a href="resultRoll0025.pdf" download>Download Your Result</a>

2. Placeholder

If you explored HTML Forms, Have you ever thought about how one can put a pre-defined text inside a text box in a form like this -

Then use the following code inside a text box :

<input type="text" placeholder="Your Name Here">

3. ContentEditable

Not Kidding, But It's the attribute where I fell in love with Web Development, So Absolutely I tried to share it with you too. When you use it on a Label, In the output of the Webpage, You can edit the Content of the Element. Just open your code editor and use the following code, Then Open the output and Check if I'm Wrong.

<div contenteditable="true">You can now edit this text </div>

4. Required

Again Returning to HTML Forms. I think you have seen many Forms where you need some information required. Otherwise, the form doesn't get submitted. That Happens Because of the Required Attribute, It ensures that the element must be filled out before submitting the form.

<input type="text" name="username" required>  
<input type="submit">

Check it out once by doing it yourself.

5. Onerror

If you know how to insert an image in a webpage, you have experienced that sometimes the address of the image gets wrong, In that case, we don't get the image and the section stays blank. Here the Onerror Attribute comes. By using this, You will have a backup image for the section if anything goes wrong.

<img src="MyImage.jpg" onerror="this.onerror=null;this.src='BackupImage.jpg';"/>

Conclusion

There are many Cool Attributes which you will find while exploring HTML. These are some of them Which I Found and Loved To Share Through This Blog. If you are Learning HTML & CSS, Do Implement every one of those and see how those work.

Thanks For Reading the Blog till last. If you have learned Something, Do Comment and Share this one.