Chapter 2: Understanding Modern HTML
Modern HTML is a living language that grows carefully and steadily. You do not wait for a new version number to write modern pages. Instead you learn the current standard, use features that are well supported, and layer in optional enhancements as needed. This chapter explains how HTML works today, how browsers see your pages through the DOM, and how to structure documents that are clear, semantic and pleasant to maintain.
HTML as a living standard
HTML is maintained as a living standard. That means the specification is updated continuously rather than frozen into large versioned lumps. New elements and attributes are added when they prove useful, old ideas are refined, and guidance becomes clearer over time. Writers benefit because they can follow stable patterns now, then adopt small improvements when they are ready.
When planning features, think in layers. Start with solid HTML that works everywhere, then add optional CSS and JavaScript. If a brand new feature is not yet supported in some browsers, provide a fallback. This practical mindset keeps your pages resilient in the real world.
The DOM (Document Object Model)
The DOM is the browser’s in-memory representation of your document. Every element becomes a node, every attribute becomes a property, and the hierarchy of your HTML turns into a tree that scripts and tools can read or modify. You write source HTML, the browser parses it into the DOM, then layout and rendering turn that model into pixels.
From HTML source to a node tree
Parsing turns tags into nodes and text into text nodes. Whitespace that matters to layout is kept, while other whitespace may be collapsed. Comments are kept as nodes but never rendered. The important part is the shape of the tree, because that is what CSS selectors and scripts act upon.
<ul id="plan"><li>Write</li><li>Edit</li><li>Publish</li></ul>This snippet becomes a root ul node with three child li nodes. A rule like #plan li matches each list item because the selector walks the same tree structure.
DOM may not match your source exactly; the parser can fix some mistakes by inserting missing elements such as a hidden <tbody> in a table.
Elements, attributes, and document structure
An element is a named piece of structure such as <p> or <img>. Attributes refine an element with extra data such as src, alt, href, or type. Together they form meaningful content that tools can understand and users can navigate.
Nesting that reflects meaning
Elements should be nested to match intent. A link that wraps a product name and price communicates a single tap target. A <figure> that wraps an image and a <figcaption> binds them into one semantic unit. Aim for structure that tells a clear story to both people and machines.
<figure><img src="chart.png" alt="Sales chart"><figcaption>Quarterly sales, 2024…</figcaption></figure>alt on images and aria-label on interactive controls; screen readers rely on them.
Void elements and optional tags
Some elements are void, which means they have no closing tag. Examples include <img>, <br>, and <meta>. Other tags are optional in certain contexts, such as a closing <p> before another block. For clarity in books and tutorials, write the explicit form unless you are showing how the parser recovers.
Block and inline elements
HTML distinguishes between block elements that form the main layout flow, and inline elements that sit within a line of text. This default behavior can be changed with CSS, but learning the defaults helps you predict how content will flow before you add styles.
Common defaults
| Category | Examples | Notes |
| Block | <div>, <p>, <ul>, <article> | Start on a new line, expand to available width |
| Inline | <span>, <a>, <strong>, <code> | Flow within text, do not force a line break |
Use block elements to group and structure sections, and inline elements to annotate text with meaning such as emphasis or code styling.
Head elements <head>, metadata, and linking resources
The <head> holds information about the document rather than the content itself. Typical entries include character encoding, title, viewport settings, icons, and links to stylesheets. Search engines and social networks also read metadata to build previews.
A practical <head> template
<head>
<meta charset="utf-8">
<title>Site title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/site.css">
<meta name="description" content="Short description">
<meta property="og:title" content="Site title">
<meta property="og:description" content="Short description">
</head>
The order above places encoding first, then the human readable <title>, then viewport for mobile, followed by styles and descriptions. Keep it short and clean.
<title> that leads with the page topic; search results often truncate long titles.
Favicon and basic site identity
A favicon helps users recognize your site in tabs, bookmarks, and history. Provide a modern square icon, then link it in the <head>. You can include multiple sizes for different devices, but one clear 32×32 or 48×48 PNG covers most needs. These can be easily created in any simple graphical editor or there are online favicon creators you can use.
<link rel="icon" href="/icons/favicon.png" sizes="32x32">For richer identity on mobile, add an apple-touch-icon and a theme color so the browser UI can match your brand.
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="theme-color" content="#224466">Semantic page structure
Semantic elements describe the roles of sections in a page. A <header> introduces context, <nav> groups primary links, <main> holds the main content for the page, <article> wraps a standalone piece, <aside> contains related material, and <footer> ends the page or section. These hints help assistive technology, search engines, and your future self.
A small semantic skeleton
<header>
<h1>Site title</h1>
<nav aria-label="Primary">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main id="content">
<article>
<h2>Post title</h2>
<p>Intro text…</p>
</article>
<aside aria-label="Related">
<p>Links and notes…</p>
</aside>
</main>
<footer>
<p>© 2025 Your Name</p>
</footer>
<main> per page, and ensure it has the primary content so skip-to-content links work well.
Creating a clean and minimal homepage
A minimal homepage loads fast, reads clearly, and sets a consistent baseline for the rest of the site. Start with a tidy structure, small CSS, and simple identity. Avoid heavy frameworks until you have a need that justifies them.
A modern, compact HTML skeleton
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Andy Mann</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Design and code, simply done">
<link rel="icon" href="/icons/favicon.png" sizes="32x32">
<style>
html, body {
margin : 0;
padding : 0;
}
h1 {
font-size : 1.8rem;
margin : 0 0 .5rem 0;
}
h2 {
font-size : 1 .4rem;
margin : 1.5rem 0 .5rem 0;
}
p {
margin : .8rem 0;
}
</style>
</head>
<body>
<header>
<h1>Andy Mann</h1>
<nav aria-label="Primary">
<a href="/" aria-current="page">Home</a>
<a href="/work">Work</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main id="content">
<h2>Hello</h2>
<p>Welcome to my personal website</p>
</main>
<footer>
<p>© 2025</p>
</footer>
</body>
</html>
This starter shows a small yet complete page. It sets encoding and viewport, declares a title and description, links an icon, and includes a tiny embedded stylesheet for fast first render.