EN

HTML・First steps

Let's write headings and paragraphs

The two most-used tags, headings (h1–h6) and paragraphs (p). Choose by "meaning," not by "size"—this is what matters.

Now that you understand the shape of tags, let’s practice writing the two that come up most: headings and paragraphs. With just these two, you can already make “a page that has text.”

Headings come in six levels

Headings come in six levels, from h1 to h6. h is the initial of heading. The smaller the number, the more “important (bigger)” the heading.

<h1>The most important heading</h1>
<h2>The next heading</h2>
<h3>The heading below that</h3>
The smaller the number, the bigger the text is displayed.

Think of a book’s table of contents. There’s a “chapter,” and inside it a “section,” and so on—a nested relationship. You use h1 as the chapter title, h2 as the section, and so on. Thanks to this top-to-bottom relationship, both the reader and the computer can tell at a glance “which is the big topic and which is the small one.”

CSSLet's change the text sizeWhy choose by “meaning” and not by size? The answer comes much later, in CSS

Don’t skip heading numbers

One more important promise about headings. Use the numbers in order. After h1 comes h2, and the topic below that is h3—the same as a book’s “chapter → section → subsection.” Picture going down a staircase one step at a time.

<!-- Good example: one step at a time -->
<h1>Shima</h1>
<h2>Favorite things</h2>
<h3>Food</h3>

<!-- Bad example: skipping h2 straight to h4 -->
<h1>Shima</h1>
<h4>Favorite things</h4>

If you jump straight from h1 to h4 like in the bad example, the reader and search engines get lost: “wait, where are the chapters and sections?” “I want a smaller-looking heading, so h4” is a reason based on looks, which makes it a no-go. If the level drops by one, the number drops by one too.

Paragraphs are just wrapped in p

Ordinary text is all wrapped in <p>.

<h1>Shima</h1>
<p>Nice to meet you. I'm Shima.</p>
<p>Right now I'm making my first homepage.</p>
The heading is big, and the paragraphs are in ordinary text.

The trick is to split with <p> for each chunk of text. You don’t need to split <p> just to make a line break; you split where “the topic reaches a break.” Conversely, cramming a long piece of text all into one <p> makes it hard to read. When the topic changes, a new <p>. Just keeping this in mind is plenty.

By the way, there are also times when “the topic continues, but I just want a new line” (like splitting an address across two lines). There’s a separate small tag for that, so look forward to it in a later lesson.

Summary of this lesson

  1. Headings are the six levels <h1>–<h6>
  2. Choose headings by meaning, not size (h1 is the most important one)
  3. Wrap text in <p> chunk by chunk

Try it: an about-me page

With just the two you’ve learned, you can make the “content of Shima’s about-me page.” Type it straight into your editor.

<h1>Shima</h1>
<p>I'm Shima, and I love drawing and ramen. Welcome to my first-ever homepage!</p>

<h2>About me</h2>
<p>Hello! My name is Shima. I love drawing, and on weekends I often go out for ramen.</p>
<p>This is the first website I've made by myself. If you make it all the way to the end, you'll be able to build one like this too!</p>

<h2>Favorite things</h2>
<p>Drawing, ramen, games. Every day is fun!</p>

Open it in a browser, and it displays like this.

Browser view. “Shima” is a big heading, with an about-me paragraph below it, and further down the “About me” and “Favorite things” headings and paragraphs are lined up
The headings are big, the paragraphs are in ordinary text, and everything is divided up by topic.

Once it’s done, try rewriting it with your own information. Put your name in <h1>, and your own words in the paragraphs. This is the first page of your homepage, the one you’ll grow from here.

FAQ

Is h1 only used once per page?
By the rules you can place several, but h1 means "the most important heading on this page," so one per page is the basic idea. It also makes the page's main topic easier for search engines to understand.
When a heading's text is too big, can I change it to a smaller number?
Changing the number for the sake of appearance isn't recommended. You can freely adjust size later with CSS, so choose your HTML headings by the "meaning" of the text's hierarchy.
Is there a rule of thumb for splitting paragraphs?
The rule of thumb is "start a new p when the topic reaches a break." If you only want a line break, you don't need to split the p; conversely, cramming a lot into one p makes it hard to read.