HTML · Meta Tags, Head Section & Favicon · Lesson 18 of 32

Meta Tags, Head Section & Favicon

Meta Tags, Head Section & Favicon

The <head> section contains information about an HTML document that is generally not displayed as normal page content.

It contains metadata, the document title, character encoding, viewport settings, stylesheet references, icons and other information used by browsers, search engines and external services.

Core Idea:

The <head> describes and configures the webpage, while the <body> contains the visible page content.

1. Basic Structure of the <head>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>HTML Learning</title>

</head>

<body>

    <h1>Learn HTML</h1>

</body>

</html>

The <head> contains information and resources needed to interpret and present the document correctly.

2. What Is Metadata?

Metadata means data about data.

In HTML, metadata provides information about the webpage rather than being the primary visible content of the page.

Examples include:

  • Character encoding
  • Page title
  • Page description
  • Viewport configuration
  • Search-engine instructions
  • Canonical URL
  • Social sharing information
  • Theme color
  • Author information

3. The <title> Element

The <title> element specifies the title of the HTML document. 

<title>Learn HTML - CodeStep Academy</title>

The title can appear in:

  • The browser tab.
  • Browser history.
  • Bookmarks.
  • Search-engine results.
  • Other interfaces that identify the document.
Best Practice:

Give every webpage a unique, concise and descriptive title.

4. Character Encoding

The charset attribute specifies the character encoding used by the document. 

<meta charset="UTF-8">

UTF-8 is the standard choice for modern HTML documents and supports a wide range of languages, symbols and Unicode characters.

Remember:

Character encoding should be declared early in the document's head.

5. Viewport Meta Tag

The viewport meta tag controls how a webpage is initially sized and scaled on different devices. 

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">
Property Meaning
width=device-width Uses the device's viewport width.
initial-scale=1.0 Sets the initial zoom level to 1.
Mobile Development:

A correctly configured viewport is essential for responsive webpages.

6. Meta Description

The description meta tag provides a concise description of the page. 

<meta
    name="description"
    content="Learn HTML from beginner to advanced with practical examples and projects.">

Search engines may use the description when generating search-result snippets, although they can choose different text when appropriate.

SEO Tip:

Write a useful, accurate description that reflects the actual content of the page. Avoid keyword stuffing.

7. The keywords Meta Tag

Historically, webpages used: 

<meta
    name="keywords"
    content="HTML, CSS, web development">

Modern major search engines generally do not use the keywords meta tag as a significant ranking signal.

Do Not Rely on It for SEO:

Focus on high-quality content, useful page titles, accurate descriptions, semantic HTML, accessibility, performance and a technically sound website.

8. Author Metadata

An author meta tag can identify the author of a document. 

<meta
    name="author"
    content="CodeStep Academy">

This is descriptive metadata and should not be confused with the visible author information displayed in the page.

9. Robots Meta Tag

The robots meta tag can provide instructions to compliant search-engine crawlers about how a page should be handled.

Common Example

<meta
    name="robots"
    content="index, follow">

Common directives include:

Directive Meaning
index Allows indexing of the page.
noindex Requests that the page not be indexed.
follow Allows links on the page to be followed.
nofollow Requests that links on the page not be followed.
Important:

Search-engine directives are requests interpreted by compliant crawlers; they are not a substitute for access-control or security mechanisms.

10. Preventing Indexing

A page can request that compliant search engines not index it using: 

<meta
    name="robots"
    content="noindex">

This can be useful for certain temporary, private-by-design or duplicate pages, provided the page is still accessible to the crawler.

Security Warning:

noindex does not make a webpage private. Do not use it as a security mechanism for confidential information.

11. Canonical URL

The canonical link identifies the preferred URL for a page when substantially similar content may be accessible through multiple URLs. 

<link
    rel="canonical"
    href="https://example.com/html/meta-tags">

This helps search engines understand which URL should be treated as the primary version.

SEO Tip:

Canonical URLs should point to the intended preferred URL and should be implemented consistently.

12. What Is a Favicon?

A favicon is a small icon associated with a website or webpage.

It can appear in places such as browser tabs, bookmarks and browser interfaces.

A common modern implementation is: 

<link
    rel="icon"
    href="/favicon.ico">

13. Using a PNG Favicon

A favicon can also be supplied as a PNG image. 

<link
    rel="icon"
    type="image/png"
    href="/images/favicon.png">

The exact image format and dimensions should be selected according to the browser and platform requirements you intend to support.

14. SVG Favicon

Modern browsers can support SVG favicons. 

<link
    rel="icon"
    href="/images/favicon.svg"
    type="image/svg+xml">

SVG is particularly useful when a scalable vector icon is appropriate.

15. Apple Touch Icon

Websites can provide a touch icon for supported Apple device workflows. 

<link
    rel="apple-touch-icon"
    href="/images/apple-touch-icon.png">

The exact platform behavior can vary, so production sites should test their icon setup on the devices and browsers they support.

