HTML Attributes Explained – A Complete Guide by HQLEduTech
HTML attributes are powerful tools used to provide additional information about HTML elements. They define properties, behaviors, and styling, making web pages more functional and accessible.
What Are HTML Attributes?
- Every HTML element can have attributes.
- Attributes are always written in the start tag.
- They are usually written as name/value pairs, like:
name="value"- They enhance the meaning and behavior of elements.
Commonly Used HTML Attributes
href Attribute
Used with the <a> tag to define the destination URL of a link.
Example:
<a href="https://hqledutech.com">Explore HTML Tutorials on HQLEduTech</a> src Attribute
Used with the <img> tag to specify the source path of an image.
Example:
<img src="assets/images/html-logo.png" alt="HTML Logo"> URL Types for src:
- Absolute URL – Full web address:
src="https://example.com/logo.png"2. Relative URL – Relative to your page location:
src="images/logo.png" width and height Attributes
Define the size of an image in pixels:
<img src="images/html.jpg" width="400" height="300"> alt Attribute
Provides alternative text for an image if it fails to load or for screen readers.
<img src="missing.jpg" alt="Image not found">Important for SEO and accessibility!
style Attribute
Adds inline CSS styles directly to HTML elements.
<p style="font-size:18px; color:blue;">Styled paragraph</p> lang Attribute
Specifies the language of the HTML document.
<html lang="en-US">Helps screen readers and search engines understand your content better.
title Attribute
Gives additional tooltip-style information when a user hovers over an element.
<p title="This is a tooltip">Hover over this text</p>Best Practices for Writing HTML Attributes
Always Use Lowercase
Although HTML is case-insensitive, it’s best practice to use lowercase for attribute names.
Good:
<img src="img.jpg">Avoid:
<IMG SRC="img.jpg">Always Use Quotes Around Attribute Values
Even though quotes are optional in some cases, they help avoid syntax errors, especially when values include spaces.
Good:
<a href="https://hqledutech.com">Visit HQLEduTech</a>Avoid:
<a href=https://hqledutech.com>Visit HQLEduTech</a>Single vs Double Quotes
- Use double quotes by default.
- Use single quotes when values contain double quotes, and vice versa.
<p title='John "HQLEduTech" Dev'></p>
<p title="John 'HQLEduTech' Dev"></p>Summary Table of Key HTML Attributes
| Attribute | Description | Used With |
|---|---|---|
href | URL of a link | <a> |
src | Path to image or media | <img>, <video>, <audio> |
alt | Alt text for images | <img> |
style | Inline CSS styling | Any element |
lang | Language declaration | <html> |
title | Tooltip text | Most elements |
width, height | Image or video dimensions | <img>, <video> |
type | Data type specification | <input>, <script>, <button> |
Additional Unique Attributes Worth Knowing
| Attribute | Description |
|---|---|
id | Unique identifier for an element |
class | Assigns one or more CSS classes |
data-* | Custom data attributes for JavaScript use |
readonly | Makes an input field read-only |
disabled | Disables an element |
placeholder | Provides a hint inside input fields |
required | Specifies that input must be filled out |
checked | Pre-selects a checkbox or radio button |
Learn More at HQLEduTech
Start Learning HTML Now