In simple words, HTML Attributes are the HTML Element’s property which describes HTML Elements.
Modifier of an HTML Element Type
HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them.
- In HTML syntax, an attribute is added to an HTML start tag.
- All HTML elements can have attributes.
- HTML Attributes provide additional information about an element.
- Attributes are always specified in the start tag.
- The HTML Attributes usually come in name/value pairs for Example : attribute="value"
Syntax example in attributes
<!DOCTYPE html>
<html>
<body>
<open_tag attribute="value">content to be modifies by the tag</close_tag>
</body>
</html>
Syntax example
<a href="http://www.gdatamart.com/" id="mygLink">I'm a link</a>
Example Explanation
In this element <a> contains two attributes i.e. href and id, these two attributes have their own value defined within “ ”.
- Attribute href is used to provide a link to another page or other Element.
- Attribute ID is used to uniquely identify an Element in an HTML document.
- The value of both attribute href and id is given after = of attribute within " "
- Attribute is always written in the opening tag, we never write it in the closing tag.
The href HTML Attribute
The href html attribute is a link that is defined with the <a> tag. The link address is specified in the href attribute
Describe with example
<!DOCTYPE html>
<html>
<body>
<a href="http://www.gdatamart.com/">This is a Link</a>
</body>
</html>
The src & alt HTML Attribute
The src & alt HTML Attribute used in an Image tag, HTML images tag are defined with the <img> tag.
- The filename of the image source is specified in the src attribute.
- The alt HTML is used to describe an image when an image cannot be displayed.
- The value of the attribute can be read by screen readers.
- The alt attribute is also useful if the image does not exist.
Describe with example
<!DOCTYPE html>
<html>
<body>
<img src="cute_cat.jpg" alt="sleeping cat in ground" />
</body>
</html>
Width, and Height HTML Attributes
You can set width and height in Images with HTML size attributes, which specify the width and height of the image.
Describe with example
<!DOCTYPE html>
<html>
<body>
<img src="cute_cat.jpg" alt="sleeping cat in ground" width="200" height="200" />
</body>
</html>
HTML Style Attribute
The style attribute is used to specify the styling of an element like color, font size, background color, position, etc.
Describe with example
<!DOCTYPE html>
<html>
<body>
<p style="color:red; font-size:20px;"> This is a Paragraph </p>
</body>
</html>
Lang HTML Attribute
The language is declared with the lang attribute. Declaring a language is important for accessibility applications and search engines
- The first two letters specify the language (en).
- The second letter specifies the Country.
<!DOCTYPE html>
<html lang="en-US">
<body>
<p> My first paragraph </p>
</body>
</html>
Title Attribute
A title attribute is added to the <p>, <h> element. The value of the title attribute will be displayed as a tooltip when you mouse over the Header or paragraph -
<!DOCTYPE html>
<html>
<body>
<h1 title="This is a Header"> My Firts Heading </h1>
<p title="This is a paragraph"> My first paragraph </p>
</body>
</html>
HTML Attributes
| Attribute |
Description |
| Disable |
Specifies that an input element should be disabled |
| id |
A unique id for an element |
| title |
Extra information about an element |
| Lang |
We use lang attribute to tell web browser the language of HTML document, see how we define. |
Why we use HTML Attributes?
It is very important to understand why we need HTML Attributes, Just like if we want to change our look we wear some different kinds of dresses, in the same sense to add some features in HTML Elements we use HTML Attributes.
These can be used to change default property values or to add some extra property value to the HTML Element.
For example, if there is an HTML Element and we want to provide it a height then we can use the height attribute of that HTML Element to provide a height to that HTML Element.