HTML Course 3.3 Metadata: charset, viewport, title, meta

HTML Course 3.3: Metadata (charset, viewport, title, meta)

Metadata elements live inside the <head> of your document. They provide information about the page to browsers, search engines, and other agents. In this section we cover:

• charset – character encoding
• viewport – layout on mobile devices
• title – page title shown in the browser tab
• meta name/value pairs – description, keywords, author, refresh, robots, etc.

1. Charset

Declares the character encoding so the browser knows how to interpret byte sequences as glyphs. UTF-8 is the modern standard.

  <head>
    <!-- Declare UTF-8 character set to support virtually all languages -->
    <meta charset='utf-8'>
  </head>
  

Place <meta charset> as early as possible in the <head> – ideally before any other content – to avoid character misinterpretation.

2. Viewport

Controls layout on mobile devices by telling the browser how to scale the page. Without it, many browsers default to a desktop-style viewport width and shrink your layout.

  <head>
    <!-- Set viewport to device width, initial zoom 1.0, allow user scaling -->
    <meta name='viewport'
          content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes'>
  </head>
  

Key viewport properties:

• width=device-width – match the device’s physical pixel width
• initial-scale=1.0 – set initial zoom level
• maximum-scale=… – restrict maximum zoom
• user-scalable=no – disable pinch-to-zoom (not recommended for accessibility)

3. Title

The <title> element defines the document’s title. It appears in browser tabs, bookmarks, and search engine results. Exactly one <title> must appear in each document.

  <head>
    <!-- Page title for browser tab and SEO -->
    <title>My Awesome Site – Home</title>
  </head>
  

Best practices:

• Keep it under ~60 characters for full display in search results.
• Place important keywords near the start.
• Avoid duplicate titles across pages.

4. Other meta name/value pairs

Use <meta name="..." content="..."> for metadata such as description, author, robots instructions, etc.

  <head>
    <!-- Description for SEO & social previews -->
    <meta name='description'
          content='Comprehensive HTML tutorials and reference materials.'>
    <!-- Keywords: not critical for SEO today -->
    <meta name='keywords' content='HTML, tutorials, web development'>
    <!-- Author or organization -->
    <meta name='author' content='Jane Doe'>
    <!-- Prevent indexing (noindex) or crawling (nofollow) if needed -->
    <meta name='robots' content='noindex, nofollow'>
    <!-- Refresh page after 5 seconds -->
    <meta http-equiv='refresh' content='5; URL=/thank-you.html'>
  </head>
  

Summary

Metadata shapes how browsers render your page, how mobile devices scale it, and how search engines interpret your content. Always include at least:

• <meta charset='utf-8'>
• <meta name='viewport' content='width=device-width, initial-scale=1.0'>
• <title>Page Title</title>
• <meta name='description' content='…'>