Headings and Paragraphs
What Is It?
Headings name sections. Paragraphs hold ordinary sentences.
What the Tags Mean
h1: the main heading.h2: a section heading.h3: a smaller section inside that section.p: a paragraph.br: a line break.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings and Paragraphs</title>
</head>
<body>
<h1>My learning page</h1>
<p>I am learning HTML.</p>
<h2>Today’s lesson</h2>
<p>Headings and paragraphs.</p>
</body>
</html>Browser preview
What you see: You see a large main heading, a sentence, a smaller heading, and another sentence.
Example 2: Another Use
Use h3 when a section needs a smaller section inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings and Paragraphs</title>
</head>
<body>
<h1>My recipes</h1>
<h2>Breakfast</h2>
<h3>Fruit bowl</h3>
<p>Cut the fruit and mix it.</p>
</body>
</html>Browser preview
One More Example: A Line Break
Use br when the next part belongs on a new line, such as an address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings and Paragraphs</title>
</head>
<body>
<p>My learning club<br>12 Garden Road<br>Pune</p>
</body>
</html>Browser preview
Simple Tip
Choose heading levels by their place in the page. Do not choose a heading only because you like its size.
Try It Yourself
Add an h2 named About me and a paragraph below it.