Skip to main content
HTML for Beginners
CHAPTER 07 Beginner

HTML Attributes and Global Attributes

Updated: May 10, 2026
5 min read

# HTML Attributes and Global Attributes

1. Introduction

HTML tags define the structure of a webpage, but attributes provide extra information about those elements. Think of tags as nouns (like "image" or "link") and attributes as adjectives (like "source URL" or "alternative text").

2. Learning Objectives

By the end of this chapter, you will understand:
  • What HTML attributes are and how to write them.
  • Essential specific attributes like href, src, and alt.
  • Global attributes like class, id, hidden, and data-* that work on almost any element.

3. Detailed Explanations

What are Attributes?

Attributes are always specified in the start tag. They usually come in name/value pairs like name="value".
html
12 
<!-- The &#039;lang' attribute tells the browser the language is English -->
<html lang="en">

Essential Specific Attributes

Certain tags *require* specific attributes to function.

Links (href): The <a> tag requires an href (Hypertext REFerence) to know where to navigate.

html
1 
<a href="https://www.google.com">Go to Google</a>

Images (src and alt): The <img> tag requires src (source) to find the image, and alt (alternative text) for screen readers and broken links.

html
1 
<img src="profile.jpg" alt="A photo of Jane Doe" width="200" height="200">

Titles (title): The title attribute adds a tooltip when a user hovers over an element.

html
1 
<p title="I am a tooltip!">Hover over this paragraph.</p>

Global Attributes

Global attributes can be used on any HTML element.

The hidden attribute: Completely hides an element from the page.

html
1 
<p hidden>You cannot see this secret message.</p>

The contenteditable attribute: Turns any element into a text editor for the user!

html
123 
<div contenteditable="true">
    Click here and start typing to edit this text live!
</div>

The data-* attributes: Used to store custom invisible data that JavaScript can read later.

html
1 
<button data-user-id="12345" data-role="admin">Delete User</button>

4. Mini Project: Customizable Profile Card

Let's combine attributes to make a rich UI component.
html
123456789101112131415 
<div class="profile-card" data-theme="dark">
    <!-- Image with src, alt, width, and height -->
    <img src="avatar.png" alt="User Avatar" width="150" height="150">
    
    <!-- Tooltip title -->
    <h2 title="User&#039;s Full Name">John Smith</h2>
    
    <!-- Editable bio -->
    <p contenteditable="true" title="Click to edit your bio">
        I am a software developer. Click here to change this text!
    </p>
    
    <!-- Link with target="_blank" to open in new tab -->
    <a href="https://github.com" target="_blank">View GitHub</a>
</div>

5. MCQs

Q1: Which attribute is used to provide a tooltip when hovering over an element? A) alt B) tooltip C) title D) hover *Answer: C*

6. Summary

Attributes supercharge your HTML tags. src, href, and alt are mandatory for media and links. Global attributes like hidden and contenteditable provide advanced functionality directly from HTML without writing JavaScript.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Semantic HTML and HTML5 Features
Next Chapter HTML Classes and IDs

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1