HTML Metadata

7. Loading JavaScript

External JavaScript can be included using script. The defer attribute allows a classic external script to download while HTML parsing continues and execute after parsing finishes.

<script src="/js/app.js" defer></script>

For module scripts, defer-like deferred execution is the default behavior. Choose script loading options based on dependencies and execution requirements.

8. Open Graph Metadata

Open Graph metadata can provide information used when a page is shared on compatible social platforms.

<meta property="og:title" content="HTML Mastery | Codementrix">
<meta property="og:description" content="Learn HTML step by step with practical projects.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/html-mastery">
<meta property="og:image" content="https://example.com/images/html-course.jpg">

Replace example URLs with the real canonical page URL and a publicly accessible preview image.

9. Complete Head Example

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Mastery Course | Codementrix</title>
  <meta name="description" content="Master HTML through examples, exercises and projects.">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="icon" href="/favicon.ico">
  <meta property="og:title" content="HTML Mastery Course">
  <meta property="og:type" content="website">
</head>

Common Mistakes

• Putting title or metadata in body instead of head.
• Forgetting the UTF-8 charset declaration.
• Assuming the viewport tag alone makes a website responsive.
• Using the same title and description on every page.
• Using placeholder URLs for social-sharing metadata on a live site.

Practice Exercises

1. Create a complete head section for a portfolio website.
2. Add a unique title and meta description for a blog article.
3. Add a stylesheet link and favicon link.
4. Add Open Graph title, description, URL and image metadata.

Revision Quiz

1. Which element defines the browser document title?
2. Which charset is recommended for modern HTML documents?
3. Which meta tag helps establish the mobile layout viewport?
4. Does a meta description guarantee the exact search-result snippet?
5. Which element commonly links an external stylesheet?
6. What does defer do for a classic external script?

Answer Key and Explanations

1. title — It defines the document title.
2. UTF-8 — It supports a broad range of characters and scripts.
3. meta viewport — It helps browsers size the layout viewport for the device.
4. No. A search engine may choose a different snippet.
5. link — It connects the page to external resources such as stylesheets.
6. Downloads without blocking HTML parsing and executes after parsing — For classic external scripts, defer also preserves document order among deferred scripts.