HTML Headings

When creating a webpage, one of the first things you'll add is text. HTML provides special elements for organizing text so that visitors can easily read and understand your content. The two most commonly used text elements are headings and paragraphs.

Think of a webpage like a book. A book has chapter titles, section titles, and content paragraphs. HTML headings and paragraphs serve the same purpose on a webpage.

What Are HTML Headings?

Headings are used to define titles and section names on a webpage. They help organize content and make it easier for users and search engines to understand the page structure.

HTML provides six heading levels:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Learn HTML</h3>
<h4>HTML Examples</h4>
<h5>Small Heading</h5>
<h6>Tiny Heading</h6>

Understanding Heading Levels

• <h1> is the most important heading.
• <h6> is the least important heading.
• The size usually becomes smaller as the number increases.

A typical webpage might use:

<h1>Learn HTML</h1>
<h2>Introduction</h2>
<h3>What is HTML?</h3>

This creates a clear hierarchy, similar to a book's title, chapter, and section headings.

Best Practice for Headings

Use only one <h1> for the main page title whenever possible. Then use <h2>, <h3>, and other headings in a logical order.

Incorrect:

<h1>Main Title</h1>
<h4>Subheading</h4>

Correct:

<h1>Main Title</h1>
<h2>Subheading</h2>

What Are HTML Paragraphs?

Paragraphs are used to display blocks of text.

The <p> element represents a paragraph.

Example:

<p>
    HTML is the foundation of every website.
</p>

Browsers automatically add spacing before and after paragraphs, making content easier to read.

Why Paragraphs Are Important

Without paragraphs, large amounts of text would appear as one long block, making the page difficult to read.

Compare these examples:

Without paragraphs:

HTML is easy to learn. It is used on every website.

With paragraphs:

<p>HTML is easy to learn.</p>

<p>It is used on every website.</p>

The second example is much cleaner and more user-friendly.

Combining Headings and Paragraphs

Headings and paragraphs are often used together.

<h1>Learn HTML</h1>

<h2>Why Learn HTML?</h2>

<p>
    HTML is the foundation of web development.
</p>

This structure makes content organized and easy to follow.

Key Takeaways

• Headings Paragraphs is an important topic to understand.
• Start with small examples and practice one step at a time.
• Use the idea in simple projects so it becomes easier to remember.