Chapter 10 — Front Matter

Chapter Introduction and Learning Objectives

You have now written HTML pages with meaningful structure, headings, paragraphs, links, images, lists, tables, and forms. You know how to use semantic elements, write accessible labels, and organize content clearly. That is real progress. But there is a layer of HTML that lives mostly in the <head> of every page — a layer that users rarely see directly, but that shapes almost everything about how a page is found, understood, shared, and rendered. That layer is metadata.

Metadata means data about data. In HTML, metadata describes the page itself: what language its characters use, how wide the viewport should be, what the page is about, what favicon to display, and what information social platforms should show when someone shares a link.

This chapter also introduces search engine optimization, or SEO, as a concept. SEO has a reputation for being mysterious or manipulative, but at the beginner level it is simply about writing clear, honest, well-structured HTML. Search engines read your pages the same way screen readers do — by following your headings, landmarks, links, text content, and metadata. A well-written page is already a well-optimized page.

Finally, this chapter teaches document quality — the habit of reviewing, validating, and checking your HTML before you consider a page finished. A valid, well-organized HTML document loads correctly, renders consistently, and remains maintainable as your project grows.

Opening Question

Two students build pages that look nearly identical in a browser — same heading, same paragraph, same image. One student shares a link to their page in a group chat, and a clean preview card appears with a title, a description, and an image. The other student shares their link, and the preview shows a blank gray box with no information at all. Both pages render identically on screen. What explains the difference? The answer lives in a part of the document that no browser ever displays to a user: the <head>. By the end of this chapter, you will know exactly what lives there, why each piece matters, and how to write it correctly.

10Sections

10Objectives

13Key Terms

30Total Chapters

Learning Objectives

By the end of this chapter, you should be able to:

1Explain what metadata is and why it shapes how a page is found, understood, and shared even though it produces no visible content.
2Explain the purpose of character encoding and correctly declare UTF-8 as the first element in <head>.
3Explain the purpose of the viewport meta tag and write it correctly for responsive behavior on mobile devices.
4Write effective, unique page titles and accurate, well-sized meta descriptions.
5Add a favicon to an HTML page and choose an appropriate image format.
6Explain what a canonical link is and recognize when a project needs one.
7Describe Open Graph and Twitter Card metadata and explain their effect on social sharing previews.
8Explain how search engines read HTML pages and connect SEO to semantic, accessible structure rather than tricks.
9Validate an HTML document using the W3C Markup Validation Service and interpret its error messages.
10Apply a document quality checklist covering structure, metadata, semantics, accessibility, paths, and content.

Chapter 10 — Contents

Sections at a Glance

10.1What Metadata IsThe <head> versus the <body>; metadata as data about a document; what belongs inside <head>
10.2Character EncodingUTF-8 and character encoding; why encoding must be declared first; what happens when it is missing
10.3Viewport MetadataThe viewport meta tag; mobile rendering before and after; why user-scalable=no should be avoided
10.4Page Titles and DescriptionsWriting effective <title> elements; meta descriptions; where titles and descriptions appear; weak versus strong examples
10.5FaviconsWhat a favicon is; common favicon formats; linking a favicon; designing simple icons
10.6Canonical Links at an Introductory LevelDuplicate content across URLs; the canonical link element; when beginner projects need one
10.7Social Sharing Metadata at an Introductory LevelOpen Graph and Twitter Card metadata; social preview cards; og: and twitter: meta tags
10.8Search Engine ClarityHow search engines read pages; what helps versus what hurts; SEO as honest, semantic HTML
10.9HTML ValidationThe W3C Markup Validation Service; common validation errors; why browsers tolerate errors that validators catch
10.10Document Quality ChecklistA practical review tool covering structure, metadata, semantics, accessibility, paths, and content quality

Section 10.1

What Metadata Is

When a browser opens an HTML file, it reads two major sections: the <head> and the <body>.

The <body> contains the visible content of the page: headings, paragraphs, images, links, forms, and everything a user sees on screen.

The <head> contains metadata: information about the page that is not displayed directly as content. Metadata helps browsers, search engines, accessibility tools, social platforms, and other software understand what the document is and how to handle it.

Think of metadata as the label on a package. The label does not change what is inside the package, but it tells everyone who handles the package what the contents are, how to store it, where it came from, and what to do with it.

