HTML/CSS - 2

HTML/CSS - 2: Headings & Paragraphs

Webpages are easier to read when their content is organised into clear sections. HTML gives us heading tags for titles and section names, and paragraph tags for normal blocks of text.

In this lesson, you are going to build a small "About Me" page. You can write about yourself, invent a character, or create someone completely fictional.

HTML headings range from <h1> to <h6>. The <h1> is usually the main heading of the page, while smaller heading levels can introduce sections underneath it.

Normal text is usually placed inside a <p> tag. Each paragraph gets its own opening <p> and closing </p>.

Your challenge: Give your page a main title, add at least two sections, and write a short paragraph for each one.

What should you notice?

Your <h1> should stand out as the main title. Headings such as <h2> and <h3> appear smaller and help divide the page into sections. Paragraphs appear as normal blocks of text underneath them.

Good HTML habit: Don't choose a heading only because you like its size. Think of headings as levels in an outline. Start with the main <h1>, then use <h2> for major sections and <h3> for sections inside those.

Experiment: Add a new section called Something Surprising About Me. Give it a heading and a one-sentence paragraph. If you are using a fictional character, make the fact as strange as you like.

Bonus experiment: Inside one paragraph, place a <br> tag between two sentences. Unlike most HTML tags you have seen so far, <br> does not need a separate closing tag.

<h1>About Alex</h1>

<h2>A Little About Me</h2>
<p>My name is Alex and I enjoy learning how computers work.</p>

<h2>My Favourite Things</h2>
<p>I like drawing, solving puzzles, and playing games.<br>I also make an excellent grilled cheese sandwich.</p>

<h3>Something Surprising</h3>
<p>I once built a cardboard robot that was taller than I was.</p>