HTML Headings and Paragraphs - Structure Your Web Content

After your first page, learn headings and paragraphs to organize text effectively.

Headings create hierarchy; paragraphs hold body text.

Essential for SEO and readability.

1. HTML Headings (h1 to h6)

Use <h1> for main title, <h2> for sections, down to <h6>.

              
            
HTML

          Headings example
        
<h1>Main Title</h1>
<h2>Section 1</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<h5>Small</h5>
<h6>Tiny</h6>

Browsers show decreasing font sizes automatically.

2. HTML Paragraphs (<p>)

The <p> tag defines block-level text blocks with spacing.

              
HTML

          Paragraphs example
        
<p>This is a paragraph. It automatically adds space above and below.</p>
<p>Another paragraph for more content.</p>

Never skip </p> closing tag.

3. Complete Example Page

              
            
HTML

          Page with headings and paragraphs
        
<!DOCTYPE html>
<html>
<head>
    <title>Headings & Paragraphs</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is an introductory paragraph.</p>
    
    <h2>About Me</h2>
    <p>I love web development and coding tutorials.</p>
    
    <h3>Skills</h3>
    <p>HTML, CSS, JavaScript.</p>
</body>
</html>

4. Best Practices

- One <h1> per page (main title).

- Use headings logically, not for styling.

- Paragraphs: 3-5 sentences max.

5. Basic Attributes

- id: Unique identifier <h2 id="about">

- class: For styling <p class="intro">

6. Common Errors

- Using <b> or <font> instead of semantic tags.

- Skipping closing tags.

7. Next Steps

- Links: <a href="#">Click</a>

- Images: <img src="" alt="">

- Lists: <ul> <ol>

Conclusion

Master headings and paragraphs for well-structured pages.

Build and test—structure improves user experience.