HTML Text Basics

Section 4: Headings, Paragraphs, Text Formatting and Quotations

Welcome to Section 4 of Codementrix HTML5 Mastery. In this lesson, you will learn how to organize page content using headings and paragraphs, emphasize important information, represent inserted or deleted text, and display quotations correctly. You will also understand the difference between semantic HTML and purely visual formatting.

1. Learning Objectives

By the end of this lesson, you will be able to:

Use all six HTML heading levels correctly.
Structure content with headings and paragraphs.
Understand the difference between visual appearance and semantic meaning.
Use bold, italic, emphasized, highlighted, and other text-formatting elements appropriately.
Represent inline and block quotations using the correct elements.
Display abbreviations, definitions, citations, and computer-related text where appropriate.
Use line breaks, thematic breaks, and preformatted text correctly.
Avoid common HTML text-formatting and document-structure mistakes.

2. HTML Headings: Organizing Content

HTML provides six heading elements, from <h1> through <h6>. They communicate the heading structure of a page.

<h1> — the highest heading level.
<h2> — a second-level heading.
<h3> — a third-level heading.
<h4> — a fourth-level heading.
<h5> — a fifth-level heading.
<h6> — the lowest heading level.

Example: Six Heading Levels

<h1>HTML5 Mastery</h1>

<h2>HTML Fundamentals</h2>

<h3>Text Elements</h3>

<h4>Paragraphs</h4>

<h5>Paragraph Examples</h5>

<h6>Additional Notes</h6>

Browsers normally display these headings at different default sizes and weights. However, their primary purpose is to communicate the structure of the content, not simply to make text look large or small.

Choosing the Correct Heading Level

Choose a heading based on the relationship between sections, rather than its default font size.

<h1>Web Development Course</h1>

<h2>HTML</h2>
<p>Learn the structure of web pages.</p>

<h3>HTML Text Elements</h3>
<p>Learn headings, paragraphs and emphasis.</p>

<h3>HTML Forms</h3>
<p>Learn how to collect user input.</p>

<h2>CSS</h2>
<p>Learn how to style web pages.</p>

The structure is:

Web Development Course — main page heading.
HTML and CSS — major sections.
HTML Text Elements and HTML Forms — subsections of HTML.

Best Practices for Headings

Use headings to describe the content that follows.
Maintain a logical hierarchy wherever possible.
Do not choose a heading level only because its default appearance is convenient.
Do not use headings merely to make ordinary text bold or large.
Use CSS to customize heading size, color, spacing, and typography.
Do not assume every web page must contain exactly one <h1> because of a rigid SEO rule. Use a clear, meaningful heading structure appropriate to the page.

Accessibility tip: Screen-reader users can navigate by headings. Meaningful headings and a logical hierarchy help users understand and move through long pages.

3. Paragraphs: Writing Readable Content

The <p> element represents a paragraph. It is suitable for ordinary prose, descriptions, introductions, explanations, and other paragraph-like content.