🏷️ Module 1, Lecture 5: HTML Attributes
Welcome back! Today we're diving into HTML Attributes — the secret sauce that makes your elements powerful. If HTML tags are the nouns of a webpage, attributes are the adjectives that describe, modify, and give extra functionality to those tags.
🤔 What is an HTML Attribute?
Attributes are extra pieces of information that you add to an opening tag to change or define how an element behaves, looks, or connects to other resources.
⬆️ Opening Tag ⬆️ Attribute (key="value") ⬆️ Content
🧠 Golden Rules:
- Attributes are always written inside the opening tag (never the closing tag).
- They use a name="value" format (e.g.,
href="https://google.com"). - Most attributes are optional — but using them correctly unlocks the true power of HTML.
🔗 1. The href Attribute (Hyperlink Reference)
Used on: The <a> (anchor) tag.
Purpose: Specifies the URL (web address) that the link points to. Without href, an <a> tag is just plain, unclickable text.
Code
<!-- External link (absolute URL) -->
<a href="https://www.google.com">Go to Google</a>
<!-- Internal link (relative path) -->
<a href="/about.html">About Us</a>
<!-- Link to an email -->
<a href="mailto:[email protected]">Email Me</a>👀 Result
✅ Clicking a link with href navigates the user to the target destination.
🖼️ 2. The src Attribute (Source)
Used on: <img>, <script>, <iframe> (and others).
Purpose: Specifies the path or URL to the external resource (image file, JavaScript file, video, etc.) that you want to embed.
Code
<!-- Image from the internet (absolute URL) -->
<img src="https://via.placeholder.com/150">
<!-- Image from your local folder (relative path) -->
<!-- Assumes 'cat.jpg' is in the same folder as your HTML file -->
<img src="cat.jpg">
<!-- Image from a sub-folder -->
<img src="images/photo.png">👀 Result
✅ The src tells the browser where to fetch the image from.
⚠️ If the src path is wrong, you get a broken image icon (the "alt" text will show instead).
📐 3 & 4. width, height & alt (Image Essentials)
width & height
Used on: <img>, <canvas>, <iframe>.
Purpose: Specify the size of the element in pixels. This helps the browser reserve space before the image loads, preventing layout shifts.
<img
src="photo.jpg"
width=300
height=200>✅ Values are in pixels (no px unit needed).
alt (Alternative Text)
Used on: <img> (and <area>).
Purpose: Provides a text description of the image. This is critical for:
- Accessibility: Screen readers read the
alttext to visually impaired users. - SEO: Search engines use it to understand the image content.
- Fallback: Shows up if the image fails to load.
<img
src="cat.jpg"
alt="A fluffy orange cat sleeping on a sofa">📌 Combined Practical Example
<img
src="https://via.placeholder.com/200/28a745/ffffff?text=Image"
alt="A green placeholder with white text saying Image"
width=200
height=200>⬆️ 200x200 image with alt text.
🎨 5. The style Attribute (Inline Styling)
Used on: Any HTML element.
Purpose: Applies CSS (Cascading Style Sheets) rules directly to a single element. This is called "inline styling."
🧠 Quick Note: Inline styles are great for quick testing, but for real projects, you'll use a separate CSS file. However, understanding the style attribute is essential!
Code
<!-- Change text color and size -->
<p style="color: blue; font-size: 24px;">
This is a blue, large paragraph.
</p>
<!-- Add a background color and padding -->
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 8px;">
This div has a grey background and rounded corners.
</div>👀 Result
This is a blue, large paragraph.
✅ The style attribute uses CSS properties (like color, font-size, background-color).
🌍 6. The lang Attribute (Language)
Used on: Usually on the <html> tag, but can be applied to any element.
Purpose: Specifies the natural language of the content. This is crucial for:
- Accessibility: Screen readers use it to switch pronunciation (e.g., French vs. English).
- SEO: Search engines use it to serve the correct language version to users.
- Browser translation: Browsers detect it to offer translation services.
Code
<!-- On the root html tag (best practice) -->
<html lang="en"> <!-- English -->
<!-- Override language for a specific phrase -->
<p>
She said,
<span lang="fr">Bonjour le monde!</span>
</p>👀 Result
She said, Bonjour le monde!
✅ The lang="fr" tells the browser that "Bonjour le monde" is French.
🌐 Common language codes: en (English), es (Spanish), fr (French), de (German), ar (Arabic).
💬 7. The title Attribute (Tooltip)
Used on: Any HTML element.
Purpose: Provides additional information about an element. When a user hovers their mouse over the element, the text appears as a tooltip.
Code
<!-- Tooltip on a paragraph -->
<p title="This is a hidden message!">
Hover your mouse over me.
</p>
<!-- Tooltip on an abbreviation -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- Tooltip on a link -->
<a href="#" title="Click to go to the homepage">Home</a>👀 Result (Hover to see!)
Hover your mouse over me.
HTML
✅ Try it: Hover your mouse over the underlined words above. A small tooltip will appear!
💡 Pro Tip: Use title sparingly — it's great for extra context, but not all users can see it (e.g., mobile users).
📋 Quick Reference Cheat Sheet
<a href="url">
<img src="path">
<img width="200">
<img alt="desc">
<p style="color:red;">
<html lang="en">
<p title="tip">
🎯 Your 5-Minute Challenge
Build a complete "Product Card" using all 7 attributes we just learned:
- A
<div>with astyleattribute (add a border and padding). - An
<img>withsrc,alt,width, andheight. - A
<h2>with atitleattribute (e.g., "Product Name"). - A
<p>with alangattribute (e.g., set it to "en"). - A
<a>link with anhrefattribute (pointing to "#" or a real URL).
👀 Click to see a sample solution
<div style="border: 2px solid #007bff; padding: 20px; border-radius: 12px; width: 300px; text-align: center;">
<img
src="https://via.placeholder.com/200/ff6b6b/ffffff?text=Product"
alt="A red placeholder image for a product"
width=200
height=200>
<h2 title="Our best-selling item">Super Sneakers</h2>
<p lang="en">
The most comfortable sneakers you'll ever wear.
</p>
<a href="#" title="Buy now">Buy Now</a>
</div>✅ Key Takeaway: Attributes are the "superpowers" of HTML. Mastering them turns static tags into interactive, accessible, and well-connected web pages. See you in the next lecture!