Skybrance logo
HTML›Chapter 1

The Skeleton: Document Structure

DOCTYPE, html, head, title, and body — the bones of every webpage

Every webpage you have ever visited is built on the same five tags. Before you write a single word of content, you need to understand the container that holds it all together.

The Doctype Declaration (<!DOCTYPE>)

The <!DOCTYPE> declaration is the very first instruction you give to the web browser. It is technically not an HTML tag — it is an instruction manual. It tells the browser exactly which version of HTML you are using so it knows how to read your code.

Think of it like agreeing on the rules before starting a board game. Without it, the browser switches into "Quirks Mode" — a survival mechanism where it tries to act like old, buggy browsers from the 1990s to support ancient websites. You do not want that.

<!DOCTYPE html>

Pro tip: It must be line #1. No spaces, no blank lines above it. It is case-insensitive, but uppercase is the professional standard. If your layout looks broken and boxes aren't aligning, check this line first.

The Root Element (<html>)

The <html> tag is the root of your document — the parent of every other element on the page. Everything you write (except the Doctype) must be wrapped inside it.

Think of it as the foundation and roof of a house. You cannot have furniture floating in the sky; it must be inside the house. If you put a tag outside the <html> tags, it is like leaving furniture on the front lawn.

The most critical attribute here is lang. Always declare the human language of the page.

<!DOCTYPE html>
<html lang="en">
  <!-- everything goes here -->
</html>

Pro tip: The lang attribute is not just for show — screen readers use it to select the correct pronunciation accent. Google uses it to determine which country to show your site to.

The Head Element (<head>)

The <head> element contains metadata — data about the data. Nothing inside <head> is visible on the page. This is where the browser picks up its settings before rendering anything.

Think of a theater production. The audience sees the actors and the set (the body). The backstage crew — lighting, scripts, makeup — is the head. The audience never sees the crew, but without them, the show is dark and silent.

<head>
  <meta charset="UTF-8">
  <title>My Super Site</title>
</head>

Pro tip: <meta charset="UTF-8"> tells the browser to use the Universal Character Set, which includes almost every character from every human language — including emojis 🌍. Always include it.

The Title Element (<title>)

The <title> tag defines the name of your document. This text does not appear in the page content — it appears in the browser tab at the top of the screen.

Think of a library aisle where you can only see the spine of each book. The <title> is that spine. It also becomes:

  • The label when a user has 20 tabs open
  • The default name when someone bookmarks your page
  • The big blue link in Google search results
<title>Best Pizza Recipe - SkyBrance's Kitchen</title>

Pro tip: Keep titles under 60 characters. Google cuts off anything longer with "...". Make it accurate and descriptive.

The Body Element (<body>)

The <body> tag contains everything the user actually sees. Text, images, videos, buttons — if it needs to appear on screen, it lives here.

Think of a storefront window. The <head> is the store manager in the back office doing paperwork. The <body> is the showroom floor where products are on display.

<body>
  <h1>Welcome to my store!</h1>
  <p>Browse our products below.</p>
</body>

Pro tip: There can only be one <body> in a document. A human has one body; your HTML file is the same.

The Full Structure

Putting it all together, here is every valid HTML5 page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>
Tag Purpose
<!DOCTYPE html> Declares HTML5 to the browser
<html lang="en"> Root element; sets the language
<head> Metadata, title, links to CSS/JS
<title> Text shown in the browser tab
<body> Everything visible to the user

Memorise this structure. Every single webpage in the world — from Google to YouTube — is a variation of exactly these five lines.

Next

Text Fundamentals: Typography