Text elements
Most of what a visitor reads on a page is plain written content: titles, paragraphs, a bolded warning, a quoted line, a snippet of code. HTML has a specific element for each of these jobs, and choosing the right one does more than change how the text looks. It tells the browser, search engines, and assistive tools what each piece of text actually is.
Headings and hierarchy
HTML gives you six sizes of heading, from <h1> down to <h6>. A heading is a title for the page or for a section of it. <h1> is the main title, the big one at the top. <h2> labels a major section, <h3> a subsection inside that, and so on down to <h6>.
Think of a printed book. The title on the cover is the <h1>. Each chapter title is an <h2>. The headings inside a chapter are <h3>. You use the levels to show what belongs under what.
One thing to hold on to from the start: do not pick a heading because it makes text the size you want. <h1> happens to look big, but its job is to say "this is the main title", not "make this large". If you want big text somewhere, that is a job for CSS later.
<h1>Sourdough for beginners</h1>
<h2>Building a starter</h2>
<p>A starter is a living culture of flour and water.</p>
<h3>Day one to three</h3>
<p>Mix equal weights of flour and water, then wait.</p>
<h2>Baking your first loaf</h2>
<p>Once the starter is active, you are ready to bake.</p>One <h1> names the whole page. Two <h2> headings mark the major sections, and the <h3> sits neatly inside the first of them. Read the heading numbers on their own and you can see the shape of the article without reading a word of the body.
<h1> down to <h6>, and <h1> is the one main title at the top. The rest label your sections and subsections. The trap that got me early: don't grab a heading just because it looks big, that is what CSS is for. The number is about what the thing is, not its size. Paragraphs and line breaks
A block of ordinary text goes in a paragraph, the <p> element. Wrap each paragraph in its own <p>...</p> and the browser gives it a little space above and below, so paragraphs sit apart the way they do in a book.
<p>Bread needs four things: flour, water, salt, and time.</p>
<p>Get those right and the rest is patience.</p>Notice that pressing Enter in your HTML file does nothing to the page. The browser ignores the line breaks and extra spaces you type; it only cares about the tags. That is why you need <p> to separate paragraphs, rather than just typing them on different lines.
If you really need a line to break inside a paragraph, like the lines of an address or a short poem, there is a <br> element for that. It forces a single line break and nothing else.
<p>...</p>, and that is what puts space between paragraphs. The browser ignores the Enters and spaces you type, so the tags do the work. Use <br> only when a line really needs to break mid-paragraph, like an address. Emphasis: <strong> and <b>, <em> and <i>
Two elements make text bold, and two make it italic. <strong> and <b> both render bold; <em> and <i> both render italic. So four tags, two looks.
<p><strong>Warning:</strong> the oven is very hot.</p>
<p>You need to knead the dough <em>thoroughly</em>.</p>For now, reach for <strong> when a bit of text is important, like a warning, and <em> when you want to stress a word the way your voice would if you were reading aloud. They are the two you will want most of the time, and the browser makes them bold and italic for you.
<strong> and <b> both go bold, <em> and <i> both go italic. Starting out, reach for <strong> when something is important, like a warning, and <em> when you want to stress a word the way your voice would. Those two will cover almost everything you write. Other inline text (quotes, <code>, <abbr>, and friends)
Beyond bold and italic, HTML has small elements for common bits of text. A short quote sits in <q>, and the browser adds the quotation marks for you. A piece of code, like the name of a command, goes in <code>, which the browser shows in a monospace font so it stands out from normal writing.
<p>My gran always said <q>a watched pot never boils</q>.</p>
<p>Save the file with the <code>Ctrl S</code> shortcut.</p>There are a handful more of these, but <q> for a short quote and <code> for code are the two you will meet most. Each one wraps a little bit of text and tells the browser what it is.
<q> wraps a short quote and adds the quotation marks for you, and <code> shows code in a monospace font so it stands out. There are a few more of these little tags, but those two come up the most. Each one just wraps a bit of text and says what it is.