What are HTML Attributes

Read Time:9 Minute, 25 Second

Table of Contents

An attribute is a piece of information that determines the properties of a field. In HTML, attributes provide more information about an element. They define the behavior of an element. They are always defined in the opening tag of an element, and all attributes are made up of two parts: a Name and a Value.

Name – The name defines the property you want to set. For example, an element <img> carries an attribute src, which defines the location of the image.
Value – the value defines what you want the value of the property to be set. For example, an element <p> carries an attribute align to indicate the alignment of text.

To set the value of the attribute, it can be center, left, right. This means that the alignment of the text can either be any of the above. Values are enclosed between double quotes or single quotes.

Syntax of an Attribute

<element attribute_name = "value"> The content of the element goes here </element>

Attributes Categories

  1. Core attributes- the four main core attributes are: Title, Id, Class, Style
  2. Generic attributes– they are supported by most elements. Generic attributes are the most common attributes in HTML.
  3. Event attributes– they specify the script to be run
  4. Internationalization attributes – these attributes include dir,lang and xml:lang

Core Attributes

Let’s look at the 4 core attribute types with an example.

The Title Attribute

The title attribute gives the title an element. They can also be used to define some extra information about an element. It’s used as a text tooltip in most browsers. If you hover on the element content, it displays the title.


<head> <title>This is my title</title>
<body> <h1 title="Test the title"> This is heading title</h1> <p title="Best title">Test paragraph title</p>

The Id Attribute

The Id attribute is used to identify an element within the HTML page uniquely. This makes it easy while styling the element with CS or javascript. The reason why one might choose to include an Id attribute. If one needs to identify just one element with a unique identifier or if you have two elements of the same name. You want to distinguish them while styling.


To access the Id attribute in CSS, we start with an # sign.


<head> <title>The Id attribute</title> <style type="text/css"> #paragraph1 { text-decoration: underline; } #paragraph2 { border: solid; } </style> </head>
<body> <p id="paragraph1">This is the first id attribute</p> <p id="paragraph2">This is the second id attribute</p>

The Class Attribute

The class attribute is used to associate a group of elements to the same CSS styling. Unlike the Id, the class attribute does not have to be unique.
To access the class attribute in CSS, we start with an “.” sign.


<head> <title>The class attribute</title> <style type="text/css"> .all_label { font-size: 14px; } .all_inputs { border-color: blue; border-radius: 5px; } </style>
<body> <form> <label class="all_label"> First Name</label><br> <input type="text" name="Name" class="all_inputs"><br> <label class="all_label">Email</label><br> <input type="Email" name="Email" class="all_inputs"><br> <label class="all_label">Password</label><br> <input type="Password" name="Password" class="all_inputs"><br> </form>

Style attribute

The style attribute allows inline styling of an element. It’s typically used to override any style set globally.


<head> <title>The style attribute</title>
<body> <p style="text-align: center;">Inline styling example</p>

Internationalization attributes

They are categorized into three types: dir, lang, and xml:lang.


The Dir Attribute

Allows one to indicate the directional flow of the text. It can be ‘ ltr‘ left to right, which is the default’ or rtl ‘right to left.’


<html dir="rtl">
<head> <title> Direction of text</title>
<body> <p> Lets take a quick look at the directional of the text</p

The Lang Attribute

Indicates the main language used in a webpage. This is not mostly used since it was an early version and now is being replaced. It’s always included inside the <html>. The Lang attribute is meant to help search engines and browsers.


<!DOCTYPE html>
<html lang="en">
...body of the page goes there

The Xml:Lang Attribute

Its a XHTML replacement of the lang attribute. Its value should be an ISO-639 country code.


<a href="https://www.codeunderscored.com/">A link to codeunderscored.</a> 

Generic attributes

The align attribute

It specifies the alignment or position of an object in relation to the page and the surrounding elements. It can be the alignment of a paragraph, image, table, etc. The align attribute values include; center, left, right.


