⬅ Previous Next ➡

8. Headings & Paragraphs

Headings & Paragraphs
  • Heading Tags (<h1> to <h6>):
    • Used to define the hierarchy of content on a page.
    • <h1>: The most important heading (main title). Use only one per page for SEO.
    • <h6>: The least important heading.
    • Browsers automatically add some whitespace (margin) before and after headings.
  • Paragraph Tag (<p>):
    • Used to define a block of text.
    • Browsers automatically display paragraphs on a new line.
    • Like headings, browsers add a small margin above and below the paragraph to separate it from other elements.
  • Important Notes:
    • Don't skip levels: For a proper structure, follow a logical order (e.g., don't jump from <h1> to <h3>).
    • Empty lines: HTML ignores extra spaces or lines in your code; you must use <br> for a manual line break.

<!-- HTML Heading Tags (h1 to h6) -->
<h1>Heading 1 (Largest)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 (Smallest)</h6>

<!-- Short Notes About Headings -->
<p><b>Headings</b> are used to give titles and sub-titles to content.</p>
<p><b>h1</b> is the main title of the page and should be used only for the top heading.</p>
<p><b>h2</b> to <b>h6</b> are used for sub-sections in decreasing importance.</p>
<p>Headings help in <mark>better reading</mark> and also improve <mark>SEO</mark>.</p>

<!-- HTML Paragraph Tag (p) -->
<p>This is a paragraph in HTML.</p>
<p>The <b>&lt;p&gt;</b> tag is used to write normal text content.</p>
<p>Browsers automatically add space before and after each paragraph.</p>
<p>Use paragraphs to break large text into smaller readable parts.</p>
⬅ Previous Next ➡