HTML Attributes
In this tutorial, we will learn about the Attributes and different types of attributes in HTML with the help of examples.
Attributes
- HTML attributes provide extra or additional information about HTML elements.
- Attributes are placed inside the opening/start tag.
- Attributes provide additional information about elements.
- All HTML elements can have attributes.
- Attributes names and attribute values are case-insensitive.
Attribute Parameters
All attributes are made up of two parameters:
- A name
- A value
Name define the property you want to set. And value defines the value of the property. Every name has some value that must be written inside quotations. both parameters define the properties of the element and is placed inside the opening tag of the element.
Example
<p align = "center">This is first paragraph.</p>
Here, align is the name of attribute and center is the value of that attribute.
lang Attribute
A The lang attribute always includes inside the <html> tag, to indicate the main language used in a document/web page. The value of the lang attribute is ISO-639 standard two-character language codes. check the complete list of HTML Language Codes: ISO-639.
Example :
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Document</title>
</head>
<body>
This document uses the English language.
</body>
</html>Output
This document uses the English language.
We can also add country code to the language code in the lang attribute. So, the first two characters define the language of the document, and the last two define the country.
Example :
<!DOCTYPE html>
<html lang = "en-US">
<head>
<title>Document</title>
</head>
<body>
This document uses the English language of the US.
</body>
</html>Output
This document uses the English language of the US.
href Attribute
The href attribute specifies a link to the address of any page. This attribute used inside the <a> tag, the link put inside the href attribute gets linked to the text displayed inside the <a> tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href = "https://www.algbly.com">Visit Algbly</a>
</body>
</html>Output
Visit Algbly
src Attribute
The src attribute specifies the address of the image. This attribute used inside the <img> tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<img src = "./html.jpg">
</body>
</html>Output
alt Attribute
The alt attribute is used to show alternate text for an image if the src attribute fails to display the image due to poor connection, or error in src attribute.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<img src = "./html.jpg" alt = "image did not display">
</body>
</html>Output
image did not display
You can learn more about images in our HTML Images Tutorial.
width and height Attributes
These attributes is used to adjust the width and height of an image(in pixels), inside the <img> tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<img src = "./html.jpg" alt = "image did not display" width = "50px" height = "50px">
</body>
</html>Output
title Attribute
The title attribute is used to display the description of an element on hovering the mouse over it.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h3 title = "Hello!">Good Morning</h3>
</body>
</html>Output
Good Morning
Hover over the text Good Morning to see the effect.
style Attribute
The style attribute is used to provide various CSS (Cascading Style Sheets) style to an HTML element, such as color, font, size, and more.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h3 style = "color : blue">Good Night</h3>
</body>
</html>Output
Good Night
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Attributes in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Headings.