16. Theme Color

The theme-color metadata can provide a preferred color for certain browser UI elements. 

<meta
    name="theme-color"
    content="#1E3A8A">

Browser support and the exact UI affected can vary by platform.

17. Open Graph Metadata

Open Graph metadata helps define how a webpage may be represented when shared on platforms that support the Open Graph protocol.

Common Open Graph Tags

<meta
    property="og:title"
    content="Learn HTML">

<meta
    property="og:description"
    content="Complete HTML learning resources with examples and projects.">

<meta
    property="og:type"
    content="website">

<meta
    property="og:url"
    content="https://example.com/html">

<meta
    property="og:image"
    content="https://example.com/images/html-course.jpg">

18. Important Open Graph Properties

Property Purpose
og:title Title used for social sharing.
og:description Description associated with the shared page.
og:type Describes the type of shared object.
og:url Canonical URL associated with the object.
og:image Image that may be used in the sharing preview.

19. Social Sharing Metadata

Some platforms also support their own metadata conventions. For example, websites may provide Twitter/X card metadata. 

<meta
    name="twitter:card"
    content="summary_large_image">

<meta
    name="twitter:title"
    content="Learn HTML">

<meta
    name="twitter:description"
    content="Learn HTML from beginner to advanced.">

<meta
    name="twitter:image"
    content="https://example.com/images/html-course.jpg">
Best Practice:

Social metadata should accurately represent the page and use images that you have permission to publish.

20. The <link> Element in the Head

The <link> element establishes relationships between the current document and external resources.

Examples include:

<link
    rel="stylesheet"
    href="/css/style.css">

<link
    rel="icon"
    href="/favicon.ico">

<link
    rel="canonical"
    href="https://example.com/page">

21. Linking an External Stylesheet

External CSS files are normally linked from the <head>. 

<link
    rel="stylesheet"
    href="/css/style.css">
CodeStep Academy Standard:

Keep CSS in the provided external stylesheet. Do not add inline or internal CSS to these HTML notes unless the lesson specifically teaches CSS.

22. Resource Hints

The head can contain resource hints that help the browser prepare for resources it is likely to need.

Example: preconnect

<link
    rel="preconnect"
    href="https://fonts.example.com">

Resource hints should be used when there is a genuine performance reason and should not be added unnecessarily.

23. Prefetch

A resource can sometimes be identified as a resource that may be useful for a future navigation. 

<link
    rel="prefetch"
    href="/next-topic.html">

Browser behavior and resource prioritization are controlled by the user agent, so hints should not be treated as guaranteed downloads.

24. Referrer Policy

A referrer policy controls what referrer information is sent with requests from the page. 

<meta
    name="referrer"
    content="strict-origin-when-cross-origin">

This can be useful when controlling how much URL information is shared with external resources.

25. Color Scheme Metadata

A page can indicate the color schemes it supports. 

<meta
    name="color-scheme"
    content="light dark">

This communicates that the document supports both light and dark color schemes. Actual page styling should be implemented through CSS.

26. Metadata Is Not Visible Page Content

A meta description such as: 

<meta
    name="description"
    content="Learn HTML from beginner to advanced.">

does not automatically display that sentence inside the webpage.

If users need to see the description, it should also be presented as appropriate visible content in the <body>.

27. Complete Professional <head> Example

<head>

    <meta charset="UTF-8">

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

    <title>Learn HTML - CodeStep Academy</title>

    <meta
        name="description"
        content="Learn HTML from beginner to advanced with practical examples, exercises and projects.">

    <meta
        name="author"
        content="CodeStep Academy">

    <meta
        name="robots"
        content="index, follow">

    <link
        rel="canonical"
        href="https://example.com/html">

    <link
        rel="stylesheet"
        href="/css/style.css">

    <link
        rel="icon"
        href="/images/favicon.svg"
        type="image/svg+xml">

    <link
        rel="apple-touch-icon"
        href="/images/apple-touch-icon.png">

    <meta
        name="theme-color"
        content="#1E3A8A">

    <meta
        property="og:title"
        content="Learn HTML - CodeStep Academy">

    <meta
        property="og:description"
        content="Learn HTML from beginner to advanced with practical examples and projects.">

    <meta
        property="og:type"
        content="website">

    <meta
        property="og:url"
        content="https://example.com/html">

    <meta
        property="og:image"
        content="https://example.com/images/html-course.jpg">

</head>

28. Important Elements Used in the Head

Element / Metadata Purpose
<title> Defines the document title.
<meta charset> Defines character encoding.
viewport Controls initial viewport behavior.
description Provides a concise page description.
robots Provides crawler directives.
canonical Identifies a preferred URL.
stylesheet Links an external CSS stylesheet.
icon Defines a favicon.
theme-color Suggests a browser UI theme color.
Open Graph Provides social sharing metadata.

