6. HTML Semantic Layout, Block vs Inline & Iframes

Theory & Practical Manual: header, nav, main, section, article, footer, div vs span, iframes

Module 1: Semantic Layout Architecture Theory

Structuring web pages with meaningful HTML5 semantic elements.

Core Theory & Principles

<header>: Page header / introductory banner.
<nav>: Major navigation links section.
<main>: Dominant primary content unique to document.
<section>: Generic standalone section of content.
<article>: Independent self-contained composition (blog post, news story).
<aside>: Sidebar content indirectly related to main content.
<footer>: Page footer with copyright and contact links.

Practical Key Takeaways

Mastering Semantic Layout Architecture Theory builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - Semantic Layout Architecture Theory

<header style="background: rgb(15, 23, 42); padding: 15px; text-align: center; color: rgb(56, 189, 248);">
    <h2>Website Banner Header</h2>
</header>
<nav style="background: rgb(51, 65, 85); padding: 10px; text-align: center; color: white;">
    Home | Tutorials | Notes | Contact
</nav>
<main style="background: rgb(30, 41, 59); padding: 20px; color: white;">
    <h3>Main Content Article</h3>
    <p>Semantic markup improves search engine indexing and screen reader navigation.</p>
</main>
<footer style="background: rgb(15, 23, 42); padding: 10px; text-align: center; color: rgb(148, 163, 184);">
    &copy; 2026 Instructor Notes Suite
</footer>

📤 Expected Output / Browser Rendered Result:

Complete semantic web layout with banner header, navigation bar, main body, and footer.