Learn the skeleton every HTML page needs — DOCTYPE, html, head, body, meta tags, and title. These five elements are the foundation of every web page.
Why: without it, browsers fall back to quirks mode — a legacy compatibility layer where layout and CSS behave inconsistently. Where: it must be the very first line of the file, before anything else.
<!DOCTYPE html>Why: these three elements are the skeleton every browser expects. <head> holds things the page needs but the user never sees — metadata, stylesheets, scripts. Where: everything visible on the page lives inside <body>.
lang required — Language of the document (e.g. "en", "ar"). Used by screen readers to pick the right voice and by search engines for regional indexing.dir — Text direction — "ltr" (left-to-right) or "rtl" (right-to-left). Inherited by all child elements.<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>Why: charset prevents garbled characters — for example, an apostrophe (') rendering as ’. viewport stops mobile browsers from zooming out to fit a desktop layout. description appears as the snippet under your page title in search results.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A short description of the page." />
</head>Why: it shows in three places — the browser tab, the default bookmark name when someone saves the page, and as the clickable headline in search results. Where: inside <head>.
<head>
<title>My Page Title</title>
</head>