Structure and semantics
The document skeleton and the tags that describe content.
Updated
What HTML is
HTML (HyperText Markup Language) describes the structure and meaning of content: "this is a heading", "this is a list", "this is the navigation". It isn't a programming language — it has no logic, it only marks up content.
An element = opening tag + content + closing tag:
<a href="/blog" class="link">Blog</a>atag namehref="/blog" class="link"attributesBlogcontent</a>closing tag
- Attributes add extra information (
href,class,id,alt). - Some elements are void — they have no content and no closing tag:
<img>,<input>,<br>,<meta>. - Elements nest and form a tree — the browser builds the DOM from it.
Document structure
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Page title</title>
</head>
<body>...</body>
</html>| Part | Role |
|---|---|
<!doctype html> |
the browser's standards mode (without it you get "quirks mode", with old rules) |
lang="en" |
the language — for screen readers, automatic translation, SEO |
<head> |
invisible metadata: encoding, title, viewport, CSS links |
viewport |
without it, on mobile the page shows zoomed out like on desktop |
<body> |
everything the user sees |
In Next.js you don't write this by hand — app/layout.tsx generates <html>, <head> and <body>.
What "semantic" means
Semantic = the tag says what the content is, not how it looks. <div> and <span> say nothing; <nav> says "here's the navigation".
Why it matters:
- Accessibility — screen readers jump straight to
<main>or list the headings. - SEO — search engines understand what's important.
- Readable code — you see the page structure at a glance.
- Free behavior —
<button>is focusable and works with Enter;<div>isn't.
Element types
Structural elements (landmarks)
| Tag | What it is | When to use it |
|---|---|---|
<header> |
header | at the top of the page or at the start of an article/section |
<nav> |
main navigation | the site menu, breadcrumbs — not every group of links |
<main> |
the main content | only once per page |
<article> |
self-contained content | would make sense outside the page: a post, a comment, a product card |
<section> |
thematic group | a part of the page with its own heading |
<aside> |
secondary content | sidebar, "related articles" |
<footer> |
footer | copyright, secondary links |
article vs section: ask yourself "would it make sense on its own, in an RSS feed?" Yes → article. No, it's just a part of the page → section.
Block vs inline
| Block | Inline | |
|---|---|---|
| Examples | div, p, h1, ul, section |
span, a, strong, em, code |
| Takes up | the full width, starts on a new line | only what it needs, inside the current text |
| For | blocks of content | pieces of a text |
<div> and <span> are the meaningless variants — use them only for styling, when there's no fitting semantic tag.
Text
| Tag | Meaning |
|---|---|
<h1>…<h6> |
headings, hierarchical |
<p> |
paragraph |
<strong> |
important (not just "bold") |
<em> |
emphasis (not just "italic") |
<ul> / <ol> + <li> |
unordered / ordered list |
<a href> |
link — takes you somewhere |
<button> |
button — does something |
<img alt> |
image |
<code>, <pre> |
code |
<time datetime> |
a machine-readable date or time |
Headings
- A single
<h1>— the subject of the page. - Don't skip levels:
h1 → h2 → h3, noth1 → h4. - You pick the level by structure; the size comes from CSS.
Common mistakes
<div onclick>instead of<button>or<a>.- Headings picked by size (
<h4>because it "looks good"). - Several
<main>elements on a page. <br><br>for spacing — spacing is CSS's job.
Summary
- HTML = structure and meaning, not appearance.
- Use the tag that describes the content;
div/spanonly when there's nothing else. - One
h1, onemain, headings in order.