HTML attributes provide additional information about an HTML element, such
as its characteristics, behavior, or appearance. Attributes are used to
modify the default behavior of an element, or to add extra information to
it. Attributes can be added to almost any HTML tag, and their values are
typically enclosed in quotes marks " ".
The starting tag of an element can have special snippets of information we can attach, called attributes.
Attributes have the key="value" syntax:
<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="Description">The href Attribute
The <a> tag defines a hyperlink. The
href attribute specifies the URL of the page the link goes
to.
<a href="https://www.labsict.com">Visit LabsICT</a>The src Attribute
The <img> tag is used to embed an image in an HTML
page. The src attribute specifies the path to the image to be
displayed.
<img src="logo.png" alt="Company Logo">The width and height Attributes
The <img> tag should also contain the
width and height attributes, which specify the
width and height of the image.
<img src="logo.png" alt="Company Logo" width="300" height="200">The alt Attribute
The alt attribute specifies an alternative text to be used,
when an image cannot be displayed. The value of the
alt attribute should describe the image.
<img src="smiley.gif" alt="Smiley face">The style Attribute
The style attribute is used to add styles to an element, such
as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
<p style="background-color:lightblue; color:white; padding:10px;">This is a styled paragraph.</p>The lang Attribute
The lang attribute specifies the language of the document's
content. It is important for accessibility and search engines.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>The title Attribute
The title attribute defines some extra information about the
element. This information is often shown as a tooltip text when the mouse
moves over the element.
<p title="I'm a tooltip">Mouse over me to see the tooltip.</p>Common Attributes
Here are some of the most common attributes used in HTML:
| Attribute | Description | Example |
|---|---|---|
| class | Specifies one or more class names for an element | class="header" |
| id | Specifies a unique id for an element | id="main" |
| style | Specifies an inline CSS style for an element | style="color:red;" |
| title | Specifies extra information about an element | title="Tooltip text" |
| hidden | Specifies that an element is not yet relevant | hidden |
| draggable | Specifies whether an element is draggable | draggable="true" |
Attribute Quotes
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single quotes are also allowed.
<a href="https://www.example.com">Link</a>
<a href='https://www.example.com'>Link</a>Sometimes you need to use quotes inside an attribute value. In this case, you can use single quotes inside double quotes or vice versa:
<p title="John's computer">Some text</p>
<p title='He said "Hello!"'>Some text</p>