Module 1: Setup0 Level Beginner

3. HTML5 Boilerplate Code (Line-by-Line Explanation)

Understand every single word of DOCTYPE, html, head, meta, viewport, body

Real-life analogy

Just as a letter has the address written on the envelope at the top (Head) and the actual message inside (Body), every HTML page has a Head and a Body in the same way.

Explanation

These 5 lines are 100% mandatory in every modern web page:

<!DOCTYPE html>: Tells the browser that this is a modern HTML5 page. It is not a tag; it is a Declaration.
<html lang="en">: This is the main Root element inside which the entire website lives.
<head>: It holds the page's metadata (title, language, screen size settings), which does not appear directly on screen as content.
<meta charset="UTF-8">: This ensures that Hindi, emojis (😀) and so on display correctly without breaking.
<body>: The most important! Everything that the user sees on screen (text, buttons, photos) is written inside the body.

Golden rules

There should be only one <body> and only one <head> on the whole page.

Common mistake

Writing a Paragraph or Image inside the <head> tag. Remember, the head holds only settings; visible content goes in <body>.

Example code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Boilerplate Test</title>
</head>
<body style="font-family: sans-serif; padding: 20px;">
  <h2 style="color: #059669;">The boilerplate is working correctly!</h2>
  <p>This text is written inside &lt;body&gt;.</p>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Inside which tag is all the content visible on screen (text, photos, buttons) written?

<head>
<title>
<body>
<meta>

Show answer

Answer: <body>

Only the content of the <body> tag appears in the browser's main window.