🟢 Foundation  ·  Lesson 06

Headings and Paragraphs

Headings और Paragraphs

Headings — h1 to h6

<h1>Alpine Public School</h1>
<h2>Admissions 2026</h2>
<h3>Class 1 to 5</h3>
<h4>Documents Required</h4>
<h5>Photo Guidelines</h5>
<h6>Note</h6>
Alpine Public School (largest) Admissions 2026 Class 1 to 5 Documents Required Photo Guidelines Note (smallest)
Think of a newspaper: h1 is the front-page headline (one per page!), h2 are the section titles, h3 the story titles inside a section, and so on. Headings are NOT for making text big — they declare the outline/importance of content. Making text big is CSS's job.

The Hierarchy Rule — what Google reads

  • Exactly one <h1> per page — it tells Google the page's main topic. Two h1s = two "main topics" = confused ranking.
  • Never skip levels going down: h1 → h2 → h3 is right; h1 → h4 (skipping 2,3) breaks the outline that screen readers and Google build.
  • Never choose a heading for its size. Want smaller text? Use the correct level and resize with CSS later.
Interview line: "Headings create the document outline; h1 is unique per page and carries the most SEO weight; levels must not be skipped." This exact point separates people who know HTML from people who just use it.

Paragraphs — and the br question

<p>Alpine Public School was established in Khurja.</p>
<p>It serves students from Nursery to Class 12.</p>

<p>Address line 1<br>
Address line 2<br>
PIN 203131</p>
Alpine Public School was established in Khurja. It serves students from Nursery to Class 12. Address line 1 Address line 2 PIN 203131

Two <p> tags = two separate paragraphs with a visible gap. <br> = a line break inside the same paragraph — no gap. Rule: new thought → new <p>; same thought, forced new line (addresses, poems) → <br>. Using a chain of <br><br> to fake paragraph gaps is the classic beginner smell — don't.

The hr Tag — a thematic break

<p>Topic one ends here.</p>
<hr>
<p>A new topic begins.</p>
Topic one ends here. ────────────────────────── A new topic begins.

<hr> (horizontal rule) draws a divider line — HTML5 defines it as a "thematic break": the story is changing. Empty element, no closing tag.

The Whitespace Surprise

<p>Alpine        Public


School</p>
Alpine Public School
Surprised? Browsers collapse any run of spaces, tabs and newlines into ONE space. Your Enter keys and extra spaces in code do NOT appear on the page — layout comes only from tags (p, br) and CSS. Need a real extra space? That is what the entity &nbsp; is for (full entities chapter later).

Headings — h1 से h6

<h1>Alpine Public School</h1>
<h2>Admissions 2026</h2>
<h3>Class 1 to 5</h3>
<h4>Documents Required</h4>
<h5>Photo Guidelines</h5>
<h6>Note</h6>
Alpine Public School (सबसे बड़ी) Admissions 2026 Class 1 to 5 Documents Required Photo Guidelines Note (सबसे छोटी)
अखबार सोचिए: h1 front-page की मुख्य headline है (page में एक!), h2 section titles, h3 section के अंदर की खबरों के titles, वगैरह. Headings text बड़ा करने के लिए NAHI हैं — ये content की outline/अहमियत बताती हैं. Text बड़ा करना CSS का काम है.

Hierarchy Rule — जो Google पढ़ता है

  • हर page में exactly एक <h1> — यह Google को page का main topic बताती है. दो h1 = दो "main topics" = confused ranking.
  • नीचे जाते हुए level कभी skip न करें: h1 → h2 → h3 सही; h1 → h4 (2,3 छोड़कर) वह outline तोड़ता है जो screen readers और Google बनाते हैं.
  • Size देखकर heading कभी न चुनें. छोटा text चाहिए? सही level लगाइए, size बाद में CSS से.
Interview line: "Headings document की outline बनाती हैं; h1 हर page में unique है और सबसे ज़्यादा SEO weight रखती है; levels skip नहीं होते." यही point HTML जानने वालों को सिर्फ use करने वालों से अलग करता है.

Paragraphs — और br का सवाल

<p>Alpine Public School was established in Khurja.</p>
<p>It serves students from Nursery to Class 12.</p>

<p>Address line 1<br>
Address line 2<br>
PIN 203131</p>
Alpine Public School was established in Khurja. It serves students from Nursery to Class 12. Address line 1 Address line 2 PIN 203131

दो <p> tags = दो अलग paragraphs, बीच में दिखता gap. <br> = उसी paragraph के अंदर line break — कोई gap नहीं. Rule: नई बात → नया <p>; वही बात, बस नई line चाहिए (addresses, कविताएं) → <br>. Paragraph gaps की नकल के लिए <br><br> की लड़ी लगाना classic beginner निशानी है — मत कीजिए.

hr Tag — thematic break

<p>Topic one ends here.</p>
<hr>
<p>A new topic begins.</p>
Topic one ends here. ────────────────────────── A new topic begins.

<hr> (horizontal rule) एक divider line खींचता है — HTML5 इसे "thematic break" कहता है: कहानी बदल रही है. Empty element, closing tag नहीं.

Whitespace वाला Surprise

<p>Alpine        Public


School</p>
Alpine Public School
हैरान? Browsers spaces, tabs और newlines की किसी भी लड़ी को collapse करके EK space बना देते हैं. Code के आपके Enter और extra spaces page पर NAHI दिखते — layout सिर्फ tags (p, br) और CSS से आता है. असली extra space चाहिए? उसी के लिए entity &nbsp; है (entities का पूरा chapter आगे).
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.