>
Loading

Attributes

  • 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".

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: