HTML Basic Structure & DOCTYPE

The Skeleton Every Page Shares

Every HTML page, from a one-line practice file to the home page of a bank, has the same four-part skeleton. Learn it once and you never have to think about it again — most developers keep a copy in a snippet and start every new file by pasting it.

The four parts each answer a different question. <!DOCTYPE html> tells the browser which rules to render by. <html> is the root element: everything else on the page lives inside it, which is why the DOM tree has a single trunk. <head> holds information about the page that the visitor does not read directly. <body> holds everything the visitor actually sees.

Read the example below and notice the nesting. <head> and <body> are siblings — they sit side by side inside <html>, and one is never inside the other. Getting this wrong is one of the few HTML mistakes browsers cannot fix gracefully, and it usually shows up as content appearing in a strange order or styles refusing to apply.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Robotics Club — Annual Project Showcase</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h1>Annual Project Showcase</h1>
  <p>Projects built by second-year students this semester.</p>

  <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html> — first line of the file, switches the browser into standards mode
<html lang="en"> — the root element, and where you declare the page's language
<head> — metadata: title, character set, viewport, stylesheet links
<title> — the one thing in the head that a visitor really does see, in the browser tab
<body> — every heading, paragraph, image, link and form the visitor interacts with

The head Is Not the Header

This trips up almost every beginner, because the two words sound the same. <head> is the metadata section at the top of the file, and nothing you put there is displayed on the page. <header> is a completely different element that lives inside <body> and represents the visible banner at the top of your page — your site name, your logo, your navigation menu.

So if you write your site title and menu inside <head>, expecting them to appear at the top of the page, you will get a blank page and no error message. Browsers handle stray content in the head by ignoring it or by silently moving it into the body, and either way the result is confusing. The rule is simple: if a human is meant to read it, it belongs in <body>.

A related question is why the head exists at all. The browser needs certain facts before it can render anything sensibly — which character encoding to decode the text with, how wide the screen should be treated as, which stylesheet to fetch. Putting those first means the browser can start work on them while the rest of the file is still downloading.

Notes

A useful memory hook: head is for machines (browsers, search engines, social media previews), header is for people. You will meet <header> properly in the lesson on semantic elements.

The Two meta Tags You Should Never Leave Out

<meta charset="UTF-8"> tells the browser how to turn the bytes in your file back into characters. UTF-8 can represent every character in every language — Hindi, Tamil, Bengali, the rupee sign, curly quotation marks, mathematical symbols. Leave it out and a browser may fall back to an older encoding, at which point your rupee signs and regional-language text turn into strings of nonsense characters such as â‚¹. This tag should be the first thing inside your head, because the browser has to know the encoding before it can correctly read the rest of the file.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> is what makes a page usable on a phone. Without it, a mobile browser assumes your page was designed for a desktop monitor, renders it about 980 pixels wide and then shrinks the whole thing down, so your visitor sees a tiny, unreadable version of a desktop page and has to pinch to zoom. width=device-width tells the browser to treat the viewport as the actual width of the device instead.

The third meta tag worth knowing is the description. It does not change how your page looks at all, but search engines often use it as the grey summary line under your page's title in results, and messaging apps use it in link previews. Write it as a real sentence aimed at a human, not a list of keywords.

Example

<head>
  <!-- Encoding first, before any text content -->
  <meta charset="UTF-8">

  <!-- Makes the page behave properly on phones -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Shown by search engines and link previews -->
  <meta name="description" content="Projects built by second-year students at the robotics club, with photos and build notes.">

  <title>Robotics Club — Annual Project Showcase</title>
  <link rel="stylesheet" href="styles.css">
</head>

Notes

There is also a <meta name="keywords"> tag you will see in old tutorials. Major search engines stopped using it many years ago because it was so heavily abused. Adding it does no harm, but it does nothing useful either — spend the effort on a good <title> and description instead.

Why lang and title Matter More Than They Look

The lang attribute on <html> declares what language the page is written in — lang="en" for English, lang="hi" for Hindi. It is two characters of typing and it does three real jobs. A screen reader uses it to choose the correct pronunciation rules, so an English page read with Hindi pronunciation rules is unintelligible. Browsers use it to offer translation. Search engines use it to serve your page to the right audience.

The <title> element is the hardest-working line in your head section. It names the browser tab. It becomes the default text when someone bookmarks your page. It is the blue clickable headline in search results. Because it appears in so many places out of context, it should make sense on its own: "Annual Project Showcase — Robotics Club" tells a reader with twenty tabs open exactly what they are looking at, whereas "Home" or "Untitled Document" tells them nothing.

A page can have exactly one <title>, and it is required — a document without one is technically invalid. Give every page in your site a distinct title. If five pages all say "My Website", both your visitors and search engines lose the ability to tell them apart.

Notes

<title> takes plain text only. Putting tags inside it, such as <title><b>Home</b></title>, does not make the tab bold — the browser will show the angle brackets or strip them, and neither is what you wanted.

Where Stylesheets and Scripts Go

Two more tags appear in almost every real page. <link rel="stylesheet" href="styles.css"> attaches a CSS file, and it belongs in the head so that the browser can fetch and apply your styles before it paints anything. If you attach a stylesheet at the bottom of the body instead, visitors may briefly see an unstyled page before it snaps into shape.

<script src="script.js"></script> attaches a JavaScript file, and the usual advice is the opposite: put it just before the closing </body> tag. A plain script tag blocks the browser from continuing to parse the page while it downloads and runs, so a script in the head delays your content appearing. Placing it at the end means the HTML is already parsed by the time the script runs, which also spares you the classic beginner error of a script trying to find an element that does not exist yet.

Note that <script> always needs a closing tag even when it has a src attribute and no content between the tags. Writing it as a self-closing <script src="..." /> does not work in HTML, and everything after it on the page will be swallowed.

Indent nested elements by two spaces — HTML ignores the indentation completely, but you will not be able to read your own file without it
Keep tag names and attribute names lowercase; it is not required, but every codebase you join will expect it
One blank line between major blocks of content makes a long file far easier to scan
Do not put a stylesheet link inside <body>, and do not put a plain <script> in <head> unless you have a specific reason
Save the whole skeleton as a snippet or template file — retyping it from memory every time is how typos creep in