In this section, we will learn what the attributes are and how to use them in HTML.

What are Attributes in HTML?

Attributes are a set of keywords we use in the opening tag of HTML elements in order to control the behavior and properties of the HTML elements!

For example, there’s an HTML element called <img> by which we can import an image into an HTML document. Now the imported image might have a dimension other than what we might need. For this reason, this element has two attributes named width and height, by which we can control the width and height of the imported image in the HTML document.

In short, there are many attributes are out there, some of them are general (meaning they can be applied to any HTML element) and some of them are specific to only one or a few HTML elements.

As we go along, you’ll see these attributes in greater details.

HTML Attributes Syntax and Declarations

This is the syntax of calling an attribute:

<element-name attribute-name = “value”> </element-name>

As you can see, an attribute comes within the opening tag of an element. Also, if the target element has only one tag, then obviously we have one place to put the attribute.

`attribute-name`: this is the attribute that we want to set for the target HTML element.

`”value”`: This is the value that we assign to the target attribute. Note that even if the value of the target attribute is a number, we still surround that value within a pair of double quotation marks. Also, we use the equal `=` operator when assigning a value to an attribute.

Other than attributes with values, there are attributes that don’t take any value! Simply put, those attributes within the open tag of an HTML element and they will affect the target HTML element.

For example, there’s an attribute called `readonly` and if we add this attribute to an element of type <input>, the target element becomes read-only! Meaning you can’t use the target element to enter a data into the page.

Alright, now let’s move on and see the most known attributes used in HTML.

HTML title Attribute

The title attribute is used to add a title to an HTML element. The value we set for this attribute usually is a small string value describing the content of the target HTML element.

Note that browsers render the value of the title attribute in a form of tooltip and when you bring the mouse cursor on top of the content of the target element, the value of the title attribute will appear.

Example: using title attribute in HTML

See the Pen using title attribute in HTML by Omid Dehghan (@odchan1) on CodePen.

If you run this document and bring the mouse cursor on top of the rendered image, you’ll see a tooltip appear right next to the cursor that contains the value of the title attribute.

HTML Global Attributes

The global attributes are those that we can use in every HTML element out there. For example, the title attribute you saw in the last example is one of them. You can check the HTML global attributes section to see the list of global attributes in HTML.

HTML style Attribute

The style attribute is a way of styling the appearance of the target element’s content. The value we set for this attribute is basically the properties of CSS! For example, one of these properties is called `font-size` by which we can increase or decrease the size of a text content.

So if we call this attribute in an HTML <p> element and set the `font-size` property as its value for example, the font size of the text content of the <p> element will take effect and either increase or decrease in size (depending on the value we put for the font-size property).

For example:

<p style = “font-size = 30px”>content…</p>

Note that the `style` attribute is a door to the CSS world! This means if you want, you can add as many CSS properties as you want to the target HTML element, hence change its appearance entirely!

For example:

<p style = “font-size: 30px; weight: bold; color: red”> content…</p>

Remember: when adding multiple CSS properties as the value of the style attribute, they must be separated using the semicolon `;`.

Example: using style attribute in HTML

See the Pen using style attribute in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML alt Attribute

The `alt` attribute is used with the HTML <img> element. The value we set for this attribute is a text content describing the imported image! For example, if the image has two houses within nature, then this is the text content you would set for the alt attribute.

The main reason for using this attribute is to help search engines like Google to learn about the image and be able to show the image in the search result if a user was looking for such type of image!

Also, if for whatever reason our image wasn’t displayed on the page, the value of the alt attribute will be displayed then and so at least people can read what was supposed to be displayed on the page.

(Note that there is some software out there that is designed for people with an inability to see! This software is capable of reading the content of a page for these people. Now when the software comes to an image, it uses the content set in the alt attribute to describe what the image is about for their users).

Example: using alt attribute in HTML

See the Pen using alt attribute in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML width and height Attributes

The `width` and `height` attribute are used in multiple elements, including the <img>. These two attributes are in charge of setting the dimension of the target image that is being displayed on a page.

The value we set for these two attributes could be of any CSS supported units. For example, you can use px, cm, rem, em, etc.

Example: using width and height attributes in HTML

See the Pen using width and height attributes in HTML by Omid Dehghan (@odchan1) on CodePen.

As you can see, the value of the height attribute is set to 300px and the value of the width property is set to 500px.

HTML src Attribute

The `src` attribute stands for source and it is used to set the source of an external file that we want to import using HTML elements like <video>, <audio> or <img>.

The value we set for this attribute is the URL address of that external resource.

Example: using src attribute in HTML

See the Pen using src attribute in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML href Attribute

The `href` attribute is used with elements like <a> where we have a content and want to link that content to an external resource! Meaning if users click on the content within the body of the <a> element, we want the target resource to be loaded on the page. So the value we put for this attribute is the URL address of that external resource (which can be a simple audio file, a video file, a page, etc.)

Example: using href attribute in HTML

See the Pen using href attribute in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML class Attribute

The class attribute is a general attribute in that we can set it for the entire HTML elements.

We use this attribute to classify the elements of an HTML document!

For example, we might want to categorize the elements of an HTML document into three different classes like A, B and C. So now by adding this attribute to every element in the target document, and assigning either of these values to each class attribute, the elements in the document will be categorized in these three classes.

Now, using other languages like CSS or JavaScript, we can access the entire elements of a document with a specific value set for their class attribute and run an operation that will affect all those elements.

For example, using CSS, we can access all the HTML elements with the class attribute that has the value A and set a red color border for them!

Note: the class attribute is capable of taking more than one value! If we do so, then those values must be separated from each other using a white space.

Example: using class attribute in HTML

See the Pen using class attribute in HTML by Omid Dehghan (@odchan1) on CodePen.