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 (
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 tag defines a paragraph of text, and it’s a block element:
You’ve seen the block aspect of the
p tag before when we made the example:
p stood on its own line.
p tag, we can add any inline element we like, like
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
We cannot nest a
p element into another one, as
p is a block tag.
Heading tags (
HTML provides us with 6 heading tags. From most important to least important, we have
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
<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
strong (also called phrasing content, full list here).
Lessons this unit:
|1:||Your first HTML page|
|2:||▶︎ Text tags|
|9:||DEMO Using CodePen|
|10:||DEMO Using VS Code|