A complete, minimal head<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A short description of the page.">
    <title>Page Title Here</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>

Each line in the <head> communicates something specific. By the end of this chapter, you will understand exactly what each one does and why it belongs there. The <head> commonly contains:

Character encoding declaration
Viewport settings for responsive design
Page title
Meta description for search engines
Favicon link
CSS file links
JavaScript file links (sometimes)
Social sharing metadata
Canonical link hints
Other metadata as needed

None of these elements produce visible content on the page. They work behind the scenes, shaping how the page behaves and how it is understood by the systems that interact with it.

Section 10.2

Character Encoding

The very first metadata element in nearly every HTML file declares the character encoding.

This one line tells the browser how to interpret the bytes that make up the file's text content. Computers store text as numbers. The question is which number represents which character — and different encoding systems answer that question differently. Before standard encoding was common, the same file could look completely different depending on which system a browser used to read it.

UTF-8 is the standard encoding for the web. It supports virtually every character from every human language: Latin letters, accented characters, Arabic script, Chinese characters, Japanese hiragana and katakana, mathematical symbols, emoji, and thousands more. UTF-8 also happens to be backward-compatible with the older ASCII encoding used for basic English text.

Without a character encoding declaration, browsers have to guess. On modern browsers this usually works, but it can fail when a page contains characters outside basic English. You may have seen web pages where text displays as a string of strange symbols — boxes, question marks, or garbled sequences like Ã© instead of é. This is a character encoding mismatch.

The Rule

Always declare <meta charset="UTF-8"> as the first element inside <head>, before anything else. The HTML specification requires it to appear within the first 1024 bytes of the file, and placing it first guarantees that. Save your HTML files in UTF-8 encoding as well — most modern text editors and code editors do this by default.

Section 10.3

Viewport Metadata

The second essential metadata element controls how a page is displayed on different screen sizes.

To understand why this matters, consider what happened when smartphones first became common. Websites were designed for desktop screens, usually around 960 pixels wide. When those same sites loaded on a phone, the phone would shrink the entire page to fit the small screen — making text too small to read and buttons too small to tap. Users had to pinch and zoom constantly just to use basic pages.

The viewport meta tag tells the browser: do not shrink this page. Render it at the actual device width, and set the starting zoom level to 1.0 — no zoom.

Breaking Down the Content Value

What each part of the viewport tag means

widthwidth=device-width sets the viewport width to match the actual physical width of the device screen.
scaleinitial-scale=1.0 starts the page at 100% zoom, neither zoomed in nor zoomed out.
ResultWithout this tag, mobile browsers render the page as if it were a wide desktop site and then shrink it. With it, the browser gives developers control over how the layout appears on each screen width — the foundation of the responsive design covered fully in Chapter 17.

This metadata element is standard. You will not need to change its values. Treat it as required in every HTML file you create, right after the character encoding declaration:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

A Note on user-scalable

Some older tutorials suggest adding user-scalable=no to prevent users from zooming in on a page. Never do this. Preventing zoom removes an important accessibility feature — many users with low vision rely on the ability to zoom. The HTML standard now recommends that browsers ignore user-scalable=no for accessibility reasons, and some browsers do ignore it, but including it is still bad practice.

Section 10.4

Page Titles and Descriptions

The <title> element is not a <meta> tag, but it is one of the most important elements in the <head>. It sets the title of the page as displayed in the browser tab, bookmarks, and search engine results. The meta description, written with <meta name="description">, provides a short summary of the page for search engines and link previews.

Element	Where It Appears	Purpose
<title>	Browser tab or window title bar, bookmarks, search results, social previews (if not overridden), screen reader announcements	Names the page specifically and uniquely
Meta description	Search engine results as the gray summary text, some social link previews	Tells a reader what the page contains before they click

Title Quality

Weak titles versus strong titles

Weak<title>Home</title>, <title>Page</title>, <title>Untitled</title>, <title>My Website</title> — these tell a user almost nothing when several tabs are open or when a search engine shows multiple results from the same site.
Strong<title>Home — Riverside Community Library</title>, <title>Contact Us — Riverside Community Library</title> — each title is unique, specific, and meaningful out of context.
The patternPage Topic — Site Name. Put the most specific information first, keep titles between roughly 50 and 60 characters, make every page's title unique, and write for human readers rather than stuffing in keywords.

