You might see <meta> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.
The Idea in Plain English
Defines document metadata such as character encoding, description or viewport. Most meta tags belong inside head.
For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<head>
<meta charset="utf-8">
<meta name="description" content="A friendly HTML lesson for beginners.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>What Each Part Does
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- The head holds page metadata, not the visible lesson content.
- charset identifies the character encoding used by the document.
- name identifies a field in submitted form data or a named metadata entry.
- content supplies the value of a meta declaration.
The browser and other software can use the document metadata.
Try It Yourself
Try replacing the example content with your own while keeping the valid HTML structure.
Common Beginner Mistakes
- Putting metadata in the body or using meta to replace visible page content.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Defines document metadata such as character encoding, description or viewport. Most meta tags belong inside head.
- The browser and other software can use the document metadata.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.