HTML Meta Tags
A meta tag is an empty element in the head that gives a fact about the page. Browsers and search tools read the facts and adjust how the page is handled.
The charset tag
A character set is the collection of letters and symbols a page can use. UTF-8 is a character set that covers letters from many languages.
<meta charset="UTF-8">The viewport tag
The viewport tag tells a phone browser how wide the page is. The width value device-width matches the width of the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Description and author tags
The name attribute says which fact the tag carries. The content attribute holds the fact itself.
<meta name="description" content="A guide to city parks and trails.">
<meta name="author" content="Maya Chen">Meta tags stay invisible
Meta tags sit in the head and never print on the page. Only the body content below appears.
<p>Only this line appears on the page.</p>Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>City Library</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Books, events, and study rooms at the city library.">
<meta name="author" content="Maya Chen">
</head>
<body>
<h1>City Library</h1>
<p>Books for every reader.</p>
</body>
</html>Key points
- Meta tag: an empty element that gives one fact about the page
- Meta tags speak to tools, not to readers
- charset: the value that names the character set of the page
- Viewport: the window area that shows the page on a screen
- Description: a short summary that search tools can show for the page
- Author: the name of the person who wrote the page
In this example, four meta tags sit in the head under the title. The charset tag names UTF-8 as the character set. The viewport tag matches the page width to the screen. The description and author tags name a summary and the writer. None of the four prints, and the body shows only the heading and the paragraph.
Note
The viewport tag matters most on phones, where a wide page would shrink to fit
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which meta tag helps a page fit a phone screen?