<head> <title>Alignment</title> </head>
<body> <p align="center">This is the center alignment <br><img src="https://www.codeunderscored.com/wp-content/uploads/2020/11/sample_image.png" height="100px" width="100px"></p> <p align="left">This is the left alignment<br><img src="https://www.codeunderscored.com/wp-content/uploads/2020/11/sample_image.png" height="100px" width="100px"></p> <p align="right">This is the right alignment<br><img src="https://www.codeunderscored.com/wp-content/uploads/2020/11/sample_image.png" height="100px" width="100px"></p>

The Src Attribute

The src attribute specifies the location of external resources. It can be used on the following HTML elements <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>

There are two ways to specifies the URL in the src attribute:
Absolute URL – links to an external image is hosted within a website.
Relative URL -links to an image is hosted within a website.



<audio controls> <source src="something.ogg" type="audio/ogg"> <source src="something.mp3" type="audio/mpeg">
Your browser does not support the audio element.

The href Attribute

It’s the main attribute of the anchor tag. Specifies the URL of the page the link goes to. The href attribute can be used in some elements such as <a>, <area>, <base>, <link>.

<a> : Specifies the links destination


<a href="http://www.codeunderscored.com/">Visit Code Underscored</a>

<link> : It links to an external stylesheet.

<link rel="stylesheet" type="text/css" href="code.css">

<base> : Can be used in relative URLs on a page.

<base href="http://www.codeunderscored.com/">

The alt attribute

Specifies an alternate text of an image. The text added typically describes the image. Use alt=”” if the image is only for decoration.



<img alt="loremipsum" src="https://www.codeunderscored.com/wp-content/uploads/2020/11/sample_image.png">

The bgcolor attribute

It’s used to set the background color of an element. It uses either:
RGB values :rgb(red, green, blue) example rgb(0, 255, 0)
Hexadecimal values: Red = #FF0000, Green= #00FF00 , blue = #0000FF
HSL Value:hsl(hue, saturation, lightness) example hsl(0, 100%, 50%)
One can also use the color names such as white, blue, red etc.


<ir="ltr" lang="en-us"> <head> <title>Bgcolor</title> </head>
<body bgcolor="white"> <table> <tr bgcolor="#FFFF00"> <td>This Row is Yellow!</td> </tr> <tr bgcolor="hsl(0, 0%, 24%)"> <td>This Row is Gray!</td> </tr>

The Width and Height attribute

The width specifies the horizontal length of objects in an HTML page while the height specifies the vertical length.



<body> <img src="https://www.codeunderscored.com/wp-content/uploads/2020/11/sample_image.png" height="100px" width="100px" </body>

The background image

Unlike the bgcolor background can place a background image behind an element. It uses the URL to set the background image.


<body background="https://www.codeunderscored.com/wp-content/uploads/2020/11/sample_image.png">
<table height="300" width="300">
<tr><td>This content has a background image</td></tr>


In this tutorial we have covered HTML attributes, to give a deeper understanding of the HTML attributes, lets write a summary code to cover the above discussed.


<!DOCTYPE html>
<html dir="ltr" lang="en-us"> <head> <title> Conclusion</title> <style type="text/css"> ul{ display: inline; width: 70px; height: 30px; margin: 2opx; } li{ display: inline; padding: 20px; } .all_label { font-size: 14px; } .all_inputs { border-color: blue; border-radius: 5px; } </style> </head>
<body> <ul> <li>Home</li> <li>contact</li> <li>services</li> <li>career</li> </ul>
<div> <img src="https://www.codeunderscored.com/wp-content/uploads/2020/11/sample_image.png" height="400px" width="400px"> </div> <h4> Please fill in the form details below</h4> <form> <label class="all_label"> First Name</label><br> <input type="text" name="Name" class="all_inputs"><br> <label class="all_label">Email</label><br> <input type="Email" name="Email" class="all_inputs"><br> <label class="all_label">Password</label><br> <input type="Password" name="Password" class="all_inputs"><br> </form> </body>


Source: https://www.codeunderscored.com/what-are-html-attributes/

You might also like this video