HTML First Steps - Lesson 8 - Universal Tag Attributes

We’ve already talked about how different tags have their own specific attributes. Now it’s time to discuss the attributes that are common to many tags. Let’s look at the most popular ones.

The id Attribute

The id attribute assigns a unique name to an element. These names should not be duplicated on the same page, as this may cause issues when working with jQuery or JavaScript. Here are a few examples of using the id attribute:

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">hello</li>
  <li id="item4">world</li>
</ul>
...
<div id="header"></div>

The id can be used in CSS to apply styles to specific elements or in JavaScript (jQuery) to target elements for interactivity.

The class Attribute

The class attribute assigns an element to a group or category. Unlike id, multiple elements can share the same class, allowing you to style them all at once with CSS:

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">hello</li>
  <li class="item">world</li>
</ul>

The style Attribute

The style attribute allows you to write CSS styles directly inside an HTML tag. While not recommended for long-term use, it’s useful for quick styling. Here are a couple of examples:

...
<div style="width: 200px; height: 100px; background: #dddddd">
Block
</div>
...
<p style="font-size: 14px; color: #333333">
Text
</p>

The first example creates a block 200px wide, 100px tall, with a light gray background. The second example styles a paragraph with 14px font size and dark gray text color.

The title Attribute

The title attribute provides a tooltip that appears when you hover over an element:

...
<img src="./images/image.jpg" alt="photo" title="this is me" />
...
<a href="html2.html" title="my page">Link</a>
...
<h2 title="heading">Hello, World!</h2>

Of course, there are other global attributes like accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, and tabindex. You’ll likely encounter those later when working on multilingual websites. For now, knowing the basic global attributes is enough.