HTML Attributes
To provide some extra information about a particular element, attributes are used in an HTML document. An attribute is applied within the start tag of a particular element and contains two fields: name & value. Some of the basic and most used attributes are discussed below.
Syntax:
<tag name attribute_name= " attr_value"> content </ tag name>
Syntax 1: Style attribute:
<element style="value">content</element>
Example 1: Style attribute.
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 style="color: red">Hello</h1> <p style="color: blue">World!!</p> </body> </html>
Explanation:
Here, style is an attribute of both the h1 and p tags. Here the style attribute is used to add unique colors to the heading and the paragraph tags.
Syntax 2: Title attribute:
<element title="text">content</element>
Example 2: Title attribute.
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 title="Heading">Hello</h1> <p title="Pragraph">World!!</p> </body> </html>
Explanation:
Here, the title is an attribute of both the h1 and p tags.
Syntax 3: href attribute:
<a href="link">Content</a>
Example 3: href attribute.
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 title="Heading">Hello World!!</h1> <p> <a href="#">Click Here</a> </p> </body> </html>
Explanation:
Here, href is an attribute of the anchor (a) tag. This attribute is used to provide the hyperlink.
Syntax 4: src attribute:
<img src="img_name">
Example 4: src attribute.
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 title="Heading">Hello World!!</h1> <img src="img_girl.jpg" height="200" width="250"> </body> </html>
Explanation:
Here, src is an attribute of the img element. It provides the source for the image which is required to display on the browser.