HTML

Now that you understand the basic HTML boilerplate structure, it’s time to start adding and formatting visible content inside the <body> tag.

In HTML, text isn't just typed onto a screen—it is structured using specific tags to give words meaning (semantics), visual emphasis, and logical organization.

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

HTML offers six levels of section headings. <h1> represents the highest, most important level, while <h6> represents the lowest.

HTML 
<h1>Heading Level 1 (Main Title)</h1>
<h2>Heading Level 2 (Major Section)</h2>
<h3>Heading Level 3 (Sub-topic)</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Essential Rules for Headings:

  • Single <h1>: Use only one <h1> per page for the primary title.

  • Maintain Hierarchy: Do not skip heading levels for visual styling (e.g., don't jump directly from an <h2> to an <h4>). If you need smaller text, use CSS instead of picking an incorrect tag.

  • SEO & Accessibility: Screen readers and search engines use headings to generate document outlines and understand your content structure.

2. Paragraphs (<p>) & Line Breaks (<br>)

Text content is placed inside paragraph tags. Browsers automatically add a small space (margin) above and below every <p> element.

HTML 
<p>
  HTML treats consecutive spaces and newlines as a single space. 
  This means hitting Enter in your code editor won't create a new line on the screen.
</p>

<p>
  If you need a physical line break without starting a new paragraph, 
  use the self-closing line break tag: <br />
  This sentence appears immediately on the next line.
</p>

3. Semantic Text Formatting Tags

HTML provides specific tags to emphasize or highlight text. Always choose tags based on meaning, not just how they look.

Tag Name Visual Result Meaning / Best Use
<strong> Strong Importance Bold High importance or urgency (e.g., warnings, key terms).
<em> Emphasis Italic Stress emphasis that changes the spoken tone of a sentence.
<mark> Highlight Yellow Background Highlighted text relevant to the user's current context.
<code> Inline Code monospace font Computer code snippets or terminal commands.
<blockquote> Block Quote Indented block Extended quotations from an external source or document.

4. Hands-On Exercise: Formatting a Mini Article

Let's combine what you've learned into a real HTML snippet.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Text Formatting Practice</title>
</head>
<body>

    <h1>Understanding Web Development</h1>
    <p>Web development is divided into two primary disciplines: <strong>Frontend</strong> and <strong>Backend</strong>.</p>

    <h2>Frontend Development</h2>
    <p>Frontend code runs directly in the user's browser. It consists of three core technologies:</p>
    <p>
        1. <em>HTML</em> for structure <br>
        2. <em>CSS</em> for styling <br>
        3. <em>JavaScript</em> for interactivity
    </p>

    <h2>A Quick Quote</h2>
    <blockquote>
        "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
    </blockquote>

</body>
</html>

5. Summary Checklist

1.Check Heading Structure:Document hierarchy.

Ensure your page has one <h1> tag and that subheadings follow a logical nested order (<h2> $\rightarrow$ <h3>).

2.Wrap All Prose in Paragraphs:Content separation.

Avoid leaving plain text floating loosely inside <body>. Always wrap sentences in <p> tags.

3.Use Semantic Formatting:Meaning over style.

Use <strong> and <em> instead of presentation-only tags like <b> or <i> so screen readers interpret emphasis correctly.

  Previous
Next