• in
InterCourses
CoursesBlogs
← Introduction to HTML
○What is HTML?○Elements, Tags, and Attributes○Your First Complete Page
○Headings and Comments○Paragraphs, Emphasis, and Line Breaks○HTML Lists
○Hyperlinks○Images○Applying Styles to HTML
○Div and Span○HTML Tables○Classes and IDs
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions
○The Head Element and Page Title●Meta Tags○HTML Entities
○HTML Forms○Input Types○Checkboxes and Radio Buttons○Textarea and Select
○Embedding Video○Embedding Audio○Iframes
○Semantic HTML Tags○Details, Figure, and Figcaption
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions
Head and Metadata

Meta Tags

Meta tags live inside <head> and provide metadata — data about the page — to browsers, search engines, and social media platforms. Users never see meta tags directly on the page.

The <meta> element

All meta tags are self-closing and use attributes to carry their information:

html
<meta name="..." content="..." />

Common meta tags

Character encoding

html
<meta charset="UTF-8" />

Always the very first tag in <head>. Tells the browser to use UTF-8 encoding (supports all languages and emoji).

Viewport

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

Makes the page responsive. Without it, mobile browsers render a zoomed-out desktop view.

Description

html
<meta name="description" content="Learn HTML from scratch with interactive coding exercises." />

Shown as the snippet under your page title in Google search results. Aim for 150–160 characters.

Keywords (mostly ignored today)

html
<meta name="keywords" content="HTML, web development, tutorial" />

Once used by search engines, but largely ignored now due to spam abuse. Still occasionally seen in older codebases.

Author

html
<meta name="author" content="Jane Smith" />

Identifies who wrote the page.

Open Graph (social sharing)

These tags control how your page appears when shared on social media (Facebook, LinkedIn, etc.):

html
<meta property="og:title" content="Learn HTML" />
<meta property="og:description" content="Interactive HTML lessons for beginners." />
<meta property="og:image" content="https://example.com/thumbnail.png" />
<meta property="og:url" content="https://example.com/learn-html" />

Robots

html
<!-- Tell search engines to index the page and follow its links (default) -->
<meta name="robots" content="index, follow" />

<!-- Prevent a page from appearing in search results -->
<meta name="robots" content="noindex, nofollow" />

HTTP-Equiv

An older pattern that mimics HTTP headers in HTML:

html
<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com" />

Summary

Meta tagPurpose
charsetCharacter encoding
viewportMobile scaling
descriptionSearch snippet
authorPage author
og:*Social media sharing
robotsSearch engine crawl instructions

A well-configured <head> with the right meta tags improves discoverability, accessibility, and the way your pages look when shared.