<meta name="description" content="Learn how to use metadata, write page titles, add SEO basics, and check document quality in HTML.">

A good meta description reads naturally, like a sentence written for a human. Keep it between roughly 140 and 160 characters, do not repeat the title word for word, write it as a complete thought rather than a list of keywords, and make sure it accurately matches what the page actually contains.

Important

A meta description does not directly improve search rankings. Search engines use it to understand page content, and a good description can improve the click-through rate when your page appears in results — but adding a description alone does not guarantee a higher ranking. Honest, accurate descriptions serve users better than keyword-stuffed ones.

Section 10.5

Favicons

A favicon — short for favorites icon — is the small icon displayed in the browser tab next to the page title. Users also see it in bookmarks and browser history. Favicons are small but meaningful: they help users quickly identify open tabs when many tabs are open, and they give a page a polished, complete appearance.

Format	Notes
PNG	Most widely supported; 32×32 or 16×16 pixels is standard. A reliable, simple choice for beginner projects.
ICO	The original favicon format; supported by all browsers; can contain multiple sizes in one file.
SVG	Scalable vector format; supported by most modern browsers; scales perfectly at any size.

For many years, browsers automatically looked for a file named favicon.ico in the root of a website without needing a <link> tag at all. While this still works on many browsers, it is better practice to declare your favicon explicitly so you can control the format, size, and location.

Creating a Favicon

Simple favicons can be created in any image editor or generated with online favicon tools. The image should be clear and recognizable at very small sizes — detailed illustrations become unreadable at 16×16 pixels. Simple shapes, letters, or symbols work best.

Section 10.6

Canonical Links at an Introductory Level

As you build larger sites, you may create situations where the same content is accessible at more than one URL — for example, a version with and without "www", or pages indexed with different URL parameters. A canonical link tells search engines which URL is the official, preferred version of a page.

Why This Matters

If the same page is accessible at multiple URLs, search engines may treat each URL as a separate page with duplicate content. This can split the signals that would otherwise help one page rank well, and it can confuse search engines about which version to show in results. The canonical link is your way of saying: this is the real address for this content.

For Beginner Projects

You probably do not need to think deeply about canonical links while building your first local pages. Consider including one when you plan to publish a site with both HTTP and HTTPS versions (always use HTTPS), when pages might be accessible with and without trailing slashes, or whenever the same content appears under different URLs for any reason. You can omit it now and return to this topic when you begin publishing real sites in Chapter 30.

Section 10.7

Social Sharing Metadata at an Introductory Level

When someone shares a link on a social platform — posting a URL in a message, on a social network, or in a chat application — that platform often generates a preview card showing a title, image, and description pulled from the page. Without social metadata, these previews use whatever text the platform can find, which is often wrong, truncated, or unattractive.

Two systems handle this. Open Graph, created by Meta, is now used by most platforms and uses og: prefixed meta tags. Twitter Cards, created by Twitter (now X), use name="twitter:..." meta tags.

<meta property="og:title" content="Introduction to HTML — Web Development">
<meta property="og:description" content="Learn the structure of HTML documents, elements, tags, and attributes.">
<meta property="og:image" content="https://example.com/images/social-preview.jpg">
<meta property="og:url" content="https://example.com/chapter-05.html">
<meta property="og:type" content="website">

Open Graph Tags Explained

What each property controls

og:titleThe title to display in the preview card. Can differ from the <title> element.
og:descriptionA description for the preview card. Can differ from the meta description.
og:imageThe image shown in the preview card. Should be at least 1200×630 pixels for best results.
og:urlThe canonical URL of the page being shared.
og:typeThe type of content — commonly "website", "article", or "video.movie".

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Introduction to HTML — Web Development">
<meta name="twitter:description" content="Learn the structure of HTML documents, elements, tags, and attributes.">
<meta name="twitter:image" content="https://example.com/images/social-preview.jpg">

Practical Guidance for Beginners

You do not need social sharing metadata for local projects. It becomes useful once you publish real websites and users are likely to share links to your pages. In the running Student Learning Site project, add social metadata as a stretch task once the site is deployed in Chapter 30.

Section 10.8

Search Engine Clarity

