CodeX Cider Logo
CodeX Cider
HTML Topics
HTML Module📖Lesson 3 of 18

HTML Attributes

Today we look at HTML attributes, the name="value" details that live in the opening tag and tell the browser more about an element, such as where a link should go.

⏱️~5 min read🟢Beginner⚡Jump to Code Editor
  1. 1

    What an attribute is

    In the last lesson we built complete pieces called elements. An opening tag starts a piece, but sometimes the tag alone is not enough. A link needs a destination. A button may need a name you can point to later. Those extra facts are attributes.

    An attribute is a name="value" pair written inside the opening tag. In the example below, href="https://codexcider.com" is one attribute. The name is href. The value is the URL.

  2. 2

    Why Plain Tags Aren't Enough: Giving Elements Context

    Imagine you write <a>Visit CodeX Cider</a>. The browser knows this is a link, but it does not know where the click should go. Without a destination, the link is almost useless.

    So HTML lets you attach small labelled facts to the opening tag. Put the address in href, give the element a unique name with id, put it in a group with class, or add hover text with title. The tag stays the same. The attributes change the details.

  3. 3

    How Browsers Parse Key-Value Pairs inside Opening Tags

    The browser reads attributes when it reads the opening tag. It does not look for them in the closing tag. Write href, id, class, and title on <a ...>, then write the link text, then close with </a>.

    Two names matter for later work with CSS and JavaScript. id points to one element on the page. class can be shared by many elements. That is why you never repeat the same id twice on one page.

  4. 4

    Hands-On: Inspecting a Hyperlink with Multiple Attributes

    The example below is one link with four attributes. Read the code once, then look at the browser pane. Hover the link to see the title tooltip.

  5. 5

    The Golden Rule: Attributes Always Live in Opening Tags

    In HTML the group attribute is written class, not className. className belongs to React. If you put attributes on the closing tag, or invent a name the browser does not know, that detail is ignored or the page behaves oddly.

id (Unique Fingerprint)
id="primary-nav"

Must be 100% unique across the entire HTML page. Never repeat the same ID twice. Crucial for JavaScript targeting and in-page anchor navigation.

class (Shared Family)
class="btn btn-primary"

Can be shared across any number of elements on the same page. Allows you to style repeated UI patterns (cards, buttons, alerts) consistently.

What you'll learn

  1. 1Attributes are name="value" pairs on the opening tag
  2. 2Why a plain <a> needs href to become a real link
  3. 3How the browser reads attributes with the opening tag
  4. 4id is unique; class can be shared
  5. 5title shows a tooltip on hover
Interactive Live Editor
link.html
Click & type to editHTML5
Browser

Line by line

  1. id="main-cta"

    A unique name for this one element on the page. Use it later in CSS as #main-cta, or in JavaScript. Only one element may have this id.

  2. class="btn"

    A reusable group name. Many links or buttons can share class="btn". In HTML the attribute is class, not className.

  3. href="https://codexcider.com"

    The destination URL. Without href, an <a> is not really a working link.

  4. title="Go to CodeX Cider"

    Extra text that appears when someone rests the mouse on the link. It is a small tip, not the main label.

Try it yourself

Make a link to https://www.google.com with id="search-link", class="btn", and title="Open Google". Put every attribute in the opening <a> tag.

Hint: Opening tag holds the attributes. Then the link text. Then </a>.

Common mistakes

  • 1.Writing className in an HTML file. That name is for React. In HTML the attribute is class.
  • 2.Using the same id twice on one page. An id must be unique. Use class when many elements share a group.

Interview prep (Click to reveal)

Q: What is an HTML attribute and what is its syntax?↓

An attribute provides additional metadata or configuration to an HTML element. It is written as a name="value" pair inside the opening tag (e.g. href="https://codexcider.com").

Q: What is the crucial difference between id and class?↓

An id must be unique within the entire document, used for single-element hooks (in CSS with #id or JS with getElementById). A class can be assigned to multiple elements to apply shared styles (in CSS with .classname).

Q: Can attributes be placed on a closing tag?↓

No, never. Attributes are strictly placed on the opening tag (or self-closing tag). Putting attributes inside a closing tag (like </a href="...">) is invalid HTML and completely ignored by browsers.

Previous lessonHTML ElementsNext lessonHeadings & Paragraphs