Part 1: Document Structure — DOCTYPE, head, body, metadata

Introduction

HTML was the first language I touched when I started building things for the web. Everything else — CSS, JavaScript, Python backends, React components — was layered on top of that foundation later. Years of building static documentation sites, tool report pages, and web UIs taught me a consistent lesson: if you don't understand the document structure, you end up fighting the browser instead of working with it.

This part covers the anatomy of an HTML document: what every file needs, what the browser actually parses, and the metadata that controls how your page behaves before a user even sees it.

What HTML Actually Is

HTML (HyperText Markup Language) is not a programming language. It is a markup language — a way to describe the structure and meaning of content using elements (tags). Browsers read the HTML you write, construct a Document Object Model (DOM) tree from it, and use that tree to render what the user sees.

Understanding this matters because:

CSS selects elements in the DOM tree
JavaScript manipulates the DOM tree
Accessibility tools (screen readers) traverse the DOM tree
Search engines index content from the DOM tree

If the HTML structure is wrong, everything sitting on top of it breaks.

The Minimal Valid HTML5 Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
  </head>
  <body>
    <p>Hello, world.</p>
  </body>
</html>

Every HTML file I write starts with exactly this skeleton. Each piece has a specific reason to be there.

`<!DOCTYPE html>`

This declaration tells the browser which version of HTML the document follows. For HTML5 (the current standard), it is always:

<!DOCTYPE html>

Without it, browsers fall into quirks mode — a compatibility mode that emulates old browser behavior from the late 1990s. Layouts break in inconsistent ways, spacing behaves differently, and certain CSS properties stop working as expected.

This is always the first line. It has no closing tag.

The `<html>` Element

<html lang="en">

The <html> element is the root of the document. Every other element lives inside it.

The lang attribute declares the page's primary language. This is not cosmetic:

Screen readers use it to select the correct pronunciation engine
Browser translation tools use it to determine whether to prompt
Search engines use it for multilingual indexing

Use a valid BCP 47 language tag:

Language

Tag

English

en

French

fr

Japanese

ja

Thai

th

Chinese (Simplified)

zh-Hans

The `<head>` Element

The <head> contains metadata — information about the document that is not rendered as visible content.

Character Encoding

<meta charset="UTF-8" />

This must be the first element inside <head>. It tells the browser how to decode the document's bytes into characters.

UTF-8 is the universal choice. It handles every language, emoji, and symbol correctly. Without this declaration, browsers default to a locale-specific encoding, which breaks non-ASCII characters.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Without this, mobile browsers render pages at a desktop-width virtual viewport (typically 980px) then scale it down. The result is tiny text and a bad user experience.

This declaration tells the browser to match the viewport width to the device's actual screen width and start at 1× zoom.

Page Title

<title>Page Title</title>

The <title> element sets the text shown in:

The browser tab
Bookmarks
Search engine results (as the clickable headline)
Screen reader announcements when the page loads

Every page needs a unique, descriptive title.

Common `<head>` Elements

Beyond the minimum, <head> typically contains additional metadata:

External CSS

<link rel="stylesheet" href="styles.css" />

Favicon

<link rel="icon" type="image/png" href="/favicon.png" />

Author and Description (SEO)

<meta name="author" content="Your Name" />
<meta name="description" content="A concise summary of this page's content." />

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Summary for social previews." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:url" content="https://example.com/page" />

Open Graph tags control what appears when someone shares a link on Slack, Twitter, LinkedIn, or other platforms that render link previews.

The `<body>` Element

The <body> contains everything rendered on screen: text, images, headings, links, forms — all visible content.

<body>
  <!-- Page content goes here -->
</body>

HTML comments use  syntax. They are not rendered but are visible in the page source.

HTML Element Anatomy

Before moving further, it is important to understand the terminology:

<p class="intro">This is a paragraph.</p>

Part

Example

Meaning

Opening tag

<p class="intro">

Starts the element

Attribute

class="intro"

Modifies element behaviour or meaning

