(click anywhere to close)
OPEN MENU

[HTML5] Paragraphs & Headings

category: Website | course: HTML5 | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Headings
2. Paragraphs

Most of the web consists of articles. Blogs, news websites, tutorial websites (like this one), you name it. And as you probably know, every article consists of a heading, multiple subheadings, and text divided into paragraphs. That’s why HTML has good support for multiple headings and paragraphs.

Headings

You have 6 tags available to you: <h1> up to and including <h6>.

These are all block-level elements, which are automatically bold and scaled from large to small respectively. However, it shouldn’t be their design that interests you. Search engines in particular, scan a page for headings to see what the most important keywords or phrases are. You should only use the first header tag once on your page. And no, not for your logo or company one-liner. Use the first header for the actual title of the article or page, and then move your way downwards for every sublevel of headers.

<h1>Biggest heading</h1>
<h2>Less Big</h2>
<h3>Neutral</h3>
<h4>Neutral</h4>
<h5>Small</h5>
<h6>Tiniest Heading</h6>

Paragraphs

Paragraphs are the easiest of them all: a simple <p> tag does wonders.

Paragraphs are block-level elements as well, but they don’t have their font size or style altered in any other way. They are “clean”, so to speak, and really allow you to focus on the text inside.

<p>I am a paragraph and I like it!</p>
CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What happens when you use <h3>?
A
You create the most important heading
B
You create a heading in the third level of the hierarchy
C
You create a pargraph
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)