Search engines — such as Google, Bing, and others — are software systems that visit web pages, read their content, and index them so users can find them through keyword searches.

At the beginner level, the key principle is this: search engines read your pages the way a careful, systematic reader would. They look at your headings for topic signals, follow your links to understand what your site connects to, read your text for meaning, check your title and description, and notice whether your page is structured semantically or is a tangle of generic <div> elements with no meaning.

This means that most of what you already learned in Chapters 5 through 9 — semantic HTML, proper heading order, meaningful link text, descriptive alt text, accessible labels — is also good for search engine clarity. These are not separate goals; they are the same goal.

Helps

Meaningful Titles

Unique, specific titles for every page.

Helps

Accurate Descriptions

A genuine summary of what the page contains.

Helps

Proper Heading Structure

One <h1> per page followed by logical subheadings. Search engines treat the <h1> as the strongest signal of a page's primary topic.

Helps

Semantic HTML

<article>, <section>, <nav>, <main>, <header>, and <footer> help search engines understand a page's structure.

Helps

Descriptive Link Text

"Learn about responsive design" is more useful to humans and search engines than "click here".

Helps

Descriptive Alt Text

Alt text contributes to a page's overall text content and topic signals.

Helps

Clean, Valid HTML

A page with many errors may be parsed inconsistently. Valid HTML is processed more reliably.

What Does Not Help — and What Hurts

Keyword stuffing — repeating keywords over and over in unnatural ways — looks manipulative to search engines and unreadable to humans. Hidden text placed off-screen or made invisible through CSS is ignored or penalized. Misleading titles or descriptions cause visitors to leave quickly, which sends negative signals. Duplicate content across multiple pages confuses search engines about which page to show. Write for people, and accuracy will follow naturally.

The Honest SEO Principle for Beginners

At this stage, you do not need complex SEO strategies. Your job is to write honest, well-structured, accessible HTML. A page that is meaningful to human readers, organized with proper headings, linked clearly, described accurately, and validated for correctness is already a page that search engines can understand. Advanced SEO — performance metrics, structured data markup, backlink analysis, and site authority — belongs to more advanced courses.

Section 10.9

HTML Validation

HTML validation is the process of checking your HTML against the rules of the HTML standard to find errors, missing elements, incorrect nesting, invalid attributes, and other problems. The official tool for this is the W3C Markup Validation Service, available at https://validator.w3.org. You can validate a page by URL, by file upload, or by pasting HTML code directly.

Why Validation Matters

Browsers are very tolerant of HTML errors. If you forget a closing tag, nest elements incorrectly, or use an invalid attribute, many browsers will guess what you intended and try to render something anyway. This might look acceptable in your browser today — but a different browser may guess differently, and the page may look broken or behave unexpectedly for some users. Validation catches these problems before they become invisible bugs.

Problem	Typical Validator Message
Missing alt attribute	`Element img is missing required attribute alt.`
Skipped heading level	`Consider using h2-h6 elements for headings that are not top-level.`
Unclosed element	`End tag for body seen, but there were unclosed elements.`
Duplicate id attribute	`Duplicate ID "main-heading".`
Invalid nesting	`Element div not allowed as child of element span.`

The validator highlights the line number where it found each issue. Open your file, go to that line, read the context, and apply the fix. Do not try to fix all errors at once without understanding them — some errors cause others to cascade, and fixing one structural problem can resolve several apparent errors at once.

Aim for Zero Errors

Aim for zero errors, not just fewer errors. A page with a few validation errors has unpredictable weak spots. A page with zero errors is a page you can trust.

Section 10.10

Document Quality Checklist

Before considering an HTML page finished, professional developers apply a quality review. This checklist combines everything you have learned across all of Part II — not just this chapter — because document quality is cumulative.

Document Quality Checklist

Apply this to every page before you consider it finished

Structure and Validity

The document begins with <!DOCTYPE html>.
The <html> element has a lang attribute (for example, lang="en").
<meta charset="UTF-8"> is the first element in <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> is present.
A meaningful, unique <title> element is present.
All elements are properly nested and closed.
The document passes HTML validation with zero errors.
No deprecated elements are used (such as <center>, <font>, or <marquee>).

Metadata

