HTML Attributes | Learn HTML

In general, HTML attributes are the characteristics of an HTML element. It adds additional information and property to an element.

HTML Attributes

  • An HTML element can contain one or more html attributes.
  • Attributes are used to amplify an HTML element.
  • HTML attributes are always declared in the start tag.
  • You should use lowercase while writing attributes.
  • Values for the HTML attributes should be written between quotes (“”).
  • HTML attributes have two sections one is “name” and another one is “value” separated by an equals (=) sign.
  • Attributes provide more information and property about HTML elements.

The lang Attribute

You can declare the language of the document using this lang attribute. This attribute is usually specified in the <html> tag.

Attribute uses two code as its value to declare the document language.

Common examples are “en” for English, “es” for Spanish, “fr” for French, “bn” for Bangla, and so on.

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>Page title</title>
</head>
<body>

...

</body>
</html>

The first two letters decide the language (en). If there is a dialect, use two more letters like (US).

See more HTML language code – Code Reference


The title Attribute

The title attribute gives the extra information about an element. You can use this attribute in any HTML element.

For example headings, paragraphs, images, links and so on.

It often display the value as a tooltip whenever you put your cursor over the element.

<h3 title="I'm a heading">This is a heading</h3>
<p title="I'm a paragraph">This is a paragraph.</p>

The href Attribute

HTML links are declared using <a> tag. You have to use href attribute to add link address.

You add URL in this href attribute.

<a href="https://worldtechis.com">WorldTechis</a>

The src Attribute

HTML images are declared using <img> tag.

The filename or the path of the image source is added in this src attribute.

<img src="html_tutorial.jpg">

The width and height Attributes

You can specify width and height of the image using this width and height attributes.

The image size is declared in pixels: width=”400″ means 500 pixels wide.

<img src=" html_tutorial.jpg" width="400" height="500">

The alt Attribute

The alt attribute specify the alternative text for an element.

Normally, this attribute is used in <img>; tag. If an image cannot show up, this alternative text will display in front of the user.

This text will help the user by saying what the image is about.

<img src="img_sky.jpg" alt="A beautiful shiny sky.">

The id and class Attribute

The id attribute specify the unique id for a HTML element.

The id value must be unique. You can not use same id value twice in the same HTML document.

This is mostly used for styling the element in CSS (Cascading Style Sheets).

<h2 id="myHeader">Hello World!</h2>

The class attribute specify the one or more class name for a HTML element.

You can use same class name for multiple elements. You also can declare more than one class name at a time. Use space in between two class name.

This is also used for styling the element in CSS (Cascading Style Sheets).

<h2 class="header">This is header</h2>
<p class="para1 para2">This is a paragraph.</p>

The name Attribute

The name attribute specify the name for a HTML element.

Most of the time this attribute is used in <input> and <form> tag to create a form.

The name attribute is very important when you work in the back-end of a website. It helps to create reference of an element.

<input type="text" name="firstName">

If you don’t know about input and form, don’t panic. You will learn in detail about how to create input fields and form in later tutorials.


The value Attribute

The value attribute specify the initial value for a HTML element like <button>, <input>.

You can receive and extract this value using other programming languages, e.g., JavaScript, PHP, Python etc.

<form>
   <input type="text" name="firstName" value="John"><br>
   <input type="text" name="lastName" value="Doe"><br>
   <input type="submit" value="Submit form">
</form>

The style Attribute

The style attribute specify the initial value for a HTML element, e.g., color, font, size etc.

We use this attribute to add CSS inside the HTML document. This helps to give style to the elements.

<p style="color:red">This is a paragraph</p>

You will learn basic CSS properties in our HTML tutorials and more in detail in our CSS tutorials.


Single or Double Quotes?

You can use both single and double quotes while declaring an attribute.

However, double quote around the attribute value is the most common in HTML.

You can use them in two ways:

<p title="Use 'Quotes' in Attribute">
This paragraph explains how to use quotes in the HTML attributes.
</p>

Or, another way:

<p title='Use "Quotes" in Attribute'>
This paragraph explains how to use quotes in the HTML attributes.
</p>

Time to practice:

OUTPUT