Attributes in HTML

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.