Module 2 of 10 · 8 lessons
HTML Text Tutorial: Headings, Paragraphs and Lists
Headings, paragraphs, emphasis, lists, quotes, code and the odd special character.
Most of the web is text. This module teaches you to mark it up properly: which element fits each kind of text, and why that choice counts for more than the way the text looks.
You start with headings from <h1> to <h6>, which give a page its outline. Then come paragraphs and line breaks, and strong and em for importance and stress. Lists cover bulleted <ul> and numbered <ol> lists. Nested lists put a list inside a list item without breaking the structure, which trips up a lot of people. You also learn quotes and code, plus comments and entities for notes in your source and characters like < and ©. For a rarer symbol, Wikipedia has a full list of HTML character entity references (opens in a new tab).
Browsers, search engines and screen readers read these elements to work out what a page contains. A real heading tells Google what a section is about, and a screen reader user can jump straight to it. Text that was only made big and bold with CSS gets neither benefit. The HTML standard defines the h1 to h6 heading elements (opens in a new tab) by rank. Font size has nothing to do with it. Picking the right element is most of what HTML asks of you.
The module ends with a recipe card project: a heading, an ingredient list, numbered steps and a bit of emphasis. Plan about an hour. Keep the tag reference open for details on any element. To see the tags behind formatted text, try a WYSIWYG HTML editor (opens in a new tab) that shows the visual document and its source side by side.
What you will learn
- Give a page a sensible outline with h1 to h6 headings in order
- Split text into paragraphs and add line breaks only where they belong
- Use strong and em for important and stressed words, and leave b and i aside
- Create bulleted, numbered and nested lists
- Mark up quotations, inline code and code blocks
- Write comments and use entities for reserved and special characters
Lessons
- Headings Give a page an outline with the heading levels h1 to h6.
- Paragraphs and Line Breaks Fix the bugsDecide where lines break, and repair broken paragraphs.
- Strong and Emphasis Use strong and em for important and stressed words.
- Lists Make bulleted and numbered lists.
- Nested Lists Build sub-lists by putting a list inside a list item.
- Quotes and Code Mark up quotes, code snippets and preformatted text.
- Comments and Entities Leave hidden notes in your code and show special characters.
- Project: Recipe Card ProjectWrite a full recipe card using headings, lists, emphasis and entities.
Frequently asked questions
What is the difference between strong and b in HTML?
The strong element (opens in a new tab), <strong>, marks text as important, and screen readers and search engines can treat it that way. <b> draws the eye and adds no meaning, which suits keywords in a summary. Both are bold by default. Use <strong> when the words are important, and CSS when you only want bold styling. <em> and <i> follow the same logic.
How many h1 tags should a page have?
One. Use a single <h1> for the main topic, then <h2> for sections and <h3> for subsections. HTML does allow more than one h1, but a single one gives search engines and screen reader users an obvious starting point. Do not skip levels (h2 straight to h4, say) to get a smaller font. Change the size with CSS.
What is the difference between ul and ol in HTML?
<ul> is an unordered list with bullets, for items in no particular order, like a shopping list. <ol> is an ordered list with numbers, for steps or rankings where the order counts. Both may contain only <li> elements as direct children. The Lists lesson has examples of each.