DEV Community

rashidyaqoob
rashidyaqoob

Posted on

HTML Attributes:

HTML attributes provide additional information about he element.These are used in the opening tag of the element.
For example:

        < div class="one">
             //some text
        </div>

Here,class is the attribute which we can use for styling purposes or any other purpose.There are many other such attributes which we will define here....

Attribute href :

href attribute is used inside the anchor tags and it contains the link address.

<a href="https://www.example.com">

Attribute src:

src attribute is used to specify the image source of the image file.

<img src="Image.jpg">

Attribute alt:

alt attribute is used inside the image tag to specify what the image is about when image doesn`t get displayed.

<img src="Image.jpg" alt=" Good Image">

Attributes height and width:

height and width are used to specify height and width of the image.

<img src="Image.jpg" height="40px" width="40px">

Attribute lang:

lang attribute is used to specify the language of the html element or any other attribute.
It is very important attribute, since it is used for screen readers etc.

<html lang="en-us">

Attribute style:

style attribute is used for in-line styling purposes

< div style="color:yellowgreen;">

Attribute title:

title attribute is used to display the value inside it when the mouse hovers over that element.

< div title="This is the div element"> 
// some text
</div>

Attribute id:

The value of the id attribute is unique for the document.It can be used for any purpose like styling, getting the element in JS.

For styling purpose:

<p id="first"> Hello World </p>

In JS:

We ca get the element by using id:

const anyName=document.getElementById("first");

Attribute class:

class attribute can be used for various elements.

<p class="one">//some text</p>
<p class="one">//some another text</p>

Then, we can use class for styling purposes or for any other purpose.
We can also use it in JS

const anyName=document.getElementsByClassName("one");

Next up, we will see CSS......

Discussion (1)

Collapse
matthewsumi profile image
Matthew Sumi

How do you write the lang attribute if your site has more than one language?