Global Attributes & Properties
What are Global Attributes?
Imagine a set of rules or features that apply to everyone in the world, regardless of their nationality. In HTML, Global Attributes are settings that can be added to *any* HTML element, whether it's a heading, a paragraph, an image, or a button.The most common global attributes are id and class:
id: A unique identifier for a specific element (like a social security number—only one person has it).class: A label used to group multiple elements together (like a school grade level—many students share it).Why does it matter?
Global attributes are the bridge between your structure (HTML) and your styling (CSS) or interactivity (JavaScript). Withoutid and class, you wouldn't be able to target specific elements to style them with colors, layout rules, or animations.
How to write it
You add global attributes inside the opening tag of any element:id: <p id="main-paragraph">Content</p>class: <p class="highlight">Content</p>title: <p title="Helpful tooltip">Content</p> (this shows a simple hover tooltip when you hover over the text).id="unique"
class="style"
Common Mistakes
id on multiple elements: An id must be 100% unique on your page. If you have two elements with id="main-btn", your styles or JavaScript might break! Use class instead if you want to apply the same label to multiple elements.id or class names with numbers (e.g., 1st-paragraph). Always start with a letter (e.g., paragraph-1).Quick Reference
class="name" — Groups multiple elements for styling or targeting.id="unique-name" — Identifies a single unique element.title="text" — Adds a simple hover tooltip.hidden — Hides the element from the webpage.Your Task
1. Add a `class` attribute set to 'highlight' to the paragraph.
2. Add a `title` attribute containing the text 'Tutorial Tooltip' to the paragraph.
index.html
Type code above to start the lesson.
Live Preview