meta charset viewport author and description
Add essential meta tags for rendering and discoverability.
meta charset viewport author and description is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The meta Element
The <meta> element provides metadata about the page. It is a void element — no closing tag:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML5 from scratch.">
<meta name="author" content="Jane Smith">
</head>meta charset
Declares the character encoding:
<meta charset="UTF-8">
<!-- Must be:
- Inside <head>
- Within the first 1024 bytes of the file
- Best: the first tag inside <head>
- Always use UTF-8 for web pages
-->meta viewport
The viewport meta tag controls rendering on mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->viewport Content Values
Other viewport values you may see:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->
<!-- AVOID: user-scalable=no
It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->meta description
The description meta tag provides a summary used in search results:
<meta name="description" content="
Learn HTML5 semantic elements, forms, accessibility,
and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->meta author
The author meta tag identifies the page author:
<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->meta keywords (Deprecated)
The keywords meta tag was once important but is now ignored:
<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->meta http-equiv
The http-equiv attribute simulates HTTP response headers:
<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">
<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">meta robots
The robots meta tag controls search engine crawling:
<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->
<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">Open Graph Preview of Metadata
A well-configured head section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Forms Guide — CoddyKit</title>
<meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
<meta name="author" content="CoddyKit Team">
<link rel="canonical" href="https://coddykit.com/html/forms">
</head>meta generator
The generator meta tag identifies the tool that created the page:
<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
Some recommend removing it -->Quick Check
Which meta tag is essential for responsive design on mobile devices?
Recap: meta tags
Essential meta tags:
<meta charset="UTF-8">— always first in head<meta name="viewport" ...>— required for responsive design<meta name="description">— 150-160 char SERP snippet<meta name="author">— content authorship- keywords is obsolete; robots controls crawlers
Frequently asked questions
Is the “meta charset viewport author and description” lesson free?
Yes — the full text of “meta charset viewport author and description” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “meta charset viewport author and description”?
Add essential meta tags for rendering and discoverability. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “meta charset viewport author and description” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- title and its Role in SEO
- meta charset viewport author and description
- Canonical URLs and robots meta
- Favicon and Apple Touch Icon