Anatomy of an HTML file

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications.

File extensions: .html, .htm

Every part of the example below is labelled and explained. This page is one of 55 annotated tours on AnatomyOf, a free, open-source project by LunarWerx Studios.

What is inside an HTML file

Comment

Ignored by the browser, used for notes ().

An HTML comment starts with ; anything between them is parsed but never rendered or executed. Comments can span multiple lines and are stripped from the accessibility tree and rendered output entirely, though they remain visible to anyone who views the page source. They are commonly used to label sections of a long document, leave notes for other developers, or temporarily disable a block of markup while debugging. Unlike server-side templating comments, HTML comments are still sent to the client, so they are not a place to hide sensitive information.

Document type declaration

Instructs the browser about the HTML version (<!DOCTYPE html>).

<!DOCTYPE html> must be the very first line of an HTML5 document. It is not an HTML tag but an instruction to the browser to render the page in standards mode rather than quirks mode, which older, doctype-less documents triggered for backward compatibility with pre-CSS layouts. Quirks mode changes box-model math, table sizing, and other layout behaviors in ways that are hard to predict, so omitting or misplacing the doctype can silently break a modern layout. The HTML5 doctype is deliberately short compared to the versioned, DTD-referencing doctypes required by HTML 4.01 and XHTML.

Root element

The container for all other HTML elements (<html>).

<html> is the single top-level element that wraps the entire document; every other element, including <head> and <body>, nests inside it. Its lang attribute (e.g. lang="en") declares the document's primary language, which screen readers use to choose pronunciation rules and browsers use for features like spell-check and translation prompts. A document with more than one <html> element, or markup outside it, is invalid; browsers will still attempt to recover and render something reasonable, but validators and some tooling will flag it. The closing </html> tag marks the end of the parsed documen

Head element

Container for metadata, title, and links to external resources.

<head> holds information about the document rather than content the user sees directly: character encoding, viewport configuration, the page title, linked stylesheets, and <script> or <meta> tags used by browsers, search engines, and social media crawlers. Almost nothing inside <head> renders visibly on the page itself. Because the browser reads <head> before it can safely start painting <body>, large synchronous resources referenced there (like blocking scripts) can delay first render. That is why stylesheets are typically linked in <head> but non-critical scripts are often deferred or moved

Metadata elements

Information about the document, not displayed directly (<meta>, <title>, <link>).

Body element

Contains all the visible content of the page.

Everything a visitor actually sees or interacts with (text, images, links, forms, and embedded media) lives inside <body>. A document has exactly one <body>, and it must come after <head> closes. The browser begins painting as <body> streams in, incrementally laying out and rendering elements as they arrive, which is why placing render-blocking <script> tags late in <body> (or marking them defer) is a common performance practice.

Attribute

Provides additional information about an element (name="value").

An attribute is a name/value pair written inside an opening tag, such as href="styles.css" on a <link> or <a> element. Values are conventionally quoted with double quotes, and most attributes are optional with sensible defaults; a few, like alt on <img>, are effectively required for accessibility even though the parser will not reject their absence. Some attributes are boolean and need no value at all. Their mere presence turns the behavior on, e.g. <input disabled> or <script defer>. Global attributes like class, id, and data-* are valid on virtually any element, while others, like href, only

Semantic elements

Elements with meaning, defining page structure (<header>, <main>, <footer>, ...).

Semantic elements describe the role a section of content plays rather than just how it looks: <header> for introductory content, <main> for the single primary content area of the page, <footer> for trailing content like copyright notices, plus siblings like <nav>, <article>, <section>, and <aside>. Before HTML5, developers approximated all of these with generic <div id="header">-style markup that carried no inherent meaning. Using the correct semantic element gives screen readers and other assistive technology landmarks to jump between, and gives search engines stronger signals about page stru

Nested elements

Elements placed inside a parent element, forming a tree structure.

HTML documents form a tree: <ul> contains one or more <li> children, <main> contains <header>-adjacent sections, and so on, with each element fully opening and closing before or after its siblings. Proper nesting means closing tags in the reverse order they were opened: overlapping tags like <b><i>text</b></i> are invalid, even though browsers often recover from the mistake silently. Some parent/child relationships are enforced by the HTML spec rather than left to convention: a <ul> or <ol> may only directly contain <li> elements (plus scripting elements), so browsers will silently relocate or

Block-level defaults

Elements whose default CSS layout starts a new block, such as <h1>, <p>, and <ul>.

A block-level element, by default, starts on its own line and stretches to fill the width of its container, stacking vertically with its siblings. Headings (<h1>-<h6>), paragraphs (<p>), lists (<ul>, <ol>, <li>), and container elements like <div> and the semantic elements are all block-level by default. This is CSS display behavior, not a fixed HTML property. display: inline or display: flex can change how any element lays out regardless of its default. The block/inline distinction is nonetheless a useful mental model for predicting how unstyled markup will flow.

Inline defaults

Elements whose default CSS layout flows within surrounding text, such as <a>, <span>, and <img>.

An inline element flows within the surrounding text instead of breaking onto its own line, taking up only as much width as its content needs. <a> (links), <img> (images), <span>, <strong>, and <em> are all inline by default, which is why a sentence can contain a link in the middle without disrupting the paragraph's line breaks. Inline elements generally ignore top/bottom margin and height in ways block elements do not, since they are meant to sit inside a line box rather than define one. <img> is a notable exception in that it behaves like inline content but still respects width and height for

Void element

An element that does not have a closing tag or content (<img>, <meta>, <link>, ...).

A void element cannot have children and is written without a matching closing tag: <img>, <meta>, <link>, <br>, <hr>, and <input> are the common examples. In HTML5 syntax, a trailing slash like <img /> is permitted but purely cosmetic. It has no effect and is not required, unlike in XHTML where self-closing syntax was mandatory. Because void elements never contain content, all of their data is expressed through attributes: <img src="image.jpg" alt="A descriptive image"> conveys everything about the image through src and alt rather than through child nodes.

Official HTML site · All languages on AnatomyOf

The interactive tour needs JavaScript. Enable it to hover a callout and trace it into the code.