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>Canonical URLs and duplicate content
Search engines penalize duplicate content when the same page is reachable at multiple URLs — for example, with and without
www, or with tracking query parameters appended. A canonical link tells crawlers which URL is the authoritative version:HTML
<link rel="canonical" href="https://example.com/blog/my-post" />Place one canonical tag per page in the
<head>. It should be an absolute URL pointing to the version you want indexed. On paginated lists, each page gets its own canonical unless you intentionally consolidate to page one. E-commerce sites use canonical tags heavily when product URLs differ only by sort order or color filters.Robots meta and crawling control
The
robots meta tag gives page-level instructions to search engine crawlers:HTML
<meta name="robots" content="index, follow" />
<meta name="robots" content="noindex, nofollow" />noindex asks crawlers not to list the page in search results — useful for thank-you pages, internal dashboards, or staging previews. nofollow tells crawlers not to follow links on that page. Combine values with commas. For entire directories, sites often use a robots.txt file at the domain root; the meta tag is finer-grained when you need per-page control.Never rely on
noindex alone for security — private pages still need authentication. Robots directives are polite requests, not access control.Language, direction, and structured hints
The
<html lang="en"> attribute on the root element helps screen readers pick the correct pronunciation and assists search engines with language targeting. For mixed-language snippets, wrap them in an element with its own lang attribute: <span lang="fr">Bonjour</span>.The
dir="rtl" attribute sets right-to-left text direction for languages like Arabic or Hebrew. Browsers apply it to the element and its descendants unless overridden.JSON-LD structured data (often a
<script type="application/ld+json"> block in the head or body) describes entities like articles, products, or FAQs in a machine-readable format. It does not change what users see, but it can enable rich results in search — worth adding once your basic meta tags are solid.Preload and performance hints
Beyond stylesheets,
<link rel="preload"> tells the browser to fetch critical assets early — hero fonts, above-the-fold images, or key scripts. Use it sparingly; over-preloading competes with resources the page actually needs first. rel="dns-prefetch" and rel="preconnect" warm up connections to third-party origins such as font CDNs, shaving latency on the first request.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.