HTML Attributes:

#beginners #webdev #html

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......

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE