HTML Attributes

  • All HTML elements can have attributes.
  • They provide additional information about an element.
  • They are always specified in the start tag.
  • They usually come in name/value pairs like: name="value".

href Attribute

href attribute specifies the URL (web address) for a link. Here, href attribute is added to the <a> element.

Example


<html>
<body>
<a href="https://www.conceitcode.com">
conceitcode link
</a>
</body>
</html>

Output

conceitcode link

src Attribute

src Attribute specifies the URL for an image. Here, src attribute is added to the <img> element.

Example


<html>
<body>
<img src="https://www.conceitcode.com/
images/logo.png">
</body>
</html>

Output



width and height Attributes

The image size is specified with the help of width and height attributes and they all are in pixels.

Example


<html>
<body>
<img src="https://www.conceitcode.com/
images/logo.png"  
width= "20%" height="20%">
</body>
</html>

Output



alt Attribute

alt attribute specifies an alternative text to be used, when an image cannot be displayed to the user. It is also useful if the image does not exist.

Example


<html>
<body>
<img src="logo.png" 
alt="Designing and Development Company">
</body>
</html>

Output

Designing and Development Company

style Attribute

style attribute is used to specify the style of an element, like color, font, size etc. It specifies an inline CSS style for an element.

Example


<html>
<body>
<p style="color:green">ConceitCode</p>
</body>
</html>

Output

ConceitCode



lang Attribute

lang attribute is used to declare the language. The language of the document can be declared in the <html> tag.

Example

 
<html lang="en-US">
<body>
...
</body>
</html>



title Attribute

title attribute value will be displayed as a tooltip when you hover mouse over the paragraph. Here, title attribute is added to the <p> element.

Example


 <p title="I'm a tooltip">
 ConceitCode, community for developers.
</p> 

Output

ConceitCode, community for developers.



class Attribute

class attribute provides additional information of HTML tags. With same class attribute, all HTML tags will have the same styles. class attribute name is case sensitive. class attribute can also be used in inline elements like span.

Example


<html>
<head>
<style>

.leaders {
            color: #265475;
            margin: 20px;
            padding: 20px;
            border: 2px solid orange;
}

span.inline {
    font-size: 50%;
    color: #265475;
}

</style>
</head>
<body>

<div class="leaders">
<h2>Narendra Modi</h2>
<p>
<span class="inline">
Narendra Modi
</span>
 is the Prime Minister of India.
</p>
</div>

<h2 class="leaders">Donald Trump</h2>
<p>
 <center>
Donald Trump is the President of 
United States.
</center>
</p>

<h2 class="leaders">Xi Jinping</h2>
<p class="leaders">
Xi Jinping is the President of China.
</p>

</body>
</html> 

Output

Narendra Modi

Narendra Modi is the Prime Minister of India.

Donald Trump

Donald Trump is the President of United States.

Xi Jinping

Xi Jinping is the President of China.


id Attribute

id attribute provides a unique id or value for the HTML tag. In CSS, id can be written as write hash (#) character before id name. id attribute name is case sensitive. One HTML tag can only have one unique id that belongs to that single HTML tag.

Example


<html>
<head>
<style>
/* "id "uniqueHeader" */
#uniqueHeader {
  color: #265475;
  padding: 40px;
  margin: 20px;
  text-align: center;
 border: 2px solid orange;
}

.leaders {
            color: #265475;
            margin: 20px;
            padding: 20px;
            border: 2px solid orange;
}

</style>
</head>
<body>

<!-- unique tag -->
<h1 id="uniqueHeader">
HTML Attributes
</h1>

<div class="leaders">
<h2>Donald Trump</h2>
<p>
Donald Trump is the President 
of United States.
</p>
</div>

<h2 class="leaders">Xi Jinping</h2>
<p class="leaders">
Xi Jinping is the President of China.
</p>

</body>
</html> 

Output

HTML Attributes

Donald Trump

Donald Trump is the President of United States.

Xi Jinping

Xi Jinping is the President of China.

Subscribe & Get Regular Updates On Your E-mail