LogoBytesFor Developers
HomeBytesheetsRoadmapsUI TemplatesUI ToolsStack Discussion
3 Topics
Chapter•75 Minutes

Head, Metadata, and SEO

Understand document metadata, search-engine signals, social sharing metadata, and resource hints.

The Head Element

The <head> contains metadata and resource references that describe the document. Common children include <title>, <meta>, <link>, <style>, and <script>.

Useful Head Metadata
<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <meta name="description" content="Learn modern HTML from fundamentals to advanced concepts.">\n  <title>HTML Mastery</title>\n</head>
💡 These elements define character encoding, responsive viewport behavior, search description metadata, and the browser tab title.
Key Takeaways
  • The head contains metadata rather than normal visible page content.
  • A meaningful title is important for users, browsers, and search engines.
Knowledge Check

Which element defines the browser document title?

Meta Tags

The <meta> element represents metadata that cannot be expressed through other head elements. Common examples include character encoding, viewport configuration, description metadata, and robots directives.

Meta Tags
<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<meta name="description" content="HTML course for modern web developers.">\n<meta name="robots" content="index,follow">
💡 Each meta element provides metadata through attributes such as name, content, or charset.
Key Takeaways
  • Meta tags provide document metadata.
  • Do not expect every meta tag to directly improve search ranking.
Knowledge Check

Which meta configuration is commonly used for responsive viewport behavior?

Link Relations

The <link> element connects the document to external resources or describes relationships. Common examples include stylesheets, canonical URLs, icons, alternate versions, and preload resources.

Link Relations
<link rel="stylesheet" href="styles.css">\n<link rel="canonical" href="https://example.com/articles/html">\n<link rel="icon" href="/favicon.ico">
💡 The rel attribute describes the relationship between the current document and the referenced resource.
Key Takeaways
  • rel communicates the relationship of a linked resource.
  • Canonical links can help search engines identify a preferred URL.
Knowledge Check

Which rel value identifies a preferred URL for a page?

STAY UPDATED WITH BYTES!

© 2026 Bytes4Dev. All rights reserved.

v.0.4.0