Skip to content

Latest commit

 

History

History
97 lines (63 loc) · 2.47 KB

Readme.md

File metadata and controls

97 lines (63 loc) · 2.47 KB

Episode 5: Heading & Paragraph Tags

Welcome to Episode 5 of the Learn HTML series! In this episode, we’ll dive into the foundational tags for structuring textual content on the web — Headings and Paragraphs.

🧠 Learning Objectives

By the end of this episode, you will:

  • Understand the use of HTML heading tags (<h1> to <h6>)
  • Learn how to structure text using paragraph tags
  • Know the importance of semantic structure in HTML documents

🏷️ HTML Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). These help organize content hierarchically.

✅ Syntax:

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>

📌 Best Practices:

  • Use only one <h1> per page (usually the page title).
  • Use headings sequentially to maintain document structure and accessibility.
  • Avoid skipping heading levels unnecessarily.

🧾 Paragraph Tag (<p>)

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

✅ Syntax:

<p>
  This is a paragraph. HTML automatically adds space before and after the
  paragraph.
</p>

🔍 Key Notes:

  • A browser will automatically insert some white space (margin) before and after a paragraph.
  • If you add multiple spaces or line breaks in a paragraph, HTML ignores extra whitespace.

🧪 Example

<h1>Welcome to My Website</h1>
<p>This website contains useful tutorials on HTML, CSS, and JavaScript.</p>

<h2>Why Learn HTML?</h2>
<p>
  HTML is the foundation of all web pages. It defines the structure and meaning
  of web content.
</p>

📢 Tips for Writing Better Content

  • Break your content into readable chunks using paragraphs.
  • Use headings to introduce sections of your page.
  • Combine both tags to give structure and meaning to your web documents.

✅ Summary

  • Use <h1> to <h6> to structure your content hierarchically.
  • Use <p> for adding readable blocks of text.
  • Headings improve SEO and accessibility of your web pages.

🔗 Next Episode

➡️ Episode 6: Special Characters & HTML Entities

You're now equipped to write properly structured content using headings and paragraphs. Let’s move ahead to learn how to display special characters in HTML! 💬🧱