Welcome to Part 2 of the HTML5 & Semantic Web Development Course. In the previous part, you learned how to scaffold a basic HTML document. Now, we will focus on organizing the actual content that goes into the body of your webpage.

You will learn how to write structured text using headings and paragraphs, how to apply typography tags for inline emphasis, the difference between block and inline element display behaviors, and how to group content logically using semantic layout tags introduced in HTML5.

Chapter 7: Headings & Paragraphs

7.1 Heading Tags (`<h1>` to `<h6>`)

HTML provides six levels of headings, ranging from <h1> (the most important) to <h6> (the least important). Browsers render higher-level headings in larger, bolder fonts by default.

<h1>Main Topic / Title of Page</h1>
<h2>Sub-topic</h2>
<h3>Section Heading</h3>
<h4>Sub-section Heading</h4>
<h5>Minor Heading</h5>
<h6>Detail Heading</h6>

Crucial Rule: Headings should represent a structural outline of the page, not just a way to make text big. Never skip heading levels (e.g., jumping from <h1> straight to <h3>).
One H1 Per Page: For optimal SEO and accessibility, every webpage should contain exactly one <h1> that represents the main topic of the page.

7.2 Paragraph Tag (`<p>`)

Paragraphs are defined with the <p> tag. Browsers automatically add vertical margin (empty space) before and after paragraph elements to separate them.

<p>This is the first paragraph of text on my website.</p>
<p>This is the second paragraph. Browsers separate us automatically.</p>

Chapter 8: Inline Text Formatting

Inline formatting elements are used to apply style, semantics, or meaning to specific words or phrases inside a block-level element (like a paragraph).

8.1 Strong Importance (`<strong>`) & Bold (`<b>`)

<strong>: Represents strong importance, seriousness, or urgency. Browsers display it in bold. Search engines and screen readers pay attention to it.
<b>: Used to draw attention to text without implying extra importance (purely stylistic bolding).

<p><strong>Warning:</strong> Do not cross this line.</p>
<p>Please print your name in <b>black ink</b> only.</p>

8.2 Emphasis (`<em>`) & Italic (`<i>`)

<em>: Emphasizes a word or phrase, changing the meaning of a sentence depending on where it is applied. Screen readers pronounce it with verbal stress, and browsers render it in italics.
<i>: Applies italic styling to represent a technical term, idiomatic phrase, or foreign word, without indicating extra emphasis.

<p>You <em>must</em> submit the assignment today.</p>
<p>The Latin term for cat is <i>Felis catus</i>.</p>

8.3 Other Useful Inline Formatting Tags

<mark>: Highlights text (usually with a yellow background) to show relevance or matches in search.
<small>: Used for side-comments and small print (like copyright notices).
<sub> / <sup>: Renders subscript (lower text) and superscript (higher text). Useful for chemical formulas ($H_2O$) and mathematical exponents ($x^2$).
<code>: Marks text as computer code. Renders in a monospaced (fixed-width) font.
<pre>: Preformatted text. Preserves all spaces, tabs, and line breaks exactly as typed in the HTML file. Often wrapped around <code> tags.

<p>Chemical formula for water: H<sub>2</sub>O</p>
<p>Pythagorean Theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<pre><code>
function sayHello() {
  console.log("Hello, World!");
}
</code></pre>

Chapter 9: Block vs Inline Elements

To build layouts, you must understand how HTML elements occupy space on the page. Every element has a default display type: block or inline.

9.1 Block-Level Elements

Behavior: Start on a new line and stretch to occupy the full width of their parent container (100% width).
Can contain: Other block elements and inline elements.
Examples: <h1>-<h6>, <p>, <div>, <pre>, <hr>, <ul>, <ol>.

9.2 Inline-Level Elements

Behavior: Do not start on a new line. They only occupy as much width as their content needs.
Can contain: Only other inline elements. Placing a block element inside an inline element is invalid HTML.
Examples: <a>, <span>, <strong>, <em>, <code>, <img>.

Chapter 10: Introduction to Semantic HTML

10.1 What is Semantic HTML?

Semantic HTML refers to using tags that clearly describe their meaning and purpose to both the browser and the developer.

Non-Semantic elements: <div> and <span>. They tell us nothing about their content.
Semantic elements: <header>, <article>, <footer>. They immediately describe what they represent.

10.2 Why Use Semantic HTML?

Accessibility (a11y): Screen readers use semantic tags to help blind or visually impaired users navigate a site.
SEO (Search Engine Optimization): Google crawls your site and uses semantic tags to determine what content is most important (e.g., an article vs. a footer).
Code Maintenance: Clearer structure makes code easier to read for you and other developers.

Chapter 11: Page Layout Elements

HTML5 introduced semantic layout elements to replace generic <div> tags for layout sections:

<body>
    <header>
        <!-- Site Title and Logo -->
        <nav>
            <!-- Navigation Menu -->
        </nav>
    </header>

    <main>
        <section>
            <h2>Latest News</h2>
            <article>
                <h3>New Feature Released</h3>
                <p>We are excited to announce...</p>
            </article>
        </section>

        <aside>
            <!-- Sidebar with related links -->
        </aside>
    </main>

    <footer>
        <!-- Copyright and Footer Links -->
    </footer>
</body>

<header>: Introductory content for a page or a section (usually containing logos and navigation).
<nav>: A block of navigation links.
<main>: The unique, primary content of the document. There should only be one <main> tag per page.
<section>: A generic thematic grouping of content, typically with a heading.
<article>: A self-contained, independent composition that could be distributed or republished elsewhere (e.g., blog posts, news articles).
<aside>: Content tangentially related to the main content (like sidebars, pull quotes, or ads).
<footer>: Footer for a page or section, containing author, copyright, and contact details.

Chapter 12: Generic Containers (`<div>` & `<span>`)

When no semantic tag fits the purpose, use generic containers, primarily for CSS styling and JavaScript interactions.

<div>: A block-level generic container. Use it to group elements for layout styling (e.g., creating a flexbox row).
<span>: An inline-level generic container. Use it to wrap specific words or characters to style them (e.g., making a single word red in a paragraph).

<div class="card">
    <h3>Product Title</h3>
    <p>Price: <span class="price-highlight">$19.99</span></p>
</div>

Chapter 7: Headings & Paragraphs

7.1 Heading Tags (<h1> to <h6>)

7.2 Paragraph Tag (<p>)