Attributes

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: