Lesson 24 of 55 · HTML
Metadata – Charset, Viewport, HTTP‑Equiv
Duration: 8 min
Essential Meta Tags
<meta charset='UTF-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='author' content='John Smith' />
<meta name='theme-color' content='#317EFB' />
Purpose
charset– Declares character encoding (UTF‑8 recommended). Must be the first meta tag.http-equiv– Provides HTTP‑header equivalents;X-UA-Compatibleforces modern Edge/IE rendering mode.author,theme-color– Metadata for author credit and PWA theming on mobile browsers.
Placement
Always place the charset meta tag as the first element inside <head> to avoid rendering glitches. The viewport meta tag (see Lesson 25) should follow immediately after.
Quick checklist for meta tags
<meta charset>first in<head>? ✅http-equiv='X-UA-Compatible'present for legacy support? ✅- Author and theme metadata added where appropriate? ✅
- Viewport meta tag included (see Lesson 25)? ✅
Tip: When you add a language version of a page, also add a
hreflanglink in the head to help search engines serve the correct regional version.