A <meta name="description"> with an accurate, specific description is present.
A favicon is linked if the site has one.
The page title is unique and specific, not generic like "Home" or "Page".
The page title is an appropriate length, roughly 50 to 60 characters.

Semantic Structure

There is exactly one <h1> per page, representing the page's main topic.
Heading levels descend in order without skipping (h1, h2, h3 — not h1, h3).
A <main> element wraps the primary content.
<header> and <footer> are used for the site header and footer sections.
<nav> wraps navigation menus.
<section> and <article> are used where appropriate.
<div> and <span> are not used where a semantic element would serve better.

Accessibility

Every <img> has a meaningful alt attribute, or alt="" for decorative images.
Every <form> input has an associated <label>.
Links have descriptive text, not "click here" or "read more" alone.
Color is not the only way information is conveyed.
The page can be read in logical order from top to bottom through the source.

Links and Paths

All internal links use correct relative paths.
All images load correctly, with no broken image icons.
The CSS file is correctly linked and styles are applied.
JavaScript files, if present, are correctly linked.
No links produce 404 errors when clicked.

Content Quality

Text is free of obvious spelling and grammar errors.
The page title matches the page's <h1> in meaning.
The meta description accurately reflects the page content.
Table data uses <th> for headers and <caption> where helpful.
Lists use the appropriate type: <ul>, <ol>, or <dl>.

Worked Example: Reviewing a Page Head

Here is a complete, well-formed <head> section for a page in a student learning site:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Browse lesson resources for the web development course, including HTML guides, CSS references, and JavaScript practice exercises.">
    <title>Lessons — Student Learning Site</title>
    <link rel="icon" href="images/favicon.png" type="image/png">
    <link rel="stylesheet" href="css/main.css">
  </head>

Reading the Example

What each line does

charsetDeclares UTF-8 encoding; placed first, as required.
viewportEnables responsive behavior on mobile devices.
descriptionProvides an accurate, specific page summary for search engines.
titleGives a unique, specific title: topic first, then site name.
iconConnects the page's favicon.
stylesheetLinks the external CSS file.

Worked Example: Before and After Document Quality Review

Before — with common beginner problems:

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Welcome</h1>
    <img src="hero.jpg">
    <p>This is my website.</p>
    <h3>About</h3>
    <p>I am learning web development.</p>
  </body>
</html>

Problems with this page: <html> has no lang attribute, so screen readers cannot determine the page language. <meta charset="UTF-8"> is missing. <meta name="viewport" ...> is missing, so the page will not behave responsibly on mobile. The title "Home" is generic. There is no meta description. <img src="hero.jpg"> has no alt attribute, which is both inaccessible and invalid HTML. The heading jumps from <h1> to <h3>, skipping <h2>. There are no semantic landmarks such as <main> or <header>.

After — corrected and improved:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn web development with structured lessons, accessible code examples, and practical projects.">
    <title>Home — Student Learning Site</title>
    <link rel="icon" href="images/favicon.png" type="image/png">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <nav>
        <a href="index.html">Home</a>
        <a href="lessons.html">Lessons</a>
        <a href="resources.html">Resources</a>
        <a href="contact.html">Contact</a>
      </nav>
    </header>
    <main>
      <h1>Welcome to the Student Learning Site</h1>
      <img src="images/hero.jpg" alt="A student working at a desk with a laptop and notes">
      <p>This site supports students learning web development with HTML, CSS, and JavaScript.</p>
      <h2>About This Site</h2>
      <p>I built this site while learning web development. It includes lessons, resources, and practice projects.</p>
    </main>
    <footer>
      <p>Student Learning Site — Web Development Course</p>
    </footer>
  </body>
</html>

What was fixed: lang="en" was added to <html>; the charset and viewport meta tags were added; the title was changed to something specific and meaningful; a meta description and favicon were added; the image received an alt attribute; the heading hierarchy was corrected to h1 then h2; and semantic landmarks — header, nav, main, footer — were added throughout. The page is now valid, accessible, and clearly communicates its content to browsers, search engines, and assistive technologies.

Chapter 10 — Applied Practice

Running Project: Student Learning Site — Chapter 10 Update

Running Project Completing the <head> on Every Page

In your running Student Learning Site project, apply the following updates to every page you have built so far.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="[Accurate description of this specific page]">
<title>[Page Topic] — Student Learning Site</title>
<link rel="icon" href="images/favicon.png" type="image/png">
<link rel="stylesheet" href="css/main.css">

