HTML Attributes
HTML Attributes
This is the lesson 2 of 10 in the course HTML - Beginner to Advance

As we have seen many HTML tags like <h1>, <h2>, <p>, <br, and so on. All HTML tags can have attributes. Attributes can provide extra information about the HTML tag. The style attribute specify the style of the element.

An Attribute has an attribute name and attributes value.
<TagName attributeName=”attributeValue” > Texts</TagName>

<h1 style="color:red;">My first Heading</h1>

In this example h1 is tagname, style is attribute name, To format the layout of a webpage of an element we use style attribute, color:red; is the attribute value, which defines the red color for h1 tag.

HTML Attributes

  • All HTML elements can have attributes
  • Attribute are always specified in the start tag
  • Attribute provides the information about the element

Basic Attributes in HTML

The HTML has four basic attributes ID, Title, Class, and Style. We will discuss this in brief.


ID Attribute

Title Attribute

Class Attribute


Style Attribute

Uniquely Identify any Element.

Gives the element information as a tooltip.

used to specify one or more class names for an element.

used to give style like color, size, background color, etc to an HTML element.


HTML ID Attribute

HTML ID Attribute specifies the unique identity of an Element. We can use the id attribute if we have the same name tags, that should be identified, here is an example:

<body>
<h1 id="c_logo">CodeDesignerWorld</h1>
<h1 id="r_logo"> Rare Programmer </h1>

here in this example, we have two logo names, which are separated by the id.

HTML Title Attribute

The title attribute gives the element information as a tooltip when the mouse moves over the element. The title attribute can be used on any HTML element.

<body>
<h1 title="first heading">My First Heading</h1>
</body>

As you can see in the above image there is a black border-box and inside that “first heading” is written, this is known as a tooltip.

HTML Class Attribute

The class attribute specifies one or more class names for an element. The class attribute is used to point to a class in a stylesheet. A single element can have multiple class names and multiple elements can have the same class name.

<body>
<h1 class="Heading logoName">CodeDesignerWorld</h1>
<h3 class="Heading">My second Heading</h3>
</body>

HTML Style Attribute

The style attribute is used to give style like color, size, background color, etc to an HTML element. Each and every HTML element can have a style attribute. here is an example of a style attribute:

<body>
<p>This is a dummy text of first paragraph</p>
<p style="color:red; font-size: 20px">This is a dummy text of second paragraph</p>
</body>

here you can see the difference the first p tag has no style, it is using the default stylesheet and the second p tag is using a custom style like font-size is 20px and color is red.

Other Attributes in HTML

There is a lot of attributes in HTML, we will discuss some of them, Let’s talk!


Href Attribute

src Attribute

Width & Height Attribute

Alt Attribute

Specify the URL of the page.

specifies the path to the image.

Used to set the width and height of an element.

specifies an alternative text for an image.


The href Attribute

The anchor <a> tag defines a hyperlink. The href attribute is the main attribute of the anchor tag and specifies the URL of the page. The href stands for HyperText Reference.

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<a href="https://www.google.com">Visit Google!</a>

</body>
</html>

The src Attribute

The src attribute is mostly used by the <img> tag. In other, the <script> tag also uses the src attribute to link script files. The src attribute specifies the path to the image to be displayed on the webpage.

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>

<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/d2abd662597191.5a9589b09ddf5.jpg" width="200" height="200">

</body>
</html>

There are two ways to specify the URL in the src attribute:

Absolute URL

The absolute URL always includes the domain name of the site with https://, it shows that the image is hosted on another website. Here is an example of an absolute URL.

<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/d2abd662597191.5a9589b09ddf5.jpg" width="200" height="200">

Relative URL

A Relative URL links to an image that is hosted within the website. It doesn’t include the https:// path. It only shows the basic path of any image file like logos/myLogo.png etc.

<img src="logos/myLogo.png" width="200" height="200">

The width and height Attribute

Many HTML elements use the width and the height attributes that we are going to explain with the <img> tag.

<img src="logos/myLogo.png" width="200" height="200">

The alt Attribute

The alt attribute for the image tag specifies an alternative text for an image, If the image is not showing on the webpage the alt text will be displayed.

<img src="logos/myLogo.png" alt="Website Logo">

The Lang Attribute

The lang attribute specifies the language of the webpage. It is used inside <HTML> tag.

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Hope you enjoyed this!

You Might like this:

Visit our GitHub Account for practice codes Click Here!

Thank You!

Course Navigation<< Basic of HTML programming | HTML Beginner to AdvanceHTML Style | CSS Style in HTML >>
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply