Headings, paragraphs and text

Most of what you'll put on a web page is text. In this lesson you'll learn how to organize it with headings and paragraphs, how to add emphasis and how to leave notes in your code that only you can see.

HTML has six levels of headings, from h1 to h6:

The number is about importance, not just size. h1 is the main title, h2 splits the page into sections and h3 splits those sections into smaller parts. It works just like the outline of a document or the chapters in a book.

A few rules of thumb:

• Use one h1 per page. It's the title of the page, and a page only has one title.
• Don't skip levels. Go from h2 to h3, not straight from h2 to h4.
• Never pick a heading because of its size. If you want bigger or smaller text, that's a job for CSS, which you'll learn in the next course.

Why does this matter if the page looks fine either way? Because people using screen readers often jump between headings to find what they're looking for, and search engines use headings to understand what your page is about. A good heading structure helps both.

Regular text goes in paragraphs, with the p element:

Here's something that surprises almost everyone at first: HTML ignores extra spaces and line breaks. If you press enter ten times inside a paragraph, or type ten spaces between two words, the browser shows a single space. This is called whitespace collapsing.

That example shows up as "These words are on the same line." If you want a new paragraph, use a new p element.

Every now and then you want a new line without starting a new paragraph, for example in an address or a poem. That's what br is for:

br is an empty element, so it has no closing tag. Use it sparingly. If you find yourself adding several br elements in a row to make space, that's another job for CSS.

To make text stand out, HTML gives you two elements:

• strong means important. Browsers show it in bold.
• em means emphasis, the way you'd stress a word when speaking. Browsers show it in italics.

You might also see b and i in older code. They make text bold and italic too, but without saying anything about meaning. Screen readers can use strong and em to change their tone of voice, which b and i can't do. So stick with strong and em.

Sometimes you want to leave a note in your code, either for yourself or for someone else reading it later. HTML has comments for that:

Anything between <!-- and --> won't show up on the page. Comments are great for explaining why you did something or for temporarily hiding a piece of code while you test things.

In VS Code you can turn a line into a comment, or back again, with Ctrl+/ on Windows or Cmd+/ on Mac.

One thing to remember: comments are hidden on the page, but they're not secret. Anyone can see them with the Inspect tool, so never put passwords or private notes in them.