Adjust the paths to css/main.css and images/favicon.png using correct relative paths based on where each file lives in your project.

Complete the head on every page. Add the full set of metadata elements shown above to every page in your project.
Write unique titles for every page — for example: Home — Student Learning Site, About — Student Learning Site, Lessons — Student Learning Site, Resources — Student Learning Site, Contact — Student Learning Site.
Write a unique description for every page. Each description should describe what that specific page contains, not the site in general.
Validate every page using the W3C Markup Validation Service. Fix all errors before moving on.
Run through the Document Quality Checklist for each page. Check off each item, and note anything incomplete as a task for a future chapter.

By the end of Part II, your site should have:

Semantically structured HTML pages with proper headings, landmarks, and content
Complete, correct <head> sections on every page
Working links between pages
Images with alt text
An accessible contact form with labeled inputs
Valid HTML with zero errors on all pages

Chapter 10 — Back Matter

Chapter Summary

Section 10.1The <head> of an HTML document holds metadata — information about the page that browsers, search engines, social platforms, and accessibility tools rely on, even though none of it appears as visible content in the <body>.
Section 10.2Character encoding, declared with <meta charset="UTF-8">, tells browsers how to interpret the file's text. UTF-8 is the standard for the modern web and must be declared first in <head>.
Section 10.3Viewport metadata prevents mobile browsers from shrinking pages down and gives developers control over responsive layout. It is required on every modern page, and user-scalable=no should never be used.
Section 10.4The <title> element appears in browser tabs, bookmarks, and search results, and should be unique and specific. The meta description summarizes the page for search engines and social previews, and should be honest, accurate, and appropriately sized.
Section 10.5Favicons are small icons displayed in browser tabs. A 32×32 PNG linked with <link rel="icon" ...> is a straightforward choice for beginner projects.
Section 10.6Canonical links tell search engines the preferred URL when the same content is accessible at multiple addresses, preventing duplicate-content confusion.
Section 10.7Open Graph and Twitter Card metadata control how a page appears when shared as a link on social platforms and in messaging applications.
Section 10.8Search engine clarity is not a separate goal from good HTML. Semantic structure, proper headings, meaningful link text, descriptive alt text, and accurate metadata all contribute to both accessibility and search engine understanding.
Section 10.9HTML validation using the W3C Markup Validation Service checks documents for structural errors that browsers silently tolerate but that can cause inconsistent rendering. Aim for zero errors.
Section 10.10The Document Quality Checklist brings together all of Part II — structure, metadata, semantics, accessibility, paths, and content — into one practical review tool to apply before considering any page finished.

Key Terms

metadata

Data that describes a document rather than being part of its visible content. In HTML, metadata lives in the <head> element.

character encoding

A system that maps numbers to characters. UTF-8 is the standard encoding for the web, supporting virtually every character in every human language.

UTF-8

The standard character encoding for web documents. Declared with <meta charset="UTF-8">.

viewport

The visible area of a web page within the browser window. The viewport meta tag controls how pages are scaled on different devices.

favicon

A small icon displayed in the browser tab, bookmark list, and browser history to visually identify a page or site.

meta description

A short text summary of a page's content, provided for search engines and social previews using <meta name="description" ...>.

canonical link

A <link> element that declares the preferred URL for a page when the same content is accessible at more than one address.

Open Graph

A metadata protocol created by Meta that controls how pages appear when shared on social platforms. Uses property="og:..." meta tags.

Twitter Card

A metadata system created by Twitter that controls how pages appear when shared on Twitter/X. Uses name="twitter:..." meta tags.

SEO

Search engine optimization — the practice of improving a page's visibility in search engine results. At the beginner level, this means honest, semantic, well-structured HTML.

HTML validation

The process of checking an HTML document against the HTML standard to find structural errors, missing attributes, invalid nesting, and other problems.

W3C Markup Validation Service

The official tool for validating HTML, operated by the World Wide Web Consortium. Available at validator.w3.org.

document quality

The overall standard of a page's HTML, including valid structure, complete metadata, semantic organization, accessibility features, and working paths.

Code Reading

Study each code block and answer the questions below without running the code.

Code Block A

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <title>About Us</title>
</head>

