Learning how to design a web page in HTML? This step-by-step guide covers the basic HTML structure, adding content, styling with CSS, and making the page responsive — the foundations for building your first web page.
Every web page starts with a standard HTML skeleton. Create a file ending in `.html` and add the core structure:
- `<!DOCTYPE html>` tells the browser this is HTML5. - `<html>` wraps the whole document. - `<head>` holds metadata — the page title, character set, and links to stylesheets. - `<body>` contains everything visible on the page.
Inside the head, include `<meta charset="UTF-8">` and a `<title>`. This skeleton is the foundation every web page is built on, so it is worth understanding before adding content.
Within the `<body>`, add your content using **semantic tags** that describe what each element is:
- `<header>`, `<nav>`, `<main>`, `<footer>` define page regions. - `<h1>` to `<h6>` create a heading hierarchy (use exactly one `<h1>`). - `<p>` for paragraphs, `<ul>`/`<ol>` for lists. - `<img>` for images (always with descriptive `alt` text). - `<a>` for links.
Semantic HTML is not just tidy — it improves accessibility for screen readers and helps search engines and AI engines understand and cite your content. Avoid using generic `<div>` tags for everything.
HTML provides structure; **CSS provides the design**. Link a stylesheet in the head (`<link rel="stylesheet" href="styles.css">`) or use a `<style>` block, then style your elements: set fonts and colours, control spacing with margins and padding, and create layouts using Flexbox or CSS Grid.
For a clean result, define a consistent type scale, a limited colour palette, and generous white space. CSS is where a plain HTML document becomes a designed page — this is the step that most affects how professional the result looks.
To ensure the page works on all devices, add the viewport meta tag to the head: `<meta name="viewport" content="width=device-width, initial-scale=1">`. Then use **CSS media queries** to adjust the layout at different screen widths — for example, stacking columns vertically on phones.
Finally, check accessibility: ensure strong colour contrast, that all images have alt text, and that the page works with keyboard navigation. Test on a real phone, not just a resized browser window. With structure (HTML), style (CSS), and responsiveness in place, you have designed a complete, modern web page.
Ready to act on this? Ottawa SEO Inc.'s web design service pairs every account with a senior strategist and clear monthly reporting. For self-serve resources, see our web design portfolio and talk to our design team.
HTML alone creates structure and content but looks plain. You need CSS to design the layout, colours, and typography. For interactivity, JavaScript is added. Most pages use all three.
A doctype declaration, an <html> element containing a <head> (metadata, title, stylesheet links) and a <body> (all visible content like headings, paragraphs, images, and links).
Semantic tags like <header>, <main>, and <h1> describe content meaningfully, improving accessibility for screen readers and helping search engines and AI engines understand and cite the page.
Add the viewport meta tag to the head, then use CSS media queries to adjust the layout at different screen widths — for example, stacking columns on small screens. Test on real devices.