Content

This is a paragraph.

The element's content

Closing tag

</p>

Ends the element

Some elements are void elements — they have no content and no closing tag:

<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<br />
<hr />
<img src="photo.jpg" alt="Description" />
<input type="text" />

The trailing / before > is optional in HTML5 but I include it habitually for clarity.

Nesting Rules

HTML elements nest inside each other, forming the tree structure the browser parses into the DOM.

Correct nesting:

<p>This is <strong>important</strong> text.</p>

Incorrect nesting (overlapping tags):

<p>This is <strong>important</p></strong>  <!-- wrong -->

Browsers attempt to auto-correct bad nesting, but the corrections they apply differ between browsers. The result is inconsistent rendering. Write correctly structured HTML and the browser behaviour is predictable.

Block vs. Inline Elements

HTML elements have a default display behaviour:

Block elements take the full available width and force a line break before and after:

<p>, <div>, <h1>–<h6>, <ul>, <ol>, <li>, <table>, <form>, <section>, <article>, <header>, <footer>, <main>, <nav>

Inline elements only take up as much width as their content and do not force line breaks:

<span>, <a>, <strong>, <em>, <code>, <img>, <button>, <input>, <label>

This distinction matters because you cannot validly place a block element inside an inline element:

<!-- Invalid: block inside inline -->
<span><p>text</p></span>

<!-- Valid: inline inside block -->
<p><span>text</span></p>

HTML Entities

Certain characters have special meaning in HTML and must be escaped to appear as literal text:

Character

Entity

Use case

<

Less-than sign in text

>

Greater-than sign in text

&

Ampersand in text

"

Double quote inside attribute

'

' or '

Single quote inside attribute

Non-breaking space

 

Prevent line break between words

<p>Use &lt;p&gt; for paragraphs.</p>
<p>Price: 10 &amp; 20</p>

Putting It Together: A Real Page Skeleton

This is the template I use when starting any static HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Page description for search engines." />
    <meta name="author" content="Htunn" />

    <!-- Open Graph -->
    <meta property="og:title" content="Page Title" />
    <meta property="og:description" content="Page description." />
    <meta property="og:url" content="https://example.com/page" />

    <title>Page Title</title>
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav><!-- navigation --></nav>
    </header>

    <main>
      <!-- primary page content -->
    </main>

    <footer>
      <!-- footer content -->
    </footer>

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

A few things to note:

<script> goes at the end of <body> (or uses defer) so it does not block page rendering
Semantic structure (<header>, <main>, <footer>) is established at the skeleton level
Every page has a unique <title> and <meta name="description">

Summary

Concept

Key Point

<!DOCTYPE html>

Activates standards mode — always first

lang attribute

Required for accessibility and i18n

charset="UTF-8"

Must be first in <head> — enables all characters

viewport meta

Required for correct mobile rendering

<title>

Unique per page — tab, bookmark, search result

Block vs inline

Determines layout flow and valid nesting

Void elements

No closing tag needed

Entities

Escape <, >, & in text content

Up Next

Part 2 covers semantic HTML — using the right elements to give content meaning, not just structure.

PreviousHTML 101 NextPart 2: Semantic HTML — Headings, text content, section elements

Last updated 1 month ago

hashtagIntroduction

hashtagWhat HTML Actually Is

hashtagThe Minimal Valid HTML5 Document

hashtag<!DOCTYPE html>

hashtagThe <html> Element

hashtagThe <head> Element

hashtagCharacter Encoding

hashtagViewport

hashtagPage Title

hashtagCommon <head> Elements

hashtagExternal CSS

hashtagFavicon

hashtagAuthor and Description (SEO)

hashtagOpen Graph (Social Sharing)

hashtagThe <body> Element

hashtagHTML Element Anatomy

hashtagNesting Rules

hashtagBlock vs. Inline Elements

hashtagHTML Entities

hashtagPutting It Together: A Real Page Skeleton

hashtagSummary

hashtagUp Next