HTML & CSS - Mastery / HTML Basics

Headings, Paragraphs, and Line Breaks

💡Heading, Paragraph and Line Breaks in Action

When writing content on a webpage, you'll mostly be working with headings, paragraphs, and the occasional line break. These tags help organize your text and make it easy to read — both for people and browsers

🧩 Headings (<h1> to <h6>)

HTML has 6 levels of headings

  • <h1> is the biggest and most important

  • <h6> is the smallest

  • Think of <h1> as the main title and the others as subheadings.

<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Smaller Subsection</h4>
<h5>Even Smaller</h5>
<h6>Tiniest Heading</h6>

📝 Note: Always use headings in order — don’t skip from <h1> to <h4> without using <h2> and <h3> in between. It’s better for accessibility and SEO

Master Code Block (This will be used for further example)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Paragraph & Line Break Example</title>
  </head>
  <body>
   <!--All content to be added here -->
  </body>
</html>

📄 Paragraphs (<p>)

  • Used for writing blocks of text

  • Automatically adds space above and below the paragraph

  • Keep each main idea in its own <p> tag

  • <p>This is a paragraph of text. You can write as much as you like here.</p>

<body>  
   <p> Paragraphs are used for writing blocks of text. Each paragraph is enclosed in <p> tags. </p>
   <p> Browsers automatically add space above and below paragraphs to separate them visually.</p>
   <p> It's a good idea to keep each main idea in its own paragraph for readability and structure. </p>
   <p> This is a paragraph of text. You can write as much as you like here, and it will wrap automatically within the container. </p>
</body>

↩️ Line Breaks (<br>)

  • <p>This is line one.<br>This is line two.</p>

  • Use it sparingly — if you're breaking lines often, you probably need a new paragraph instead.

  • Used when you want to break the line without starting a new paragraph

  • It’s a self-closing tag, so no closing </br>