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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<tag name attribute_name= " attr_value"> content </ tag name>
<tag name attribute_name= " attr_value"> content </ tag name>
<tag name  attribute_name= " attr_value"> content </ tag name>

Syntax 1: Style attribute:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<element style="value">content</element>
<element style="value">content</element>
<element style="value">content</element>

Example 1: Style attribute.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 style="color: red">Hello</h1>
<p style="color: blue">World!!</p>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 style="color: red">Hello</h1> <p style="color: blue">World!!</p> </body> </html>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<element title="text">content</element>
<element title="text">content</element>
<element title="text">content</element>

Example 2: Title attribute.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 title="Heading">Hello</h1>
<p title="Pragraph">World!!</p>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 title="Heading">Hello</h1> <p title="Pragraph">World!!</p> </body> </html>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<a href="link">Content</a>
<a href="link">Content</a>
<a href="link">Content</a>

Example 3: href attribute.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 title="Heading">Hello World!!</h1>
<p> <a href="#">Click Here</a> </p>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1 title="Heading">Hello World!!</h1> <p> <a href="#">Click Here</a> </p> </body> </html>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img src="img_name">
<img src="img_name">
<img src="img_name">

Example 4: src attribute.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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.