FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Layout

Intermediate

HTML Meta

Learn HTML Meta with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.

HTML structure and layout

Meta elements give browsers, search engines and platforms document-level facts.

The meta element is used inside head for metadata that does not have its own dedicated HTML element. Common examples include charset, viewport, description, robots and social sharing tags.

Meta tags are powerful because they affect behavior outside the visible page: mobile scaling, snippets, indexing and link previews.

Good meta is specific, honest and page-level. Repeating the same generic metadata on every page wastes a useful signal.

charset

Defines the character encoding.

viewport

Controls mobile viewport scaling.

description

Short human-readable page summary.

robots

Search indexing and crawling instructions.

Syntax and structure

Meta tags are name-value or attribute-value facts about the document.

Most meta tags use name and content. Charset is a special case with its own attribute.

Specific metadata

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML meta tags with practical examples.">
<meta name="robots" content="index,follow">

Generic or misleading metadata

<meta name="description" content="Best website, cheap, fast, amazing, number one.">
<meta name="keywords" content="html,html,html,html tutorial">

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML meta tags with practical examples.">
<meta name="robots" content="index,follow">
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="demo-card">
  <h1>Meta checklist</h1>
  <p>Write metadata for a page about semantic HTML.</p>
  <pre>&lt;meta name="description" content="..."&gt;</pre>
</main>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

h2 {
  margin: 0 0 10px;
}

p, li {
  color: #cfd8e6;
  line-height: 1.7;
}

a {
  color: #8cffc1;
  font-weight: 900;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
}

pre { white-space: pre-wrap; color: #8cffc1; }
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<meta name="description" content="Best website, cheap, fast, amazing, number one.">
<meta name="keywords" content="html,html,html,html tutorial">
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Structure should stay readable before the design layer is applied.

Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.

Keep descriptions specific

A meta description should summarize this exact page.

Do not keyword stuff

Modern SEO is not won by repeating keywords in meta tags.

Use viewport on responsive pages

It is essential for normal mobile behavior.

Use robots deliberately

Do not accidentally noindex pages that should rank.

Avoid duplicate descriptions

Large sites should generate unique page descriptions.

Validate social previews

Open Graph and Twitter tags should match the real page content.

Production thinking

HTML structure affects design, accessibility, SEO and long-term maintenance.

Why does this matter?

This matters because metadata decides how a page behaves before someone even reads the content.

Accessibility

Meta viewport affects zoom and mobile usability. Avoid settings that block user scaling.

Production note

Metadata should be part of a launch checklist, especially for SEO landing pages and shareable content.

SEO note

The description is not a magic ranking lever, but it strongly affects search result clarity and click-through.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Write a better description for the current lesson.
  • Add a robots value and explain what it does.
  • Explain why meta keywords are not the main SEO strategy.

Practice assignment

Do this before moving to the next lesson.

  1. Write metadata for three different lesson pages.
  2. Make every description unique.
  3. Check whether each description matches the visible page.

Try it yourself

Write better page metadata

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?