Every web page rendered in a browser starts as a text file written in HTML. The browser parses that file, builds a tree of objects called the DOM, and renders it according to CSS rules. Understanding both systems at a structural level — before adding JavaScript — gives developers a reliable foundation for building any interface.
Semantic HTML5 elements
HTML5 introduced a set of elements that carry meaning beyond their visual presentation. Instead of wrapping every section of a page in a <div>, the specification provides purpose-specific tags:
<header>— introductory content for a page or section<nav>— a group of navigation links<main>— the primary content area, unique per page<article>— a self-contained composition such as a blog post or news story<section>— a thematic grouping of content, typically with a heading<aside>— content tangentially related to the surrounding content<footer>— closing information for a page or section
Screen readers and search engine crawlers use these structural signals to understand a page's outline. The W3C HTML5 specification defines the exact semantics for each element.
The document outline
Heading elements — <h1> through <h6> — create a hierarchical outline of the document. A single <h1> per page typically contains the primary topic. Subsequent headings subdivide that topic. Skipping levels (for example, jumping from <h1> to <h3>) creates a broken outline that assistive technologies read incorrectly.
Example: a minimal well-structured page
<!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>
<header>
<nav><a href="/">Home</a></nav>
</header>
<main>
<article>
<h1>Article title</h1>
<p>Body text begins here.</p>
</article>
</main>
<footer><p>© 2026</p></footer>
</body>
</html>The CSS box model
Every HTML element is treated by the browser as a rectangular box. The CSS box model describes how that box is sized and spaced. It has four layers, from inside out:
- Content — the actual text or image
- Padding — transparent space inside the border
- Border — an optional line around the padding
- Margin — transparent space outside the border
By default, browsers use box-sizing: content-box, which means width and height apply only to the content area. Padding and border are added on top. Most stylesheets reset this to box-sizing: border-box so that declared dimensions include padding and border:
*, *::before, *::after {
box-sizing: border-box;
}CSS layout systems
Modern CSS provides two primary layout systems:
Flexbox
Flexbox arranges elements along a single axis — either row or column. It excels at distributing space within a container and aligning items:
.container {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
}Grid
CSS Grid creates two-dimensional layouts. It controls both rows and columns simultaneously, making it the appropriate choice for page-level structure:
.page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}Cascade, specificity, and inheritance
When multiple rules target the same element, CSS resolves conflicts using three mechanisms: cascade order (later rules win over earlier ones), specificity (a numeric score based on selector type), and inheritance (certain properties like color and font-size pass from parent to child by default).
The MDN specificity guide provides a complete breakdown of the calculation.
Responsive design with media queries
Media queries apply CSS conditionally based on viewport width, allowing the same HTML to render differently across screen sizes:
@media (max-width: 768px) {
.page-grid {
grid-template-columns: 1fr;
}
}The standard approach is mobile-first: write base styles for small screens, then add breakpoints that expand the layout as the viewport grows.