What is wrong with the order of elements in this <head>?
What important element is missing from this <head>?
Is the title "About Us" a strong or weak title? What would make it stronger?

Code Block B

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Resources">
  <title>Resources — Riverside After-School Program</title>
  <link rel="icon" href="images/favicon.png" type="image/png">
  <link rel="stylesheet" href="css/main.css">
</head>

What is wrong with the meta description in this example?
Everything else in this <head> is correct. List the elements in order and state what each one does.
If this page were located in a subfolder called pages/, what would need to change in the paths?

Code Block C

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Our Site</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <img src="images/banner.jpg">
    <h3>Our Mission</h3>
    <p>We provide resources for students.</p>
  </body>
</html>

Find and explain every problem in this document. There are at least five.

Code Block D

<meta property="og:title" content="Summer Programs 2025 — Riverside After-School Program">
<meta property="og:description" content="Discover our summer learning programs for students in grades 3 through 8, including STEM workshops, art projects, and outdoor activities.">
<meta property="og:image" content="https://example.com/images/summer-preview.jpg">
<meta property="og:type" content="website">

What kind of metadata is this?
When does this metadata have a visible effect?
A student says: "I can delete these tags because they don't show anything on the page." How would you respond?

Predict the Result

For each scenario, predict what would happen — either visually, in search results, or in behavior.

A page has no <meta charset="UTF-8"> declaration. The page contains French text with accented characters (é, è, à, ù, ç). What might a user see?
A page has no <meta name="viewport" ...> tag. A student opens the page on a phone. What is the most likely appearance?
A developer gives all five pages of a site the same <title>: <title>My Site</title>. A user has all five tabs open at once. What problem arises?
A <meta name="description"> tag says: "web development HTML CSS JavaScript tutorial learn coding beginner intermediate advanced resources guide reference". A search engine shows this in results. What impression does it give? What would a better description say?
A page has a <link rel="canonical" href="https://example.com/about.html"> but the actual page URL is https://example.com/about/index.html. What is this tag telling search engines?

Debugging and Error Analysis

Each example below contains one or more problems. Identify the problem and explain how to fix it.

Debug 1

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0; user-scalable=no">
  <title>Accessibility Guide</title>
</head>

Debug 2

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <title>Contact — Community Resource Hub</title>
</head>

Debug 3

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Events — Community Resource Hub</title>
</head>

Debug 4

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn about our community programs for families and students in the greater Riverside area, offering tutoring, after-school care, summer camps, parent workshops, technology training, job readiness skills, financial literacy courses, health education sessions, and community garden projects.">
  <title>Programs — Community Resource Hub</title>
</head>

What is the problem with the meta description?

Debug 5

A student runs their page through the W3C Markup Validation Service and gets this error:

Error: Element img is missing required attribute alt.
  Line 24: <img src="images/team.jpg" width="600" height="400">

Write the corrected line. Assume the image shows the organization's team at a 2024 community event.

ActivitiesShort Build Tasks

Write a complete <head> section. You are building a page called resources.html for a site called the "Digital Skills Hub." The page lists beginner coding tutorials. Write a complete <head> section with all required elements, including a meaningful title, accurate description, favicon link, and CSS file link. Use appropriate paths assuming the page is in the root folder.
Write five unique page titles. A site called "Clearwater Middle School Library" has the following pages: Home page, Book catalog search, Reading challenge program, Contact and hours, Staff and librarians. Write a strong, specific <title> for each page following the format: Page Topic — Site Name.
Write five unique meta descriptions. Using the same five pages above, write a meta description for each page. Each description should be between 140 and 160 characters, written in natural English, and accurately describe what the page contains.
Validate and report. Open one of your existing HTML pages from the running Student Learning Site project. Run it through the W3C Markup Validation Service at validator.w3.org. List every error and warning that appears. Then fix all errors and run the validator again until the page passes with zero errors. Write a short note (3–5 sentences) describing what errors you found and what you changed to fix them.
Apply the Document Quality Checklist. Use the checklist from Section 10.10 to review one of your HTML pages. Check each item. For any item that fails, write a brief note explaining what needs to be fixed.

Accessibility Check

Review your pages with the following accessibility-specific questions from Part II.

