06. Tags and Attributes

Introduction

HTML tags and attributes are the fundamental building blocks of every HTML document. Tags define the structure and meaning of content, while attributes provide additional information about elements. Mastering tags and attributes is essential for creating well-structured, semantic HTML.

HTML Tags

HTML tags are keywords surrounded by angle brackets that tell the browser how to display content. Tags come in pairs (opening and closing) or can be self-closing.

Opening and Closing Tags

Most HTML elements require both an opening and closing tag:

<p>This is a paragraph.</p>

• Opening tag: <p> - starts the element
• Content: The text or other elements inside
• Closing tag: </p> - ends the element (note the forward slash)

Self-Closing Tags

Some elements don’t have content and are self-closing:

<img src="image.jpg" alt="Description">
<br>
<hr>
<input type="text">

In HTML5, the closing slash is optional for self-closing tags, but it’s often included for clarity.

HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the opening tag and come in name-value pairs.

Basic Syntax

<element attribute="value">Content</element>

Common Attributes

id Attribute

Provides a unique identifier for an element:

<div id="header">Header Content</div>
<p id="intro">Introduction paragraph</p>

Use cases:

• CSS styling: #header { }
• JavaScript targeting: document.getElementById('header')
• Anchor links: <a href="#header">Go to header</a>

class Attribute

Specifies one or more class names for styling:

<p class="highlight">Important text</p>
<div class="container main">Content</div>

Use cases:

• CSS styling: .highlight { }
• JavaScript selection: document.querySelectorAll('.highlight')
• Reusable styling across multiple elements

style Attribute

Allows inline CSS styling:

<p style="color: blue; font-size: 18px;">Styled text</p>

Note: External CSS is preferred over inline styles for maintainability.

title Attribute

Provides additional information (tooltip on hover):

<p title="This is a tooltip">Hover over me</p>
<a href="#" title="Click to learn more">Learn more</a>

lang Attribute

Specifies the language of the element’s content:

<p lang="en">English text</p>
<p lang="es">Texto en español</p>

data-* Attributes

Custom data attributes for storing extra information:

<div data-user-id="123" data-role="admin">User content</div>

These can be accessed via JavaScript:

element.dataset.userId; // "123"
element.dataset.role;   // "admin"

Boolean Attributes

Some attributes don’t require a value—their presence alone indicates they’re true:

<input type="checkbox" checked>
<button disabled>Click me</button>
<video controls autoplay loop>

You can also write them with explicit values:

<input type="checkbox" checked="checked">
<button disabled="disabled">

Common Element-Specific Attributes

Anchor Tag (a)

<a href="https://example.com" target="_blank" rel="noopener">Link</a>

• href: The URL destination
• target: Where to open the link (_blank for new tab)
• rel: Relationship type (noopener for security)

Image Tag (img)

<img src="image.jpg" alt="Description" width="300" height="200">

• src: Image source URL
• alt: Alternative text (required for accessibility)
• width/height: Image dimensions

Input Tag (input)

<input type="text" name="username" placeholder="Enter username" required>

• type: Input type (text, email, password, etc.)
• name: Name for form submission
• placeholder: Hint text
• required: Makes field mandatory

Link Tag (link)

<link rel="stylesheet" href="styles.css" type="text/css">

• rel: Relationship (stylesheet, icon, etc.)
• href: Resource URL
• type: MIME type

Attribute Best Practices

Always Use Quotes

<!-- Good -->
<img src="image.jpg" alt="Description">

<!-- Avoid (though technically valid) -->
<img src=image.jpg alt=Description>

Use Semantic Attributes

Choose attributes that provide meaning:

<!-- Good - semantic -->
<article id="main-article" class="featured">

<!-- Avoid - non-semantic -->
<div id="div1" class="box">

Accessibility Attributes

Always include accessibility attributes:

<img src="photo.jpg" alt="A beautiful sunset over the ocean">
<button aria-label="Close dialog">×</button>
<input type="text" aria-describedby="username-help">

Common Mistakes

Missing Closing Tags

Problem:

<p>Paragraph text
<div>Content</div>

Solution:

<p>Paragraph text</p>
<div>Content</div>

Incorrect Attribute Syntax

Problem:

<div class=container>
<img src="image.jpg" alt="Description">

Solution:

<div class="container">
<img src="image.jpg" alt="Description">

Using Deprecated Attributes

Problem:

<table border="1" bgcolor="yellow">

Solution: Use CSS instead:

<table style="border: 1px solid black; background-color: yellow;">

HTML5 Data Attributes

HTML5 introduced custom data attributes for storing extra information:

<div data-product-id="12345" data-price="29.99" data-category="electronics">
    Product Name
</div>

Access in JavaScript:

const element = document.querySelector('div');
console.log(element.dataset.productId); // "12345"
console.log(element.dataset.price);     // "29.99"
console.log(element.dataset.category);  // "electronics"

Global Attributes

These attributes can be used on any HTML element:

• id: Unique identifier
• class: CSS class names
• style: Inline CSS
• title: Tooltip text
• lang: Language
• dir: Text direction (ltr/rtl)
• hidden: Hides element
• tabindex: Tab order
• contenteditable: Makes element editable
• data-*: Custom data attributes
• aria-*: Accessibility attributes

Example: Complete Element with Attributes

<article
    id="featured-post"
    class="post featured"
    data-post-id="123"
    lang="en"
    title="Featured blog post">
    <header>
        <h1>Article Title</h1>
        <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Article content goes here.</p>
</article>

Best Practices

1. Always quote attribute values: Use double quotes consistently
2. Use semantic attributes: Choose meaningful names
3. Include accessibility attributes: alt, aria-label, etc.
4. Avoid inline styles: Use external CSS when possible
5. Use data- for custom data*: Follow HTML5 conventions
6. Validate your HTML: Check for proper attribute usage
7. Keep attributes organized: Group related attributes together

References

• MDN Web Docs - HTML Attributes
• MDN Web Docs - Global Attributes
• W3C HTML5 Specification - Attributes
• HTML.com - HTML Attributes