HTML Attributes

What is an HTML attribute?

An HTML attribute is like a property of HTML element, which provides more information about that particular HTML element.

Let's learn more about an HTML attribute.

  • All HTML elements can have attributes which provide the extra details about those HTML elements.
  • Attributes are added in the starting tag, not in the end tag.
  • All the attributes have some name with some value and are written as name="value".

Some Common HTML attributes

1. The href attribute

The href attribute is used in the anchor tag <a> in order to specify the destination URL of the link.

<a href="https://www.themelites.com">HTML Link</a>

Later we will discuss links and <a> tag in details.

2. The src attribute

The <src> attribute is used in the media tags like image tag <img>, audio tag <audio> etc. to specify the file address.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghgyMDMNGZ8vlDK_WHv5y3X9pdyxCMGGH7Dbl-5kNEZQGfPigYxgNdaHFUT7wI5GJYIWtSfeSUbfFR3ZIxeQRYBhXidcaavHaOsr0-G2vUlZ_eLmj3FWGHVGFtbXpV66P5UhEq8xPjntQ/w400-h225/Blogger.jpg" alt="Blogger" height="100px" width="100px" />
3. The height and width attribute

Images in HTML also have height and width attributes, which specifies the height and width of the image.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghgyMDMNGZ8vlDK_WHv5y3X9pdyxCMGGH7Dbl-5kNEZQGfPigYxgNdaHFUT7wI5GJYIWtSfeSUbfFR3ZIxeQRYBhXidcaavHaOsr0-G2vUlZ_eLmj3FWGHVGFtbXpV66P5UhEq8xPjntQ/w400-h225/Blogger.jpg" alt="Blogger" height="100px" width="100px" />

In the above example, height and width both are specified to 100px.

You can simply write height="100" it means you have specified the height as 100 pixels, as pixels is the default size unit.

4. The alt attribute

The alt attribute is used to specify the alternate text when an image is not displayed.

The value of alt thus can be read by readers and gives them the idea of the image. Also if a vision-impaired person or any other person who is listening to the webpage can hear the element.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghgyMDMNGZ8vlDK_WHv5y3X9pdyxCMGGH7Dbl-5kNEZQGfPigYxgNdaHFUT7wI5GJYIWtSfeSUbfFR3ZIxeQRYBhXidcaavHaOsr0-G2vUlZ_eLmj3FWGHVGFtbXpV66P5UhEq8xPjntQ/w400-h225/Blogger.jpg" alt="Blogger" height="100px" width="100px" />

The alt attribute is useful if the image does not exist or cannot be loaded due to slow internet connections.

Specifying the value to alt of all images in your webpage increases the SEO score of your webpage

5. The style attribute

The style attribute is used to create inline style.

We will learn about inline style in CSS Tutorials

<h1 style="color:blue">Page Heading</h1>
6. The lang attribute

The lang attribute is used to declare the language of the HTML document.

It required by all search engine to determine the language of your webpage.

Declaring the language of the webpage increases the SEO score of your webpage

<!DOCTYPE html>
  <html lang="en" >
  <head>
      <title>Page Title</title>
  </head>
  <body>
      <h1>Page Heading</h1>
      <p>Paragraph</p>
  </body>
  </html>
7. The title attribute

The title attribute is used in element to display tooltips. The value of the title attribute is displayed as a tooltip when the mouse hovers on that element.

<p title="Tooltip for paragraph">Paragraph</p>
Note:
  • In HTML it is preferred to write attributes in lower case.
  • Single quotes or double quotes are required in attributes. HTML can work without them but there will be some errors in it due to your webpage will not work properly.
Related Posts
Tags