HTML Attributes
In this page:
<tagname attribute="value">content</tagname>The href Attribute
This attribute tells your link exactly where to go. It is like Rahul telling a Patna auto-driver his destination so he does not end up in the wrong colony.
Forgetting the href attribute turns an anchor tag into a dead link that does nothing when clicked.
- Always use a secure address starting with https when linking to external sites.
- Accepted attributes:
- href — absolute URL | relative path | #fragment | mailto:address | tel:number
- Valid on a, area and link elements
- target — _self | _blank | _parent | _top
- rel — noopener | noreferrer | nofollow ...
Example: The href Attribute
<a href="https://example.com">Visit our site</a>The src Attribute
Images cannot magically appear on a screen. The src attribute acts like a home address, guiding the browser to where the image file is actually sitting. A broken src path is one of the most common reasons images fail to display on a live site.
- Keep your project organized by putting all images in a folder named assets.
- Accepted attributes:
- src — URL of the resource (absolute or relative path)
- Valid on img, script, iframe, video, audio, source, track, embed and input type=image
- srcset — comma-separated list of image URLs with width (w) or density (x) descriptors (img and source)
Example: The src Attribute
<img src="images/photo.jpg">The alt Attribute
Sometimes the internet in Muzaffarpur acts up, or a screen reader is helping Priya read the page. The alt attribute provides a text backup if the image fails to load.
Alt text also matters for SEO, since search engines can't see an image and rely on this text to understand its content.
- Write short, helpful descriptions instead of generic words like banner.
- Accepted attributes:
- alt — short text describing the image
- alt="" — empty value marks a purely decorative image
- Valid on img, area and input type=image
Example: The alt Attribute
<img src="photo.jpg" alt="A red bicycle leaning against a wall">The title Attribute
Want to show a small tooltip when someone hovers their mouse? The title attribute is like Amit whispering a little hint into the user's ear.
Overusing the title attribute for essential information is a bad idea, since it's invisible on touch devices with no hover.
- Keep this text brief and to the point.
- Accepted values:
- title — any advisory text, usually shown as a tooltip on hover
- Global attribute: valid on every element
- Not a replacement for alt or a visible label
Example: The title Attribute
<p title="Hover to see this tooltip">Hover over this text</p>Global Attributes: class and id
class and id are global attributes available on almost every HTML element -- class groups multiple elements to share the same styling or behavior, while id uniquely identifies exactly one element on the page for CSS, JavaScript, or in-page links.
- Accepted attributes:
- class — space-separated list of class names
- id — unique identifier within the document (no spaces)
- Both are global attributes valid on every element
Example: Global Attributes: class and id
<p class="highlight">First paragraph</p>
<p class="highlight">Second paragraph</p>
<p id="intro">Unique paragraph</p>- Forgetting to wrap your attribute values in double quotes.
- Using uppercase letters for attribute names like SRC instead of lowercase.
- Confusing the spelling of src and accidentally writing scr instead.
- Attributes always sit inside the opening HTML tag.
- They use a simple name="value" format using lowercase letters.
- The href attribute directs links, while src loads image and script files.
- The alt attribute provides text descriptions for better web accessibility.
All major web browsers support these standard attributes natively out of the box.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: