1.2 Common Tags: Headings, Paragraphs, Lists

Now that you know the page skeleton, the next step is filling <body> with content. HTML has hundreds of tags, but only a dozen or so come up daily. This section introduces them — and you'll find each tag corresponds to a "kind of content."

The lab below is a "tag explorer": click any tag to see its syntax and how it actually renders. Play with it first, then read on.

Loading interactive lab...

Headings: h1 through h6

HTML has six heading levels. <h1> is the biggest and most important, <h6> the smallest:

html

<h1>Article title</h1>
<h2>Section heading</h2>
<h3>Smaller heading</h3>

Note

Don't use headings just to "make text bigger." Headings express hierarchy (which is a major section vs a subsection), not "I want big text." For bigger text, use CSS. A page usually has only one <h1>.

Paragraphs and line breaks

<p> is a paragraph; the browser adds spacing between paragraphs automatically.

<br> is a line break (it's "self-closing" — no closing tag needed).

<hr> is a horizontal divider line.

html

<p>First paragraph.</p>
<p>Second paragraph, with spacing from the one above.</p>
<p>One paragraph with a<br>forced line break.</p>
<hr>

Emphasis: strong and em

html

<p>This is <strong>very important</strong>, please <em>absolutely</em> remember it.</p>

<strong> means "important" and is bold by default.

<em> means "emphasis" and is italic by default.

Note: they convey tone and meaning, not just style. Screen readers read them with different inflection.

Lists: ordered and unordered

Lists are an extremely common structure on the web. There are two kinds:

html

<!-- Unordered list: bullets -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<!-- Ordered list: numbers -->
<ol>
  <li>Open the fridge</li>
  <li>Put in the elephant</li>
  <li>Close the fridge</li>
</ol>

A memory aid:

<ul> = unordered list (bullets)

<ol> = ordered list (numbers)

<li> = list item (each entry)

In both list types, each entry is wrapped in <li>. An <li> must sit inside a <ul> or <ol>.

Loading concept check...

Common tag cheat sheet

Tag	Meaning	Paired?
`<h1>`–`<h6>`	Six heading levels	Yes
`<p>`	Paragraph	Yes
`<strong>`	Important (bold)	Yes
`<em>`	Emphasis (italic)	Yes
`<ul>` / `<ol>` / `<li>`	Lists and list items	Yes
`<br>`	Line break	No (self-closing)
`<hr>`	Divider	No (self-closing)

Loading practice...

1.2 Common Tags: Headings, Paragraphs, Lists

The lab below is a "tag explorer": click any tag to see its syntax and how it actually renders. Play with it first, then read on.

Loading interactive lab...

Headings: h1 through h6

HTML has six heading levels. <h1> is the biggest and most important, <h6> the smallest:

html

<h1>Article title</h1>
<h2>Section heading</h2>
<h3>Smaller heading</h3>

Note

Paragraphs and line breaks

<p> is a paragraph; the browser adds spacing between paragraphs automatically.

<br> is a line break (it's "self-closing" — no closing tag needed).

<hr> is a horizontal divider line.

html

<p>First paragraph.</p>
<p>Second paragraph, with spacing from the one above.</p>
<p>One paragraph with a<br>forced line break.</p>
<hr>

Emphasis: strong and em

html

<p>This is <strong>very important</strong>, please <em>absolutely</em> remember it.</p>

<strong> means "important" and is bold by default.

<em> means "emphasis" and is italic by default.

Note: they convey tone and meaning, not just style. Screen readers read them with different inflection.

Lists: ordered and unordered

Lists are an extremely common structure on the web. There are two kinds:

html

<!-- Unordered list: bullets -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<!-- Ordered list: numbers -->
<ol>
  <li>Open the fridge</li>
  <li>Put in the elephant</li>
  <li>Close the fridge</li>
</ol>

A memory aid:

<ul> = unordered list (bullets)

<ol> = ordered list (numbers)

<li> = list item (each entry)

In both list types, each entry is wrapped in <li>. An <li> must sit inside a <ul> or <ol>.

Loading concept check...

Common tag cheat sheet

Tag	Meaning	Paired?
`<h1>`–`<h6>`	Six heading levels	Yes
`<p>`	Paragraph	Yes
`<strong>`	Important (bold)	Yes
`<em>`	Emphasis (italic)	Yes
`<ul>` / `<ol>` / `<li>`	Lists and list items	Yes
`<br>`	Line break	No (self-closing)
`<hr>`	Divider	No (self-closing)

Loading practice...