Typography
Most of a website is text, so most of HTML is elements for text.
Headings
<h1> through <h6>, biggest to smallest. They aren’t just sizes ~ they’re an outline of your page. Screen readers use them to jump around, and search engines use them to work out what a page is about. Don’t pick a heading level because you like how big it looks; pick it because it’s the right level, then change the size with CSS.
Paragraphs and emphasis
<p> for a paragraph, <strong> for bold, <em> for italic. You can nest them.
There’s also <b> and <i>, which look identical. The difference is meaning: <strong> and <em> say “this matters”, while <b> and <i> just say “make it bold” or “make it slanted”. I use <strong> and <em> almost always.
Lists
<ul> for bullets, <ol> for numbers, and <li> for each item inside either one. The <li> elements have to go directly inside the list, with nothing in between.
Click to resume
Use the console below.