🧱 Phase 1 · HTML 🟢 Beginner MODULE 02

HTML Elements & Text

⏱️ 35 min

📖 Theory + Code

🧩 5 Questions

🏗️ 1 Challenge

Phase 1 progress25%

🎯 What you'll learn: All six heading levels, paragraphs and text formatting, inline vs block elements, semantic HTML5 elements (header, nav, main, section, article, aside, footer), the difference between <div> and semantic tags, and why semantics matter for SEO and accessibility.

Section 1

Headings — h1 to h6

HTML has six heading levels. They create a visual and semantic hierarchy — <h1> is the most important (main title, use once per page), <h6> is the least important. Search engines use heading hierarchy to understand page structure, so use them in order — don't skip from h1 to h4.

Main Page Title

Section Heading

Subsection Heading

Sub-subsection

Minor Heading

Smallest Heading

headings.html

HTML

<!-- h1: one per page — the main topic -->
<h1>Python Programming for Beginners</h1>

<!-- h2: major sections -->
<h2>Phase 1: The Basics</h2>

<!-- h3: subsections within an h2 section -->
<h3>Variables and Data Types</h3>
<p>Variables store data values...</p>

<h3>Operators</h3>
<p>Python supports arithmetic operators...</p>

<!-- h2: next major section -->
<h2>Phase 2: Control Flow</h2>

⚠️

Don't use headings to make text bigger — use CSS for that

A common beginner mistake is using <h3> or <h4> just because you want larger text. This breaks your document structure, confuses screen readers, and hurts SEO. Use headings for their meaning, and CSS font-size for visual sizing. Always ask: "Is this actually a new section heading?"

Section 2

Paragraphs & Text Formatting

The <p> tag wraps a paragraph of text. Browsers automatically add space above and below it. For inline text formatting, HTML provides several elements — each with semantic meaning, not just visual styling.

text_formatting.html

HTML

<!-- Paragraph -->
<p>This is a paragraph. Browsers add spacing above and below automatically.</p>

<!-- Semantic importance -->
<p>This word is <strong>very important</strong> — bold with meaning.</p>
<p>This is <em>emphasised</em> — italic with meaning.</p>

<!-- Presentational only (use CSS instead) -->
<p><b>Bold</b> without importance. <i>Italic</i> without emphasis.</p>

<!-- Other text elements -->
<p>Water is H<sub>2</sub>O. E = mc<sup>2</sup>.</p>
<p>The answer is <mark>highlighted here</mark>.</p>
<p><del>Old price: PKR 500</del> New price: PKR 350</p>
<p>Inline code: <code>print("hello")</code></p>

<!-- Line break and horizontal rule -->
<p>Line one<br>Line two (same paragraph)</p>
<hr>   <!-- thematic break / divider line -->

<!-- Blockquote -->
<blockquote>
  "Programs must be written for people to read, and only incidentally for machines to execute."
  <cite>— Harold Abelson</cite>
</blockquote>

✨

<strong> vs <b> — choose by meaning, not appearance

Both render as bold by default, but they have different meanings. <strong> indicates the text is important — screen readers may announce it with extra stress. <b> is purely visual bold with no semantic weight (like a keyword in a document). Similarly, <em> is "emphasis with meaning" and <i> is "italic for style" (like a book title or technical term).

Section 3

Block vs Inline Elements

Every HTML element has a default display type. This determines how it sits on the page relative to other elements. There are two main types: block and inline.

📦 Block Elements

→ Start on a new line
→ Take full width available
→ Stack vertically
→ Examples: div, p, h1–h6, ul, ol, li, section, article, header, footer

🔤 Inline Elements

→ Flow within text
→ Only as wide as content
→ Sit side by side
→ Examples: span, a, strong, em, img, code, mark, sub, sup

block_vs_inline.html

HTML

<!-- div: generic block container -->
<div>I am block — I take the full width.</div>
<div>I start on a new line automatically.</div>

<!-- span: generic inline container -->
<p>
  This paragraph has a
  <span style="color: orange">highlighted word</span>
  and continues on the same line.
</p>

<!-- Don't nest block inside inline -->
<!-- WRONG: <span><div>...</div></span> -->
<!-- OK: <div><span>...</span></div> -->

Section 4

Semantic HTML5 Elements

Before HTML5, developers wrapped everything in <div> tags. HTML5 introduced semantic elements — tags whose names describe their purpose. They look the same as divs by default, but they give meaning to your structure that browsers, screen readers, and search engines can understand.

Page/Section Header

Top of page or section. Usually contains logo, site title, navigation.

<nav>

Navigation

Contains navigation links — main menu, breadcrumbs, pagination.

<main>

Main Content

The primary unique content of the page. Only one per page.

Thematic Section

A grouping of related content, typically with its own heading.

