Text Formatting: Headings, Paragraphs, and Lists

Text is the primary source of information on the web. Properly structured text elements help users scan your content easily and allow search engine crawlers to understand your page structure.

1. Headings (<h1> to <h6>)

HTML provides six levels of document headings, with <h1> being the most important and <h6> the least important.

<h1>Main Title (Page Title)</h1>
<h2>Section Title</h2>
<h3>Sub-section Title</h3>
<h4>Minor Heading</h4>
<h5>Sub-minor Heading</h5>
<h6>Smallest Heading</h6>

Best Practices for Headings:

• Only One <h1>: A page should have exactly one <h1> that acts as the page title. Having multiple <h1> tags will hurt your SEO.
• No Skipping Levels: Do not jump from <h2> directly to <h4>. Keep a logical hierarchy (<h1> -> <h2> -> <h3> -> <h4>).
• Choose for Structure, Not Size: Do not use <h1> just to make text big. Use CSS to adjust font sizes; use headings to reflect outline structure.

2. Paragraphs (<p>)

Paragraphs are defined using the <p> tag. Browsers automatically add empty margins before and after <p> elements.

<p>This is a paragraph of text on my website.</p>
<p>This is another paragraph, separated by margins.</p>

Formatting Line Breaks:

If you want to start a new line without starting a new paragraph, use the self-closing <br> tag:

<p>Line 1 of an address.<br>Line 2 of an address.</p>

3. Lists

Lists are excellent for grouping related items. HTML offers three distinct list formats:

A. Unordered List (<ul>)

Used for items where order does not matter. By default, browsers display them with bullet points.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

B. Ordered List (<ol>)

Used for items that require sequential numbers (e.g., recipes, steps).

<ol>
    <li>Install VS Code.</li>
    <li>Create index.html file.</li>
    <li>Run with Live Server.</li>
</ol>

C. Description List (<dl>)

Used for term-and-description pairs (like directories, glossaries, or key-value pairs).

• <dl>: Description list wrapper.
• <dt>: Term.
• <dd>: Description details.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets.</dd>
</dl>

In the next guide, we will learn how to embed media elements such as images, audio, and video players.