EN

HTML・First steps

What is a tag?

The star of HTML is the "tag." It's not hard. You just "wrap." Let's get a solid grip on the basic shape here.

As we saw last time, a tag is a marker that tells the computer “this is a such-and-such.” This time, we’ll properly learn the shape of that marker. Once you get this, you’ll be able to read 80% of HTML. Really.

Opening tags and closing tags

For example, when you want to say “this is a paragraph,” you write it like this.

<p>Hi. I'm Shima.</p>

Broken apart, it looks like this.

PartMeaning
<p>The opening tag. “The paragraph starts here”
Hi. I'm Shima.The content
</p>The closing tag. “The paragraph ends here” (it has a /)

Picture bread wrapping around a filling (the content). The top slice of bread is the opening tag, and the bottom slice is the closing tag. The key is to use the same name for the opening and closing. If you start with <p>, you also close with </p>.

The content wrapped in <p> is displayed as a single paragraph, just as it is.

Tags express the “kind”

p is short for paragraph. When the name changes, the meaning changes too.

<h1>Shima</h1>
<p>I love drawing.</p>
<h1> is a big heading, <p> is an ordinary paragraph. You can see that a different name means a different look.

<h1> is a heading, <p> is a paragraph. The same “wrapping” shape, just changing the name to convey the kind—this is the basis of everything in HTML. Once you think of it as simply swapping the name, even lots of tags suddenly look easy.

You can put tags inside tags

A tag can also hold another tag inside it. This is called nesting.

<p>Shima <strong>loves drawing</strong> more than anything.</p>
You can see that only “loves drawing,” wrapped in <strong> inside the paragraph, is bold.

<strong> is the marker for “this is emphasized.” Inside the paragraph <p>, the emphasis <strong> fits snugly. Picture putting a small box inside a box. This “nesting” shows up all over HTML.

Don’t let nesting “cross”

The one rule to follow with nesting is closing the tag you opened later first. Close the small box inside first, then close the outer box.

<!-- OK, good example: strong fits snugly inside p -->
<p>Shima <strong>loves drawing</strong>.</p>

<!-- Bad example: the closing order crosses -->
<p>Shima <strong>loves drawing.</p></strong>

In the bad example, the outer box (<p>) is closed and then the inner box (</strong>) is closed, so the boxes are twisted up. “Close the inner box first”—remember it’s the same order as a matryoshka doll.

Summary of this lesson

  1. A tag wraps content with <name> ~ </name>
  2. The closing tag has a /
  3. It conveys the kind by name (p is a paragraph, h1 is a heading…)

FAQ

What happens if I forget to close a tag?
An error screen doesn't pop up, and often the browser will display it somehow anyway. However, the layout can break, or you can struggle to find the cause. Once you write an opening tag, it's a good idea to write the closing tag right away.
Is it okay to write tag names in uppercase?
Writing the p tag as an uppercase P still works. But writing in lowercase is the standard habit these days, and teaching materials and other people's code are almost all lowercase. Let's keep everything in lowercase.
About how many kinds of tags do I need to memorize?
There are over 100 kinds of tags, but you'll only use about 20 to 30 often in everyday page-making. No need to memorize them all—getting used to the ones that come up in the lessons, little by little, is plenty.