Web Development on Telegram: “🌐 Web Development Roadmap

🌐 Web Development Roadmap — Part 15

HTML Headings, Paragraphs & Text Formatting

Now let's learn the most common HTML elements used to display and organize text on a webpage.

1. HTML Headings

HTML provides six heading levels:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

The hierarchy is:

<h1> Most important

↓

<h2>

↓

<h3>

↓

<h4>

↓

<h5>

↓

<h6> Least important

2. <h1> — Main Heading

Usually, <h1> represents the main heading of a page.

<h1>My Portfolio</h1>

For example:

My Portfolio

─────────────

About Me

Projects

Contact

3. <h2> — Major Sections

Use <h2> for major sections under the main heading.

<h1>My Portfolio</h1>

<h2>About Me</h2>
<h2>My Projects</h2>
<h2>Contact</h2>

4. <h3> — Subsections

If a section contains smaller sections, use <h3>.

<h2>My Projects</h2>

<h3>Web Development Projects</h3>
<h3>JavaScript Projects</h3>

This creates a logical content hierarchy.

5. Paragraphs

Use <p> for normal paragraphs.

<p>
    I am learning web development and building websites.
</p>

Multiple paragraphs can be written separately:

<p>HTML provides the structure of a webpage.</p>

<p>CSS controls its appearance.</p>

<p>JavaScript adds interactivity.</p>

6. Bold Text

Use <strong> when the text has strong importance.

<p>
    <strong>Important:</strong> Save your work regularly.
</p>

The browser normally displays it in bold.

7. Italic or Emphasized Text

Use <em> to emphasize text.

<p>
    This is <em>very important</em>.
</p>

The browser normally displays emphasized text in italic.

8. <br> — Line Break

<br> moves content to the next line.

<p>
    Hello!<br>
    Welcome to my website.
</p>

Result:

Hello!

Welcome to my website.

However, <br> should not normally be used to create large spaces between sections. CSS should handle layout and spacing.

9. <hr> — Thematic Break

<hr> represents a thematic break between sections.

<h2>About Me</h2>
<p>Information about me.</p>

<hr>

<h2>Projects</h2>
<p>My recent projects.</p>

The browser normally displays a horizontal line.

10. <mark> — Highlighted Text

<p>
    Learn <mark>
HTML</mark> before moving to CSS.
</p>

The browser normally highlights the marked text.

11. <small> — Smaller Text

<p>
    Website Terms <small>Last updated in 2026</small>
</p>

It represents side comments or small print.

12. Putting Everything Together