HTML Elements & Nesting Tutorial for Beginners | Block vs Inline Elements | Full Stack Web Development Lecture 4

🧩 Module 1, Lecture 4: HTML Elements & Nesting

Welcome back! In the last lecture, we learned the basic building blocks (headings, paragraphs, links, images). Today, we go deeper—we will learn what HTML elements really are, how they are structured, and most importantly, how to nest them (put elements inside other elements) to create rich, complex webpages.

📦 1. What is an HTML Element?

An HTML element is everything from the opening tag to the closing tag. It consists of three parts:

<p> This is the content </p>
⬆️ Opening Tag      ⬆️ Content              ⬆️ Closing Tag

• Opening Tag: <tagname> – tells the browser where the element starts.
• Content: The text, images, or other elements inside.
• Closing Tag: </tagname> – tells the browser where the element ends. (Some elements, like <img>, are self-closing and don't have a closing tag).

🧠 Remember: The element is the entire package (tags + content). The tag is just the angle brackets (< >) that mark the beginning and end.

📌 Two Major Categories: Block-Level vs. Inline Elements

Before we nest, you need to know how elements behave on the page.

🧱 Block-Level Elements

• Always start on a new line.
• Take up the full width available (stretch 100% left to right).
• Can contain other block and inline elements.
• Examples: <h1>, <p>, <div>, <ul>, <li>, <section>.

Block 1

Block 2

Block 3

⬆️ Each starts on a new line!

📏 Inline Elements

• Do not start on a new line.
• Only take up as much width as necessary (just the content).
• Can only contain other inline elements (or text).
• Examples: <a>, <img>, <strong>, <span>, <em>.

Inline 1 Inline 2 Inline 3

⬆️ All sit side-by-side!

🪆 2. Nested HTML Elements (Elements Inside Elements)

Nesting means placing one HTML element inside another. This is how you create structure, hierarchy, and complex layouts—like a tree with branches.

Parent ⬇️ Child ⬇️ Grandchild

This is the "family tree" of HTML!

📐 The Golden Rule of Nesting

✅ Open tags in reverse order: The element that opens last must close first (LIFO – Last In, First Out).

Think of it like putting clothes in a suitcase: the last shirt you pack is the first one you take out!

✅ Correct Nesting

<p>
    <strong>Bold text</strong> 
    inside a paragraph.
</p>

✅ <strong> is fully inside <p>. It closes before </p>.

❌ Incorrect Nesting (Overlapping)

<p>
    <strong>Bold text
</p>    <!-- ❌ Closes p too early -->
</strong> <!-- ❌ strong closes AFTER p -->

❌ The tags are overlapping (crossing). This breaks the page and can cause unpredictable styling.

🛠️ Practical Example 1: A Simple Article Card

Let's build a small "article card" using nesting. We'll put a heading, a paragraph, and a link inside a <div> (a generic container).

<!-- The DIV is the PARENT -->
<div style="border: 1px solid #ccc; padding: 20px; border-radius: 8px;">
    
    <!-- CHILD 1: Heading -->
    <h3>My First Blog Post</h3>
    
    <!-- CHILD 2: Paragraph (contains an inline <strong> inside) -->
    <p>
        This is a short summary. 
        <strong>Read more</strong> 
        below.
    </p>
    
    <!-- CHILD 3: Link -->
    <a href="#">Read Full Article</a>

</div>

👀 Rendered Result

My First Blog Post

This is a short summary. Read more below.

Read Full Article

✅ <div> is the parent. <h3>, <p>, and <a> are siblings (children). <strong> is a grandchild of <div>.

📋 Practical Example 2: Nested Lists (Multi-Level Menus)

Lists can contain other lists inside them. This is perfect for sub-categories or sitemaps.

<ul>
    <!-- Item 1 -->
    <li>
        Front-End
        <!-- NESTED LIST (child of this <li>) -->
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <!-- Item 2 -->
    <li>
        Back-End
        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

👀 Rendered Result

• Front-End
  • HTML
  • CSS
  • JavaScript
• Back-End
  • Node.js
  • Python

✅ The inner <ul> is nested inside the <li> of the outer list.

🧭 Practical Example 3: Navigation Bar (Links inside a List inside a <nav>)

This is how professional websites build their menus.

<nav> <!-- Semantic container for navigation -->
    <ul>
        <li>
            <a href="/">Home</a>
        </li>
        <li>
            <a href="/about">About</a>
        </li>
        <li>
            <a href="/contact">Contact</a>
        </li>
    </ul>
</nav>

👀 Rendered Result

• Home
• About
• Contact

✅ <nav> contains <ul>, which contains <li>, which contains <a>. This is 3 levels deep!

🧹 Best Practice: Indentation = Readability

❌ Bad (Unreadable)

<div><h1>Title</h1><p>Text</p></div>

😵 Hard to see where one element ends and the next begins.

✅ Good (Clean Indentation)

<div>
    <h1>Title</h1>
    <p>Text</p>
</div>

✅ The hierarchy is crystal clear. Use Tab or 2-4 spaces for each nested level.

🎯 Your 5-Minute Challenge: Build a "Profile Card"

Using everything you've learned, create the following nested structure in VS Code:

• A <div> container (the parent).
• Inside it, an <img> (profile picture).
• A <h2> (person's name).
• A <p> (short bio) that contains an <strong> tag around a key skill.
• A <ul> (list of social media links) – inside each <li>, put an <a> tag.

👀 Click to see a solution (try it yourself first!)

<div style="border: 1px solid #ddd; padding: 20px; border-radius: 12px; width: 300px;">
    <img src="https://via.placeholder.com/100" alt="Profile" style="border-radius: 50%;">
    <h2>Jane Doe</h2>
    <p> 
        I am a <strong>Full Stack Developer</strong> 
        who loves teaching.
    </p>
    <h3>Find me online:</h3>
    <ul>
        <li><a href="#">GitHub</a></li>
        <li><a href="#">LinkedIn</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</div>

✅ Key takeaway: Nesting is like building with LEGO bricks. Each brick (element) fits inside another, and the order you open/close them determines the final structure!