Does every <img> have an alt attribute? Is the alt text meaningful for informative images and empty (alt="") for decorative images?
Does every form <input> have an associated <label>?
Does the page have a logical heading structure, starting with one <h1> that describes the page's main topic?
Are all links descriptive? Would a user understand where each link goes from the link text alone, without reading the surrounding sentence?
Does <html lang="en"> (or the appropriate language code) appear on every page?
Does <main> wrap the page's primary content?

If any item fails, fix it before moving on.

ReviewMixed Review

These questions cover material from Chapters 1 through 10. Use them to review and reinforce earlier skills.

What is the difference between an absolute path and a relative path? Give an example of each.
What does the <!DOCTYPE html> declaration do, and where must it appear?
You have a page with this heading structure: <h1>, <h2>, <h4>, <h2>. What is wrong, and how do you fix it?
What is the difference between the <header> element and the <head> element?
A student uses a table to create a two-column page layout, putting the navigation in the left column and the content in the right column. What is wrong with this approach?
What is the purpose of the <figure> and <figcaption> elements? When should you use them instead of a plain <img> tag?
You link to a CSS file with <link rel="stylesheet" href="css/main.css">, but the styles do not appear. Name three possible reasons for this.
What does a screen reader do, and why does proper HTML structure matter for screen reader users?
Explain the difference between <em> and <strong>. When should you use one instead of the other?
Your HTML page has five <h1> elements, one for each major section. Is this a problem? Explain.

Chapter 10 Checklist

Use this to confirm your understanding before moving to Chapter 11

Concepts

I can explain what metadata is and why it has no visible content but still matters.
I can correctly declare character encoding and explain why UTF-8 must be declared first.
I can write a correct viewport meta tag and explain why it matters for mobile devices.
I can write a unique, specific page title and an accurate meta description.
I can explain what a favicon is and link one correctly.
I can explain what a canonical link does and when a beginner project needs one.
I can describe Open Graph and Twitter Card metadata and their effect on shared links.

Applications

I can explain how search engines read HTML pages and connect SEO to semantic, accessible structure.
I can validate an HTML document using the W3C Markup Validation Service and fix the errors it reports.
I can apply the Document Quality Checklist to review any HTML page I build.

Study Habits

I understand why validation catches problems that browsers silently forgive.
I know how to read a validator error message and find the corresponding line in my code.
I treat metadata as a normal, required part of every page, not an optional extra.

Preview — Chapter 11

What CSS Does

Chapter 10 closes Part II. You have now built complete, valid, accessible, well-documented HTML pages. You have structure, content, links, images, forms, and metadata. But your pages have no visual design beyond the browser's default styles — black text on a white background, blue links, large bold headings, with no custom colors, fonts, layout, or spacing decisions that you made intentionally. Chapter 11 begins Part III: CSS — Style and Layout. You will learn what CSS is, how it separates presentation from structure, how CSS rules are written, and how to link an external stylesheet to an HTML file. You will write your first CSS rules and see your pages begin to take on a designed appearance.

MGU Library Connection

Web Development: HTML, CSS, and JavaScript — Appendix B: HTML Reference
Web Development: HTML, CSS, and JavaScript — Appendix M: Glossary of Web Development Terms
Companion resource: Metadata and SEO Basics Checklist
Companion resource: HTML Validation Quick Reference
Next: Chapter 11 — What CSS Does (Part III begins)
MGU Digital Literacy — background reading on web standards and accessibility

Chapter 10:Metadata, SEO Basics,and Document Quality

Chapter Introduction and Learning Objectives

Learning Objectives

Sections at a Glance

What Metadata Is

Character Encoding

Viewport Metadata

Page Titles and Descriptions

Favicons

Canonical Links at an Introductory Level

Social Sharing Metadata at an Introductory Level

Search Engine Clarity

HTML Validation

Document Quality Checklist

Worked Example: Reviewing a Page Head

Worked Example: Before and After Document Quality Review

Running Project: Student Learning Site — Chapter 10 Update

Chapter Summary

Key Terms

Code Reading

Code Block A

Code Block B

Code Block C

Code Block D

Predict the Result

Debugging and Error Analysis

Debug 1

Debug 2

Debug 3

Debug 4

Debug 5

Accessibility Check

Chapter 10:
Metadata, SEO Basics,
and Document Quality