We’ll now explore the main HTML tags you’ll often use in the body tag of an HTML document.

Inline and block elements

Before looking at tags, we need to separate them into 2 categories: block elements and inline elements.

Block elements (p, div, heading elements, lists and list items, and others) when positioned on the page do not allow other elements to be visualized next to them.

Inline elements instead can sit next to other inline elements.

Another difference is that inline elements can be contained in block elements. The reverse is not true.

p and span

The p tag defines a paragraph of text, and it’s a block element:

<p>Some text</p>

You’ve seen the block aspect of the p tag before when we made the example: p stood on its own line.

Inside a p tag, we can add any inline element we like, like span.

The span tag is an inline tag:

<p>A part of the text <span>and here another part</span></p>

We cannot add other block elements into a p or span tag.

We cannot nest a p element into another one, as p is a block tag.

Heading tags (h1, h2…)

HTML provides us with 6 heading tags. From most important to least important, we have h1, h2, h3, h4, h5, h6.

Typically a page will have one h1 element, which is the page title. Then you might have one or more h2 elements depending on the page content.

The browser by default will render the h1 tag bigger, and will make the elements size smaller as the number near h increases:

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Paragraph</p>

All headings are block elements. They cannot contain other tags, except tags that identify text such as a span or strong (also called phrasing content, full list here).

Lessons in this unit: