What Is an Attribute?
An attribute is extra information added inside a tag's opening bracket. You've already used several — href, src, alt, class — without necessarily thinking of them as one family of feature.
<a href="day1.html" target="_blank">Start Lesson</a> <img src="logo.png" alt="Site logo" width="120">
An attribute always follows the pattern name="value", sits inside the opening tag, and is separated from the tag name and other attributes by a space.
- ✓Attributes give a tag extra behavior or information without changing what the tag is.
- ✓Most attributes are optional; a few, like <img>'s alt, are effectively required for good practice.
- ✓Attribute values almost always belong in double quotes.
Attributes That Work on (Almost) Any Tag
Some attributes aren't tied to one specific tag — they can be added to nearly any element on the page.
Gives an element a unique name, used for CSS, JavaScript, or linking to a specific part of a page.
Assigns one or more reusable labels, used to style multiple elements together.
Adds a tooltip that appears when a visitor hovers over the element.
Applies inline CSS directly to a single element — handy for quick tests, but best avoided in real projects.
<h2 id="contact" title="Jump to contact form"> Get in Touch </h2>
id must be unique per page — no two elements should ever share the same id. class has no such limit; as many elements as you like can share one.
The <head> and the <meta> Tag
Metadata is data about your page that isn't shown directly on the page itself. It lives inside <head>, and most of it uses the <meta> tag.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Learn HTML and CSS in 30 days."> <title>Ananta Code Academy</title> </head>
The <title> becomes the clickable headline in search results and the browser tab label. The description meta tag supplies the summary text underneath it.
Breaking Down What You Just Learned
AttributesName="value" pairs added inside an opening tag to give it extra information or behavior.
id / classGlobal attributes used to target elements for CSS or JavaScript — id is unique, class is reusable.
<meta charset>Declares the character encoding, almost always UTF-8, so text renders correctly.
<meta name="viewport">Tells mobile browsers how to scale the page to the device's screen.
<meta name="description">Supplies the summary text shown beneath your page's title in search results.
Try It Yourself
Open any page you've built so far and give one element a unique id, add a title tooltip to a link, and write a one-sentence <meta name="description"> for the whole page.
Add Real Metadata to Your Portfolio
Making your page search-and-browser ready
Create a new file called day11.html inside your course folder and set up a properly documented page.
- Start with the full DOCTYPE, html, head, and body structure.
- In <head>, add <meta charset="UTF-8"> and the viewport meta tag.
- Add a <meta name="description"> describing this specific page in one sentence.
- Give the page a descriptive <title>.
- In the <body>, add three sections, each with a unique id, and one link with a title tooltip.
- Confirm every id on the page is different — no two elements should share one.
Recap
Name="value" pairs that add extra info or behavior to a tag.
Unique vs. reusable hooks for targeting elements.
Controls text encoding and mobile scaling behavior.
Determine how the page appears in tabs and search results.
Key Takeaways
- Attributes add extra information or behavior inside a tag's opening bracket.
- id must be unique per page; class can be reused across many elements.
- <meta charset> and the viewport meta tag belong in almost every page's <head>.
- <title> and <meta name="description"> shape how your page appears in search results.
- Metadata is invisible on the page itself but critical for how the page is found and displayed.