Skip to main content

🙋🏻 HTML Attributes

HTML attributes provide additional information about HTML elements. They are always specified in the start tag and are written in name/value pairs like name="value".

Attributes are used to define the characteristics of an HTML element and are always included in the opening tag. They provide additional information about the element, such as the element's behavior or appearance.

Here is an example of an HTML element with attributes:

index.html
<a href="https://html-mastery.github.io/">Visit HTML Mastery</a>

In the example above, the <a> element is an anchor element that creates a hyperlink to another web page. The href attribute specifies the URL of the page the link goes to. The text between the opening and closing tags is the clickable text of the hyperlink.

Common HTML Attributes​

Here are some common HTML attributes that you will encounter frequently:

  • class: Specifies one or more class names for an element (used to style elements with CSS).
  • id: Specifies a unique id for an element.
  • style: Specifies an inline style for an element.
  • title: Specifies extra information about an element (displayed as a tooltip).
  • href: Specifies the URL of the page the link goes to.
  • src: Specifies the URL of an image or other media file.
  • alt: Specifies an alternate text for an image.
  • width: Specifies the width of an image.
  • height: Specifies the height of an image.
  • target: Specifies where to open the linked document.

HTML Attributes vs. HTML Elements​

HTML attributes are used to define the characteristics of an HTML element, while HTML elements are the building blocks of HTML pages. HTML elements are delineated by tags, written using angle brackets.

Here is an example of an HTML element with attributes:

index.html
<a href="https://html-mastery.github.io/">Visit HTML Mastery</a>
http://127.0.0.1:5500/index.html
Visit HTML Mastery

In the example above,

  • <a> is the HTML element (anchor element).
  • href is the attribute name.
  • "https://html-mastery.github.io/" is the attribute value.
  • Visit HTML Mastery is the text content of the element.

Summary​

HTML attributes provide additional information about HTML elements. They are always specified in the start tag and are written in name/value pairs like name="value". Attributes are used to define the characteristics of an HTML element and are always included in the opening tag.