Loading...
HTML Attributes

HTML Attributes

In this tutorial, we will learn about the Attributes and different types of attributes in HTML with the help of examples.


Attributes

  • HTML attributes provide extra or additional information about HTML elements.
  • Attributes are placed inside the opening/start tag.
  • Attributes provide additional information about elements.
  • All HTML elements can have attributes.
  • Attributes names and attribute values are case-insensitive.

Attribute Parameters

All attributes are made up of two parameters:

  • A name
  • A value

Name define the property you want to set. And value defines the value of the property. Every name has some value that must be written inside quotations. both parameters define the properties of the element and is placed inside the opening tag of the element.

Example

<p align = "center">This is first paragraph.</p>

Here, align is the name of attribute and center is the value of that attribute.


lang Attribute

A The lang attribute always includes inside the <html> tag, to indicate the main language used in a document/web page. The value of the lang attribute is ISO-639 standard two-character language codes. check the complete list of HTML Language Codes: ISO-639.

Example :

<!DOCTYPE html>
<html lang = "en">
  <head>
    <title>Document</title>
  </head>
  <body>
    This document uses the English language.
  </body>
</html>

Output

This document uses the English language.

We can also add country code to the language code in the lang attribute. So, the first two characters define the language of the document, and the last two define the country.

Example :

<!DOCTYPE html>
<html lang = "en-US">
  <head>
    <title>Document</title>
  </head>
  <body>
    This document uses the English language of the US.
  </body>
</html>

Output

This document uses the English language of the US.

href Attribute

The href attribute specifies a link to the address of any page. This attribute used inside the <a> tag, the link put inside the href attribute gets linked to the text displayed inside the <a> tag.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <a href = "https://www.algbly.com">Visit Algbly</a>
  </body>
</html>

Output

Visit Algbly

src Attribute

The src attribute specifies the address of the image. This attribute used inside the <img> tag.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <img src = "./html.jpg">
  </body>
</html>

Output

html.png

alt Attribute

The alt attribute is used to show alternate text for an image if the src attribute fails to display the image due to poor connection, or error in src attribute.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display">
  </body>
</html>

Output

image did not display

You can learn more about images in our HTML Images Tutorial.


width and height Attributes

These attributes is used to adjust the width and height of an image(in pixels), inside the <img> tag.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display" width = "50px" height = "50px">
  </body>
</html>

Output

image did not display

title Attribute

The title attribute is used to display the description of an element on hovering the mouse over it.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h3 title = "Hello!">Good Morning</h3>
  </body>
</html>

Output

Good Morning

Hover over the text Good Morning to see the effect.


style Attribute

The style attribute is used to provide various CSS (Cascading Style Sheets) style to an HTML element, such as color, font, size, and more.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h3 style = "color : blue">Good Night</h3>
  </body>
</html>

Output

Good Night


Next Tutorial

We hope that this tutorial helped you develop better understanding of the concept of Attributes in HTML.

Keep Learning : )

In the next tutorial, you'll learn about HTML Headings.

- Related Topics