HTML Tags & Attributes

If HTML is the skeleton of a webpage, then **tags** are the bones and **attributes** are the joints that give them unique properties and connect them. Understanding the distinction between these two concepts is the single most important foundation for writing HTML.

Think of it this way: a tag tells the browser **what** something is (a car), while attributes describe **how** it should be (a *red* car with a *V8 engine* and license plate *'WEB-123'*).

1. The Anatomy of an HTML Element

People often use "tag" and "element" interchangeably, but they have precise meanings.

• Opening Tag: The instruction that starts an element, like <p>.
• Content: The "stuff" inside the tags, like the text "Hello world!".
• Closing Tag: The instruction that ends an element, marked with a forward slash: </p>.
• Element: The *entire unit*—opening tag, content, and closing tag.

<-- This whole thing is the ELEMENT -->
<p class="intro">This is the CONTENT.</p>
 ^             ^
 |             |
Opening Tag   Closing Tag
    (with an attribute)
          

2. The Power of Attributes: Configuring Your Elements

Attributes are the real workhorses. They are **always** placed inside the opening tag and provide extra information or functionality. They always come in `name="value"` pairs.

Global Attributes

These can be added to *any* HTML element.

• id: Provides a **unique** identifier for an element (e.g., id="main-header"). Used for CSS targeting and JavaScript. You can only have *one* of each ID per page.
• class: Provides a **reusable** identifier (e.g., class="button-primary"). You can use the same class on many elements.
• style: Used to apply "inline CSS" directly to one element (e.g., style="color: red;"). This is generally discouraged in favor of separate CSS files.
• title: Provides extra advisory information, which browsers typically show as a tooltip on hover (e.g., title="Click to learn more").
• lang: Specifies the language of the element's content (e.g., lang="es" for Spanish). Important for accessibility and SEO.

Specific Attributes

These attributes only work on specific elements.

• href (on <a>): The "hyperlink reference." This specifies the URL the link should point to (e.g., href="https://www.google.com").
• src (on <img>): The "source." This is the path or URL to the image file (e.g., src="/images/logo.png").
• alt (on <img>): The "alternative text." This is a description of the image for screen readers and if the image fails to load. **It is critical for accessibility.**
• action (on <form>): The URL where the form data should be sent.
• disabled (on <button>, <input>): A **boolean attribute**. Its presence means "true." It grays out the element.

3. Void Elements: The Exceptions to the Rule

Some elements are "void" or "empty" because they cannot have any content inside them. They represent a single "thing." Because they have no content, they **do not have a closing tag**.

Common void elements include:

Note: You might see old code with a forward slash (e.g., <br />). This was required in XHTML, but in modern HTML5, it's optional.

4. Nesting: Building the Document Tree

HTML elements are "nested" inside each other to build a hierarchy. The rule is simple: **Last In, First Out (LIFO)**. The last tag you open must be the first tag you close.

<p>
  <strong>This text is bold.</strong>
</p>

<p>
  <strong>This text is broken.
</p></strong>

Key Takeaway: Mastering HTML is mastering the relationship between tags and attributes. Use tags to define the *meaning* and *structure* of your content, and use attributes to *configure* its behavior and provide essential metadata.