Self-Contained Content

Blog post, news article, product card — content that makes sense on its own.

<aside>

Sidebar / Related

Tangentially related content — sidebar, pull quotes, related links.

Footer

Bottom of page/section. Copyright, links, contact info.

Figure + Caption

Wraps images, diagrams, or code with an optional <figcaption>.

<time>

Date / Time

Machine-readable date: <time datetime="2025-01-01">

semantic_layout.html — a blog page structure

HTML

<body>

  <header>
    <h1>BitWithBite Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/courses">Courses</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <header>   <!-- article can have its own header -->
        <h2>Getting Started with Python</h2>
        <p>Published <time datetime="2025-01-15">January 15, 2025</time></p>
      </header>

      <section>
        <h3>Why Learn Python?</h3>
        <p>Python is the most popular language for beginners...</p>
        <figure>
          <img src="python-chart.png" alt="Python popularity chart">
          <figcaption>Python tops the TIOBE Index for 2025</figcaption>
        </figure>
      </section>
    </article>

    <aside>
      <h3>Related Courses</h3>
      <ul>
        <li><a href="/python">Python Mastery</a></li>
        <li><a href="/css">HTML & CSS</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 BitWithBite. All rights reserved.</p>
  </footer>

</body>

🔍

Semantic HTML boosts your Google ranking

Google's crawlers understand semantic HTML. A page with a proper <article>, <h1>, and <time> structure ranks better than one that's just a pile of <div> tags. It also makes your site accessible — screen readers announce "navigation landmark" when they hit a <nav>, helping visually impaired users navigate efficiently.

Section 5

Special Characters & Entities

Some characters have special meaning in HTML (< > &) — if you type them directly, the browser might interpret them as code. Use HTML entities to display them safely.

entities.html

HTML

<!-- Essential entities -->
<p>Less than: &lt;   → displays <</p>
<p>Greater than: &gt; → displays ></p>
<p>Ampersand: &amp;  → displays &</p>
<p>Non-breaking space: &nbsp; → forces a space</p>
<p>Copyright: &copy;  → ©</p>
<p>Registered: &reg;  → ®</p>

<!-- Displaying code in text -->
<p>In HTML, write &lt;p&gt; for a paragraph tag.</p>
<!-- renders as: In HTML, write <p> for a paragraph tag. -->

<!-- Quotes for attribute values -->
<p title="He said &quot;hello&quot;">Hover me</p>

🧩 Knowledge Check

5 questions — HTML Elements & Text

1. How many <h1> tags should a page normally have?

2. What is the difference between <strong> and <b>?

3. Which element is the correct semantic choice for the main navigation menu?

4. What is the difference between a block and an inline element?

5. Which HTML entity displays the & (ampersand) character?

🏗️

Challenge — Semantic Blog Post Page

Build a fully semantic article page using correct HTML5 structure

Task: Build a complete blog post page blog-post.html with proper semantic structure:

1. <header> with a <h1> site title and <nav> with 3 links
2. <main> containing an <article>
3. Inside the article: its own <header> with <h2> title and <time> date, then two <section> blocks each with <h3> and paragraphs
4. An <aside> with "About the Author" using <strong> and <em> for text formatting
5. A <footer> with copyright using the © entity
6. A <blockquote> with a <cite> inside one of the sections

💡 Show hints

time tag: <time datetime="2025-06-01">June 1, 2025</time>
blockquote: wrap the quote text, then add <cite>— Author Name</cite>
aside goes inside main, next to the article (not inside it)

blog-post.html — Sample Solution

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Why Learn HTML | BitWithBite Blog</title>
</head>
<body>

  <header>
    <h1>BitWithBite Blog</h1>
    <nav>
      <a href="/">Home</a> |
      <a href="/courses">Courses</a> |
      <a href="/contact">Contact</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Why Every Developer Should Know HTML</h2>
        <p>Published on <time datetime="2025-06-01">June 1, 2025</time></p>
      </header>

      <section>
        <h3>The Foundation of the Web</h3>
        <p>HTML is the <strong>backbone</strong> of every webpage.
        Even React and Vue ultimately output HTML to the browser.</p>
        <blockquote>
          "The web is for everyone."
          <cite>— Tim Berners-Lee</cite>
        </blockquote>
      </section>

      <section>
        <h3>Semantic HTML Matters</h3>
        <p>Using <em>semantic elements</em> improves
        accessibility <strong>and</strong> SEO rankings.</p>
      </section>
    </article>

    <aside>
      <h3>About the Author</h3>
      <p><strong>Ali Hassan</strong> is a web developer from
      <em>Lahore, Pakistan</em>.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 BitWithBite. All rights reserved.</p>
  </footer>

</body>
</html>

Phase 1 · HTMLLesson 2 of 4