Learning HTML - Basic Structure of an HTML Document

#Introduction

Every web page starts from the same skeleton. After understanding HTML's role in episode 1, it's time to build the basic structure of an HTML document — the backbone you'll use across this entire series. A properly structured document makes it easier for browsers, search engines, and other developers to read your page.

Episode 2 breaks down the four main parts of a document: <!DOCTYPE html>, the html element, the head element, and the body element. We'll also cover the important metadata that belongs inside head, plus the rules for writing correct markup.

#Anatomy of an HTML Document

#A Four-Part Skeleton

Every valid HTML document consists of four sequential parts:

Notice the order: DOCTYPE on the first line, then the html element wrapping the entire document, with head for metadata and body for visible content inside it.

#The Role of the DOCTYPE

The first line <!DOCTYPE html> is not a tag — it's a declaration that tells the browser the document uses the HTML5 standard. Without a DOCTYPE, the browser enters quirks mode, a compatibility mode for old pages that makes rendering inconsistent across browsers.

Always write <!DOCTYPE html> exactly like that, on the first line, before any element.

#The html, head, and body Elements

#The html Element

The html element is the document root — it wraps all other elements. Give it a lang attribute to indicate the content's language:

The lang attribute matters for screen readers (pronunciation) and search engines (language understanding). The code id means Indonesian; use en for English.

#The head Element

The head element contains metadata — information about the document that isn't directly visible on the page: the title, charset, viewport, description, and links to stylesheets. All the metadata we'll discuss in episode 16 lives here.

The common order inside head: meta charset first so the browser knows the encoding before reading the rest, then meta viewport for responsive pages, then the title.

#The body Element

The body element holds all visible content: headings, paragraphs, images, links, forms, and more. Most of what you'll learn from episode 3 to episode 22 lives inside body.

#Important Metadata in head

#Charset and Viewport

Two meta tags that are required on nearly every modern page:

meta charset="UTF-8" sets the UTF-8 character encoding, which supports almost all languages including Latin scripts and special characters.
meta name="viewport" sets the viewport width so the page displays proportionally on small screens — a basic key to responsive web that we'll deepen in episode 20.

Without viewport, a page on a phone renders shrunken as if it were a desktop screen — users must zoom in to read.

#The title Element

The title element defines the browser tab title and the search results title. A clear, descriptive title is important for SEO and user experience. The ideal length is around 50 to 60 characters.

#Rules for Writing Correct Markup

#Paired and Nested Tags

Most HTML elements consist of an opening tag, content, and a closing tag. Elements that have no content, like meta and img, are called void elements and don't need a closing tag.

Markup must be nested correctly — the element opened last is closed first:

Crossing elements — like opening strong before closing p — is a common mistake that breaks the document structure.

#Format Consistency

Follow a few conventions so code is easy to read:

Write tags in lowercase.
Indent with two spaces per level.
Use double quotes for attributes.
Include the lang attribute on the html element.

#Exercise: Your First Complete Document

Combine everything you've learned into index.html:

Save the file, then open it through the local server:

Open the page through the server

python3 -m http.server 8080

Open http://localhost:8080 and look at the Elements panel in DevTools — the structure shown there should be exactly what you wrote. The command python3 -m http.server 8080 above gets reused again and again throughout this series, so get used to it now.

#Common Mistakes and Solutions

#Forgetting the DOCTYPE

Without <!DOCTYPE html>, the browser enters quirks mode and the page may render with different spacing and font sizes. Always start documents with that declaration.

#Meta in the Wrong Place

meta and title must live inside head, not body. The browser will still process them, but the document becomes invalid and SEO results suffer.

#Closing

Episode 2 builds the skeleton you'll use on every page: the DOCTYPE, the html element with its lang attribute, a head containing charset and viewport, and a body for content. You also learned the rules of nesting and format consistency.

Key takeaways:

<!DOCTYPE html> must be on the first line so the browser uses standards mode.
html is the document root; use the lang attribute for the language.
head holds metadata; body holds visible content.
meta charset="UTF-8" and meta viewport are required on modern pages.
Always pair tags and nest them correctly.

In the next episode, episode 3, we'll cover basic text and block elements — paragraphs, headings, span, div, and text formatting elements like strong and em — along with the difference between block and inline elements. Your document skeleton will start filling up with real content.