HTML Attributes

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.

Note: Always use a secure address starting with https when linking to external sites.

Warning: If you leave this empty, your users will get stuck on a broken page.

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.

Note: Keep your project organized by putting all images in a folder named assets.

Warning: A tiny spelling mistake in your image path will display a broken image icon.

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.

Note: Write short, helpful descriptions instead of generic words like banner.

Warning: Skipping this attribute makes your website difficult to use for visually impaired visitors.

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.

Note: Keep this text brief and to the point.

Warning: Mobile users cannot hover, so do not put crucial instructions inside this attribute.

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.

Example: Global Attributes: class and id

<p class="highlight">First paragraph</p>
<p class="highlight">Second paragraph</p>
<p id="intro">Unique paragraph</p>