HTML Attributes: Syntax, Key Attributes, Quoting Rules & Best Practices

Welcome to Lesson 4! Over the last three lessons you have built a solid foundation:

• Lesson 2 · You wrote your first real HTML pages using core tags
• Lesson 3 · You understood exactly what an HTML element is and how nesting works

Now it is time to fully master HTML attributes · the extra instructions you write inside opening tags to give elements more power, behaviour, and meaning.

You have already used attributes. Every time you wrote href="..." in a link or src="..." in an image, you used an attribute. But in this lesson you will truly understand them · what they are, why they exist, all their rules, and how to use each major one with confidence.

By the end of this lesson you will be able to:

• Define what an HTML attribute is and explain its syntax precisely
• Write attributes correctly using the name="value" format
• Explain and use the seven most important HTML attributes: href, src, width, height, alt, style, lang, and title
• Understand the difference between absolute and relative URLs in the src attribute
• Know the quoting rules for attribute values and when each applies
• Follow professional best practices (lowercase, always quote)
• Diagnose and fix all common attribute mistakes

Real-world connection: Attributes are the knobs and dials of HTML. The tag says what the element is · the attributes control how it behaves. A link without href goes nowhere. An image without src shows nothing. A page without lang confuses search engines and accessibility tools. Mastering attributes means mastering control.

Quick Recap · What Is an Element? What Is a Tag?

From Lesson 3:

• A tag is just the label: <a> or </a>
• An element is the full package: <a href="...">text</a>
• Attributes live inside the opening tag · never in the closing tag

You have already seen attributes used. This lesson explains every rule governing them.

The Definition

An HTML attribute is extra information added to an HTML element's opening tag that modifies or extends the element's behaviour, appearance, or meaning.

Think of a tag as a basic instruction and its attributes as the settings for that instruction.

Analogy: Imagine ordering a coffee. The coffee type (latte, espresso) is like the tag · it names the thing. The customisations (size: large, milk: oat, sugar: none) are like attributes · they specify exactly how you want that thing to be. Without the customisations, you just get a default coffee. With them, you get exactly what you need.

The Syntax · Name/Value Pairs

Every attribute follows this exact structure:

name="value"

Where:

• name · the name of the attribute (what setting you are configuring)
• = · separates the name from the value
• "value" · the value of that setting, always wrapped in quotes

Attributes are placed inside the opening tag, after the tag name, separated by a space:

<tagname name="value">Content</tagname>

Here is a real example:

<a href="https://www.w3schools.com">Visit W3Schools</a>

Breaking it down:

<a   href="https://www.w3schools.com"   >Visit W3Schools</a>
 │        │                      │      │
 │        attribute name         │      │
 │                               │      │
 tag name                    value      closing bracket of opening tag

Multiple Attributes on One Element

An element can have more than one attribute. Simply separate them with spaces inside the opening tag:

<img src="photo.jpg" alt="A smiling student" width="300" height="200">

This <img> element has four attributes:

• src="photo.jpg" · the image file to display
• alt="A smiling student" · the text description
• width="300" · 300 pixels wide
• height="200" · 200 pixels tall

Order does not matter. You can write attributes in any order within the opening tag and they will work identically. However, consistency and readability matter · develop a habit of writing attributes in a logical order (e.g., src before alt before sizing attributes).

Four Universal Rules for Attributes

Before learning individual attributes, memorise these four rules:

1. Attributes always go in the opening tag · never in the closing tag
2. Attributes are written as name/value pairs · name="value"
3. Attribute values must always be quoted · use "double" or 'single' quotes
4. Attribute names should always be lowercase · href not HREF

We will look at the quoting and case rules in detail in Part 7.

What Is href?

The href attribute belongs to the <a> (anchor) tag. It stands for Hypertext REFerence and holds the URL (web address) of the destination the link navigates to when clicked.

<a href="https://www.w3schools.com">Visit W3Schools</a>

Without href, the <a> tag renders as styled text but does nothing when clicked. href is what makes a link actually go somewhere.

Simple Example · A Basic Link

<!DOCTYPE html>
<html>
<body>
<h1>My Favourite Resources</h1>
<a href="https://www.w3schools.com">Visit W3Schools</a>
</body>
</html>

Expected output in browser:

My Favourite Resources

Visit W3Schools    ← blue, underlined, navigates to w3schools.com when clicked

Second Example · Links in Context

<!DOCTYPE html>
<html>
<body>
<h1>Learning Resources</h1>
<p>Start with <a href="https://www.w3schools.com">W3Schools</a> for tutorials.</p>
<p>Practice projects at <a href="https://www.github.com">GitHub</a>.</p>
<p>Ask questions at <a href="https://stackoverflow.com">Stack Overflow</a>.</p>
</body>
</html>

Expected output in browser:

Learning Resources

Start with W3Schools for tutorials.
Practice projects at GitHub.
Ask questions at Stack Overflow.

(W3Schools, GitHub, and Stack Overflow each appear as clickable blue links within their sentences.)

Thinking prompt: What happens if you write href="" (an empty value)? The browser treats it as a link to the current page · clicking it just reloads the same page.

Common Beginner Mistakes with href

<!-- WRONG 1: Missing https:// — browser looks for a local file -->
<a href="www.google.com">Google</a>
<!-- WRONG 2: href in the closing tag — attributes only go in opening tags -->
<a>Visit Google</a href="https://www.google.com">

<!-- WRONG 3: Space between attribute name and = sign -->
<a href ="https://www.google.com">Google</a>
<!-- CORRECT: href in opening tag, no spaces around =, full URL -->
<a href="https://www.google.com">Google</a>