DEV Community

Cover image for HTML Attributes
Akhlak Hossain Jim
Akhlak Hossain Jim

Posted on

HTML Attributes

What are attributes?

In an easy way, it's the first creepy thing you will learn in HTML that won't make any sense at the time. Because, well it doesn't affect much for most of them.

But for some, it's necessary like img, a, etc.

In a professional way, as a web developer, we develop code for vast fo people and we need a beautiful and interactive website that a user will love. So we use them.

I will talk about the common attributes,

src and alt

src is an essential attribute for the <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> tag to function. So in img tag, we use something like this <img src="my_image.png" alt="" > So, src use for mentioning the URL for the image. And don't forget to use a descriptive alt tag, because if anything goes wrong with the URL it will show the text instead. So finally It will look something like this <img src="my_image.png" alt="a demo image" >. Another reason for using alt text is, the people uses a browser reader for their browsing experience the browser reader reads the alt text for an img tag.

href

It is necessary for the a tag to work. It defines the address you will be going after clicking the text within an a tag. So, we use it like <a href="https://ah-jim-seed.web.app/">my website</a>.

class and id

Oh man, These are the most common day-to-day used attributes for you as a web developer. You will use them to style an element or make that interactive. You can use in any HTML element in the opening tag like <tagName class="" id=""> ie, <div class="demo__class" id="unique_ID">. One thing to keep in mind here, the class can be repeatable on the page but the ids should be unique on that particular page and they are not required to write HTML code.

height, width, and style

These are optional and you use them in any of the tags you can use in the body tag. So, height defines the right of that element, width defines the width, and style let you use CSS within the tag itself. you can write them this way <p height="100px" width="20px" style="color: red;">...</p>

lang

Lang is used to defining the language used in the element. The value are language code, it can be used as <html lang="en">.

In the head tag we use different sets of tags and attributes we will discuss them next week.

Top comments (0)