Html Attributes

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

Html Attributes

  • All HTML elements consist of attributes.
  • Attributes give additional information about elements.
  • Attributes are always mentioned in the start tag.
  • Attributes are usually used in name/value pairs like name=”value”

The href Attribute

The tag decribes a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

				
					<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined within a tag. The link address is written in the href attribute:</p>
<a href="https://www.mywebhostguru.com">Visit MyWebHostGuru</a>
</body>
</html>


				
			

Output:

The href Attribute

HTML links are defined within a tag. The link address is written in the href attribute:

Visit MyWebHostGuru

The src Attribute

The tag provides embedding of an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>
<img fetchpriority="high" decoding="async" src="img_mountain.jpg" width="500" height="600">
</body>
</html>



				
			

There are two ways to specify the URL in the src attribute:

1) Absolute URL – It is used to link to an external image that is hosted on another website. Example: src=”https://tutorialtest.com/images/img_mountain.jpg”.

2) Relative URL – It is used to link an image that is hosted within the website. The domain name is not included in the URL. If the URL begins without a slash, it will be relative to the current page. Example: src=”img_mountain.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_mountain.jpg”.

The width and height Attributes:

The <img> tag must consist of  the width and height attributes, that helps in specifying the width and height of the image (in pixels):

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>The width and height attributes of the img tag, defines the width and height of the image:</p>
<img fetchpriority="high" decoding="async" src="img_mountain.jpg" width="500" height="600">
</body>
</html>



				
			

The alt Attribute

The required alt attribute for the <img> tag refers to an alternate text for an image in case the image is not displayed due to any reason. Instead, the specified text will be displayed.

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img decoding="async" src="img_mountain.jpg" alt="mountains" width="500" height="600">
</body>
</html>

				
			

The style Attribute

The style attribute adds styles to an element, such as color, font, size, and more.

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img decoding="async" src="img_mountain.jpg" alt="mountains" width="500" height="600">
</body>
</html>


				
			

The lang Attribute

The lang attribute is used inside the <html> tag, to declare the language of the Web page. The main purpose of this attribute is to assist search engines and browsers.

The following example specifies English as the language:

Example:

				
					<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>



				
			

You can also add country codes to the language in the lang attribute. The first two characters specify the language of the HTML page, and the last two characters specify the country.

The following example specifies English as the language and United States as the country:

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




				
			

The title Attribute

The title attribute specifies extra information about an element.

				
					<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>