Attributes & Meta Tags
What are attributes?
Attributes provide extra information about HTML elements. They always go in the opening tag and follow the pattern
name="value":HTML
<a href="https://example.com" target="_blank" class="link">Click me</a>This
<a> tag has three attributes: href, target, and class.Global attributes
Some attributes work on any HTML element:
| Attribute | Purpose |
|---|---|
id | Unique identifier for the element |
class | CSS class(es) for styling |
style | Inline CSS styles |
title | Tooltip text on hover |
hidden | Hides the element from view |
data- | Custom data storage |
tabindex | Controls tab order for keyboard navigation |
lang | Language of the element's content |
The data- attributes
You can store custom data on any element:
HTML
<button data-product-id="42" data-action="add-to-cart">
Add to Cart
</button>Access it in JavaScript:
JavaScript
const btn = document.querySelector('button');
console.log(btn.dataset.productId); // "42"
console.log(btn.dataset.action); // "add-to-cart"This is useful for passing data to JavaScript without polluting the global scope.
The <head> section
The
<head> doesn't display anything on the page. It holds metadata — information about the page that browsers, search engines, and social platforms use.Essential meta tags
HTML
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Website — Home</title>
<meta name="description" content="A short description of this page for search engines." />
</head>- charset — always
utf-8. Supports virtually all characters worldwide. - viewport — essential for responsive design. Without it, mobile browsers zoom out to show the desktop version.
- title — what appears in the browser tab and search results. Keep it under 60 characters.
- description — the snippet shown in search results. Keep it under 160 characters.
Open Graph tags (social sharing)
When someone shares your link on Facebook, Twitter, or Slack, these tags control what shows up:
HTML
<meta property="og:title" content="My Website — Home" />
<meta property="og:description" content="A short description." />
<meta property="og:image" content="https://example.com/preview.jpg" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />Without these, social platforms will guess — and often guess wrong.
Twitter cards
HTML
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Website" />
<meta name="twitter:description" content="A short description." />
<meta name="twitter:image" content="https://example.com/preview.jpg" />Favicon
The small icon in the browser tab:
HTML
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />Linking CSS and fonts
HTML
<link rel="stylesheet" href="/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />Boolean attributes
Some attributes don't need a value — their presence alone means "true":
HTML
<input type="text" required />
<input type="checkbox" checked />
<video autoplay muted loop></video>
<details open>
<summary>Click to toggle</summary>
<p>This content is visible by default.</p>
</details>Key takeaway
Attributes give elements their behavior and metadata. The
<head> section is crucial for SEO, social sharing, and responsive design. Always include charset, viewport, title, and description in every page.