DEV Community

Cover image for HTML-101 #4. HTML Headings, Paragraphs & Line Breaks
Himanshu Bhatt
Himanshu Bhatt

Posted on

HTML-101 #4. HTML Headings, Paragraphs & Line Breaks

#webdev #beginners #tutorial #html

👋 Short Intro (Why I’m Writing This)

I’m currently learning HTML and decided to learn in public by documenting my journey.

This blog is part of my HTML-101 series, where I’m learning HTML step by step from scratch.

This series is not written by an expert — it’s a beginner learning out loud, sharing:

  • what I understand,
  • what confuses me,
  • and what I learn along the way.

The goal is to build consistency, clarity, and invite discussion.

📌 What This Blog Covers

In this post, I’ll cover:

  • HTML headings (<h1> to <h6>) and their purpose
  • Proper heading hierarchy and structure
  • Common mistakes with headings
  • Paragraphs using the <p> tag
  • Block-level behavior of paragraphs
  • Line breaks using <br> and section breaks using <hr>

📂 GitHub Repository

All my notes, examples, and practice code live here:

👉 GitHub Repo:

https://github.com/dmz-v-x/html-101

This repo is updated as I continue learning.

📚 Learning Notes

1. HTML Heading: <h1> - <h6>

Headings define the hierarchy and structure of our content.
Visually h1 is the biggest heading followed by h2, h3 ... h6.

Now that doesn't mean they are just for big text, they describe the importance of sections.

<h1>Main Title</h1>
<h2>Sub Section</h2>
<h3>Sub Sub Section</h3>
Enter fullscreen mode Exit fullscreen mode

2. Heading Levels Explained

Tag Meaning Importance
h1 Main page title Highest Priority
h2 Section heading Secondary
h3 Sub-section More detail
h4 Minor subsection Lower
h5 Very minor heading Even lower
h6 Smallest heading Lowest

Analogy with a book:

Book Title (h1) > Chapter (h2) > Section (h3) > Subsection (h4)

<h1>Web Development Guide</h1>

<h2>HTML Basics</h2>
<h3>Headings</h3>
<h3>Paragraphs</h3>

<h2>CSS Basics</h2>
<h3>Selectors</h3>
<h4>Class Selectors</h4>


This creates a logical structure.
Enter fullscreen mode Exit fullscreen mode

3. Mistakes to Avoid

  • ❌ DO NOT use headings just for size: 
<h1>Big Text</h1>
<h4>Smaller Text</h4>
Enter fullscreen mode Exit fullscreen mode

Use CSS for visual styling, not heading levels.

  • ✅ Correct Way to Control Sizes <h1 class="title">Welcome</h1> 
.title {
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Headings define structure, CSS defines appearance.

4. Visual Representation

Visual Representation
h1 - Website Title
│
├── h2 - Section
│ ├── h3 - Subsection
│ └── h3 - Subsection
│
└── h2 - Another Section
└── h3 - Subsection

5. Browser Default Sizes

Approximate Default Sizes:

Heading Size
h1 2em
h2 1.5em
h3 1.17em
h4 1em
h5 0.83em
h6 0.67em

6. Paragraph in HTML: The <p> tag

The <p> tag is used to define a block of text — a paragraph.

<p>This is a paragraph.</p>

It represents a complete thought or idea, just like paragraphs in a book.

7. <p> is a Block-level Element

This means, it takes full horizontal width, always starts on a new line. Can Contain inline elements (but not other block elements)

Allowed inside <p>:

  • <strong>
  • <em>
  • <span>
  • <code>

Not Allowed inside <p>:

  • <div>
  • <h1>
  • <section>
  • <p>

This is invalid:

<p>
  <div>This is wrong</div>
</p>
Enter fullscreen mode Exit fullscreen mode

8. Default Styling

Browsers add spacing automatically:

margin-top: 1em
margin-bottom: 1em

Though we can override it with CSS:

p {
  margin: 0;
  line-height: 1.6;
}
Enter fullscreen mode Exit fullscreen mode

9. Line Breaks <br> & <hr>

  • <br>: Line Break The <br> tag creates a single line break inside text. It tells the browser move the rest of the content to the next line.

Syntax: <br>

Example:

<p>
  Hello John,<br>
  Thank you for your message.<br>
  We will get back to you soon.
</p>
Enter fullscreen mode Exit fullscreen mode
  • <hr>: Horizontal Rule The <hr> tag inserts a thematic break between sections. Visually, it usually appears as a horizontal line.

Syntax: <hr>

Example:

<h2>Introduction</h2>
<p>This is the intro section.</p>

<hr>

<h2>Conclusion</h2>
<p>This is the conclusion section.</p>
Enter fullscreen mode Exit fullscreen mode

10. Example of combining them both 

<p>
  Dear User,<br>
  Your subscription will expire soon.<br>
  Please renew to continue services.
</p>

<hr>

<p>
  Support Team<br>
  support@example.com
</p>
Enter fullscreen mode Exit fullscreen mode

⚠️ Challenges / Mistakes I Faced

The topics covered in this post were simple and straightforward, but one important thing that really clarified my understanding was realizing that headings are not about how big the text looks.

Headings exist to represent structure and importance, not visual size.
Also for controlling how text looks, we should rely on CSS, not just heading levels.

If you faced any issues or have any questions, do let me know in the comments 🙂

💬 Feedback & Discussion

💡 I’d love your feedback!

If you notice:

  • something incorrect,
  • a better explanation,
  • or have suggestions to improve my understanding,

please comment below. I’m happy to learn and correct mistakes.

⭐ Support the Learning Journey

If you find these notes useful:

⭐ Consider giving the GitHub repo a star —

it really motivates me to keep learning and sharing publicly.

🐦 Stay Updated (Twitter / X)

I share learning updates, notes, and progress regularly.

👉 Follow me on Twitter/X:

https://x.com/_himanshubhatt1

🔜 What’s Next

In the next post, I’ll be covering:

👉 Text Formatting, Quotes & Code Formatting

I’ll also continue updating the GitHub repo as I progress.

🙌 Final Thoughts

Thanks for reading!

If you’re also learning HTML, feel free to:

  • follow along,
  • share your experience,
  • or drop questions in the comments 👋

📘 Learning in public

📂 Repo: https://github.com/dmz-v-x/html-101
🐦 Twitter/X: https://x.com/_himanshubhatt1
💬 Feedback welcome — please comment if anything feels off
⭐ Star the repo if you find it useful

Top comments (0)