Text & Headings
Every design has a type scale — a set of text sizes that signal importance. A big bold headline, a smaller subheading, and body copy underneath. HTML has exactly the same idea, baked in.
Heading elements — <h1> through <h6> — let you tell the browser (and assistive technology, and search engines) what the hierarchy of your text is. Think of it as your document outline, not just your visual scale.
Headings h1 to h6
Section titled “Headings h1 to h6”<h1> is the most important heading on the page — your main title. <h2> is a major section heading. <h3> is a subsection, and so on down to <h6>. Most pages only use <h1> through <h3> in practice.
The heading elements do carry default browser styling (bigger = more important), but those styles get overridden by CSS anyway. The semantic meaning — the hierarchy signal — is what matters.
Paragraphs
Section titled “Paragraphs”<p> is a paragraph. The browser adds a small margin above and below each paragraph automatically. To start a new paragraph, open a new <p> element — do not use <br> tags just to add space between lines. (That is like using an empty text layer in Figma to create spacing instead of auto-layout padding.)
Inline emphasis
Section titled “Inline emphasis”Two elements let you emphasize words inside a paragraph without breaking into a new block:
<strong>— bold, meaning important or critical content.<em>— italic, meaning emphasis or a slight stress in reading.
These are inline elements: they sit within the flow of text rather than starting a new line.
Try adding an <h4> below the <h3>. Then try wrapping a word in <strong> or <em>. Notice how neither of those change the line — they stay right inside the sentence.