HTML Attributes – Complete Beginner Guide
HTML attributes provide additional information about HTML elements. They are always written inside the start tag and usually come in name/value pairs like name="value".
What Are HTML Attributes?
- All HTML elements can have attributes.
- Attributes provide additional information about elements.
- Attributes are always specified in the start tag.
- Attributes usually come in name/value pairs like name="value".
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
Example
<a href="https://www.LearnHTML.edu">Visit LearnHTML</a>You will learn more about links in our HTML Links chapter.
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:
Example
<img src="img_boy.jpg">There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image hosted on another website. Example: src="https://www.LearnHTML/images/img_boy.jpg".
Note: External images might be under copyright. You may need permission to use them. External images can also change or be removed without notice.
2. Relative URL - Links to an image hosted within the website. Example: src="img_boy.jpg" or src="/images/img_boy.jpg". Relative URLs are recommended because they won’t break if you change your domain.
The width and height Attributes
The <img> tag can include width and height attributes to define image size:
Example
<img src="img_girl.jpg" width="500" height="600">The alt Attribute
The alt attribute provides alternative text for an image. This helps when the image cannot be displayed, or for users with screen readers.
Example
<img src="img_girl.jpg" alt="boy with a jacket">Example
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="boy with a jacket">You will learn more about images in our HTML Images chapter.
The style Attribute
The style attribute is used to add inline CSS styles like color, font, or size.
Example
<p style="color:red;">This is a red paragraph.</p>You will learn more about styles in our HTML Styles chapter.
The lang Attribute
The lang attribute in the <html> tag declares the language of the webpage. It helps search engines and browsers.
Example:
<html lang="en">
<body>
...
</body>
</html>
You can also include country codes: lang="en-US".
The title Attribute
The title attribute provides extra information about an element. Its value appears as a tooltip when hovering.
Example
<p title="I'm a tooltip">This is a paragraph.</p>Best Practices
Lowercase Attributes
HTML attributes can be written in uppercase or lowercase, but lowercase is recommended, especially for XHTML.
Quote Attribute Values
Quotes are recommended for attribute values. Always use quotes when values contain spaces.
Good
<a href="https://www.LearnHTML.edu/html/">Visit our HTML tutorial.</a>Bad
<a href=https://www.LearnHTML.edu/html/>Visit our HTML tutorial.</a>Example
<p title="Description of LearnHTML">Single vs Double Quotes
Chapter Summary
- All HTML elements can have attributes.
- The href attribute specifies the URL for links.
- The src attribute specifies the image path.
- The width and height attributes define image size.
- The alt attribute provides alternate text for images.
- The style attribute adds inline styles.
- The lang attribute declares the page language.
- The title attribute shows extra information as a tooltip.