29. Common Mistakes

  1. Omitting the <title>.
  2. Using a generic title for every page.
  3. Forgetting the UTF-8 declaration.
  4. Forgetting the viewport meta tag on responsive websites.
  5. Writing misleading meta descriptions.
  6. Using the keywords meta tag as the primary SEO strategy.
  7. Using noindex as a security mechanism.
  8. Using an incorrect canonical URL.
  9. Forgetting to provide a favicon.
  10. Using social-sharing metadata that does not match the page.
  11. Adding unnecessary resource hints.
  12. Adding inline CSS instead of using the site's external stylesheet.

30. SEO-Oriented Head Checklist

  • Use a unique and descriptive <title>.
  • Write an accurate meta description.
  • Use a correct canonical URL when needed.
  • Ensure the page is indexable when it is intended to appear in search results.
  • Use semantic HTML in the visible page content.
  • Provide accurate Open Graph metadata for shared pages.
  • Ensure social preview images are valid and appropriate.
  • Keep metadata consistent with the actual page content.

31. Interview Questions

1. What is the purpose of the <head> section?

View Answer

It contains document metadata, the page title, resource links, icons and other information used by browsers, search engines and external services.

2. What is a meta tag?

View Answer

A meta element provides metadata about the document, such as character encoding, viewport configuration, description or crawler directives.

3. What is the difference between <title> and meta description?

View Answer

The title identifies the document and commonly appears as the browser tab title, while the meta description provides a concise description of the page that search engines may use in result snippets.

4. Why is the viewport meta tag important?

View Answer

It helps control the initial viewport dimensions and scaling on mobile devices, supporting responsive webpage behavior.

5. What is a favicon?

View Answer

A favicon is a small icon associated with a website or webpage, commonly displayed in browser tabs and bookmarks.

6. What is a canonical URL?

View Answer

It identifies the preferred URL for a page when similar content may be accessible through multiple URLs.

7. What is the purpose of Open Graph metadata?

View Answer

It provides information that compatible social platforms can use when generating previews of shared webpages.

8. Can meta tags make a webpage secure?

View Answer

No. Metadata such as robots directives does not provide access control or protect confidential information. Security must be implemented using appropriate authentication, authorization, server configuration and security controls.

32. Exam Questions

Q1. Write the HTML statement used to specify UTF-8 character encoding.

Answer 
<meta charset="UTF-8">

Q2. Write the meta tag used to make a webpage responsive on mobile devices.

Answer 
<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

Q3. Write HTML code to add a favicon.

Answer 
<link
    rel="icon"
    href="/favicon.ico">

Q4. Differentiate between meta description and canonical URL.

Answer

A meta description provides a concise description of the page, whereas a canonical URL identifies the preferred URL for substantially similar or duplicate versions of content.

Q5. What is the purpose of the robots meta tag?

Answer

It provides instructions to compliant search-engine crawlers about indexing and link-following behavior.

Q6. Where is the <title> element placed?

Answer

The <title> element is placed inside the <head> section.

Q7. Name any four types of metadata commonly used in the HTML head.

Answer

Examples include character encoding, viewport, description, robots, author and theme-color metadata.

33. Practical Challenge

Create a complete HTML page for an online HTML Course.

The page must contain:

  • A meaningful document title.
  • UTF-8 character encoding.
  • A responsive viewport configuration.
  • A useful meta description.
  • Author metadata.
  • A favicon.
  • A canonical URL.
  • Robots metadata appropriate for a public course page.
  • Open Graph title, description, URL and image.
  • An external CSS stylesheet.
  • Theme-color metadata.
Advanced Challenge:

Create separate head sections for the course home page, a lesson page and a quiz page. Give each page a unique title and description while maintaining a consistent favicon, stylesheet and social-sharing identity.

34. Quick Revision

Concept Remember
<head> Contains metadata and document configuration.
<title> Defines the document title.
charset Defines character encoding.
UTF-8 Recommended encoding for modern HTML documents.
viewport Controls initial viewport sizing and scaling.
description Provides a concise page description.
robots Provides crawler directives.
canonical Identifies the preferred URL.
favicon Small icon associated with the website/page.
theme-color Suggests a color for supported browser UI.
Open Graph Controls supported social sharing metadata.
<link> Declares relationships with external resources.
Golden Rule:

A professional webpage starts with a well-structured <head>: use a unique title, UTF-8, viewport metadata, an accurate description, appropriate SEO metadata, a favicon and correctly linked external resources.

35. Professional Head Checklist

  • Use <!DOCTYPE html>.
  • Set the correct lang attribute.
  • Declare UTF-8.
  • Add a unique <title>.
  • Add a responsive viewport.
  • Write an accurate meta description.
  • Use a correct canonical URL when appropriate.
  • Configure robots directives intentionally.
  • Add the site's favicon.
  • Link the external stylesheet.
  • Configure social-sharing metadata where appropriate.
  • Use resource hints only when they provide a real benefit.
  • Keep metadata consistent with the actual page content.
  • Never treat metadata as a replacement for security controls.
Start This Course From the Beginning →