Loading

KEYPOINTS

  • In HTML Attributes provide additional information about an element.
  • It is always specified in the start tag.
  • Attributes come in Name value pairs like Name="value".

DEFINATION

An HTML attribute is a modifier that provides additional information about an HTML element. Attributes are always included within the opening tag of an element and typically consist of a name and a value, separated by an equals sign (=). For example, in the tag <img src="image.jpg" alt="description">, src and alt are attributes. The src attribute specifies the path to the image file, while the alt attribute provides alternative text that describes the image. Attributes help customize elements by defining properties such as size, style, behavior, and more.


Example: 

<!doctype html>
<html>
    <head>

       <title>Quipo House</title>
    </head>

  <body>
  <p title="description">This is a paragraph</p>
  </body>

</html>

Output:


Different Attributes Used in HTML Elements

The href Attribute:

  • The href attribute specifies the link or URL for the <a> anchor tag to link that page to the current one.

Example:

<!doctype html>
<html>

<head>
    <title>Href</title>
</head>

<body>
    <h1>Example of href Attribute</h1>
    <a href="https://www.google.com">Google</a>
</body>

</html>

Output:


The src Attribute:

  • The <src> attribute specifies the path to the image to be displayed inside the <img> tag.

Example:

<!doctype html>
<html>

<head>
    <title>src</title>
</head>

<body>
    <h1>Example of src Attribute</h1>
    <img src="https://quipoin.com/assets/img/logo.png" />
</body>
</html>
Output:



The width and height Attribute:

  • The width and height attributes are used to adjust the size of the image under the <img> tag.

Example:

<!doctype html>
<html>

<head>
    <title>src</title>
</head>

<body>
    <h1>Example of src Attribute</h1>
    <img src="https://quipoin.com/assets/img/logo.png" height="100" width="100"/>
</body>

</html>

Output:


The Alt Attribute:

  • The alt attribute provides alternate text for images. If the image cannot be displayed or is unavailable, the text in the alt attribute will be shown instead.

Example:

<!doctype html>
<html>

<head>
    <title>src</title>
</head>

<body>
    <h1>Example of src Attribute</h1>
    <img src="https://quipoin.com/assets/img/loo.png" alt="Logo" height="100" width="100"/>
</body>

</html>

Output:


The style Attribute:

  • The style attribute adds styles to the element like color,background-color etc.

Example:

<!doctype html>
<html>

<head>
    <title>style</title>
</head>

<body>
    <h1>Example of style Attribute</h1>
    <p style="color:blue">This is a paragraph in blue color</p>
</body>

</html>

Output:


The lang Attribute:

  • The lang attribute is used to declare the language of the web pages.it is declared inside the <HTML> tag.

Example:

<!doctype html>
<html lang="en">

<body> 
</body>

</html>

The title Attribute:

  • The title attribute is used to declare extra information about an element

Example:

<!doctype html>
<html>

<head>
    <title>title</title>
</head>

<body>
    <h1>Example of title Attribute</h1>
    <p title="paragraph">This is a paragraph in blue color</p>
</body>

</html>

Output: