Semantic HTML5 Layout
সিমান্টিক HTML5 লেআউট
1. Beyond <div> — Giving Structure Meaning
You could technically build any page using only <div> elements with class names like
"header" or "nav". Browsers would render it fine. But HTML5 introduced dedicated
semantic elements — tags whose name itself describes the role of the content inside.
Using them instead of generic divs makes your code easier for humans to read and for machines (search
engines, screen readers) to understand.
<div> এলিমেন্ট দিয়ে "header" বা "nav"-এর মতো class নাম ব্যবহার করে বানাতে পারেন। ব্রাউজার সেটা ঠিকভাবেই রেন্ডার করবে। কিন্তু HTML5 নির্দিষ্ট সিমান্টিক এলিমেন্ট চালু করেছে — এমন ট্যাগ যাদের নামই ভেতরের কনটেন্টের ভূমিকা বর্ণনা করে। সাধারণ div-এর বদলে এগুলো ব্যবহার করলে কোড মানুষের জন্য পড়া সহজ হয় এবং মেশিনের (সার্চ ইঞ্জিন, স্ক্রিন রিডার) জন্য বোঝা সহজ হয়।
2. The Big Four — <header>, <nav>, <main>, <footer>
<header> holds introductory content — usually a logo, site title, and navigation.
<nav> wraps a block of major navigation links. <main> wraps the
one, unique, central content of the page — there should be exactly one visible <main>
per page. <footer> holds closing content like copyright, contact links, or sitemap
links.
<header>-এ থাকে ভূমিকামূলক কনটেন্ট — সাধারণত লোগো, সাইট টাইটেল ও নেভিগেশন। <nav> প্রধান নেভিগেশন লিংকের একটি ব্লক মোড়ায়। <main> পেজের একমাত্র, অনন্য, মূল কনটেন্ট মোড়ায় — প্রতিটি পেজে ঠিক একটি দৃশ্যমান <main> থাকা উচিত। <footer>-এ থাকে সমাপনী কনটেন্ট, যেমন কপিরাইট, যোগাযোগ লিংক, বা সাইটম্যাপ লিংক।
<body>
<header>
<h1>ABCL TECH</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>This is the page's main content.</p>
</main>
<footer>
<p>© 2026 ABCL TECH</p>
</footer>
</body>3. <article> vs <section>
Both group related content, and the difference confuses beginners. Use <article> for
content that could stand entirely on its own and make sense if pulled out and placed elsewhere — a blog
post, a news story, a product card. Use <section> for a thematic grouping of content
that's part of a larger whole and usually has its own heading — a chapter, a tab panel, a features block.
<article> ব্যবহার করুন এমন কনটেন্টের জন্য যা সম্পূর্ণরূপে নিজে থেকেই দাঁড়াতে পারে এবং আলাদা করে অন্য কোথাও রাখলেও অর্থবহ থাকে — একটি ব্লগ পোস্ট, নিউজ স্টোরি, প্রোডাক্ট কার্ড। <section> ব্যবহার করুন কনটেন্টের একটি থিম্যাটিক গ্রুপিংয়ের জন্য যা একটি বড় অংশের অংশবিশেষ এবং সাধারণত নিজস্ব heading থাকে — একটি অধ্যায়, ট্যাব প্যানেল, ফিচার ব্লক।
<main>
<section>
<h2>Latest Blog Posts</h2>
<article>
<h3>Learning HTML in 2026</h3>
<p>A beginner-friendly guide...</p>
</article>
<article>
<h3>Why Semantics Matter</h3>
<p>Structure your pages meaningfully...</p>
</article>
</section>
</main>4. <aside> — Related but Separate
<aside> marks content that's tangentially related to the surrounding content but not
essential to it — a sidebar, a pull quote, related-links widget, or an ad block. Screen reader users can
jump straight past an aside if they only want the main story.
<aside> এমন কনটেন্ট চিহ্নিত করে যা আশেপাশের কনটেন্টের সাথে সামান্য সম্পর্কিত কিন্তু তার জন্য অপরিহার্য নয় — একটি সাইডবার, একটি pull quote, related-links widget, বা একটি বিজ্ঞাপন ব্লক। স্ক্রিন রিডার ব্যবহারকারীরা শুধু মূল গল্প চাইলে aside এড়িয়ে সরাসরি যেতে পারেন।
5. <div> & <span> — The Last Resort
<div> (block-level) and <span> (inline) carry zero
semantic meaning — they exist purely so you have something to attach a class or apply CSS to when no
semantic tag fits. Reach for a semantic element first; fall back to div/span only when the content
genuinely doesn't match header, nav, main, article, section, aside, or footer.
<div> (block-level) এবং <span> (inline)-এর কোনো সিমান্টিক অর্থ নেই — এগুলো শুধু এই কারণে আছে যাতে class যুক্ত করা বা CSS প্রয়োগ করার মতো কিছু থাকে, যখন কোনো সিমান্টিক ট্যাগ মানানসই হয় না। প্রথমে সিমান্টিক এলিমেন্ট বেছে নিন; div/span শুধু তখনই ব্যবহার করুন যখন কনটেন্ট আসলেই header, nav, main, article, section, aside, বা footer-এর সাথে না মেলে।
<div> lets you build anything, but semantic tags make your code readable at a glance
and boost SEO because search engines weigh content inside <article>/<main>
more heavily.
<div> দিয়ে সব কিছু বানানো যায়, কিন্তু সিমান্টিক ট্যাগ ব্যবহার করলে কোড এক নজরে পড়া যায় এবং SEO ভালো হয়, কারণ সার্চ ইঞ্জিন <article>/<main>-এর ভেতরের কনটেন্টকে বেশি গুরুত্ব দেয়।
6. The Outline Algorithm — How Headings Build a Document Map
Browsers, screen readers, and search engines build an invisible "outline" of your page from your
headings (h1–h6) combined with your sectioning elements
(section, article, nav, aside). Keeping heading
levels in logical order — never skipping from h2 straight to h4 — keeps that
outline sensible, which is exactly how screen reader users often navigate a page: by jumping between
headings.
h1–h6) এবং sectioning এলিমেন্ট (section, article, nav, aside) থেকে পেজের একটি অদৃশ্য "outline" তৈরি করে। Heading লেভেল যৌক্তিক ক্রমে রাখা — h2 থেকে সরাসরি h4-এ না যাওয়া — সেই outline-কে অর্থবহ রাখে, এবং স্ক্রিন রিডার ব্যবহারকারীরা প্রায়ই এভাবেই পেজে নেভিগেট করেন — heading থেকে heading-এ লাফ দিয়ে।
7. Glossary (শব্দকোষ)
| Tag | Meaning | বাংলায় |
|---|---|---|
<header> | Introductory content for a page or section. | একটি পেজ বা সেকশনের ভূমিকামূলক কনটেন্ট। |
<nav> | A block of major navigation links. | প্রধান নেভিগেশন লিংকের একটি ব্লক। |
<main> | The one unique central content — one per page. | একমাত্র অনন্য মূল কনটেন্ট — প্রতি পেজে একটি। |
<article> | Self-contained content that stands alone. | স্বয়ংসম্পূর্ণ কনটেন্ট যা নিজে থেকেই দাঁড়াতে পারে। |
<section> | Thematic grouping, part of a larger whole. | থিম্যাটিক গ্রুপিং, বৃহত্তর অংশের একটি অংশ। |
<aside> | Tangentially related content. | সামান্য সম্পর্কিত কনটেন্ট। |
<footer> | Closing content — copyright, contact. | সমাপনী কনটেন্ট — কপিরাইট, যোগাযোগ। |
<div>/<span> | No semantic meaning — styling hooks only. | কোনো সিমান্টিক অর্থ নেই — শুধু স্টাইলিং হুক। |
8. Practice Problems
Every problem has a Show Answer button. Try the problem yourself first, then check.
-
Build a page skeleton with a header (containing an h1), a main, and a footer.একটি header (যাতে একটি h1 থাকবে), একটি main, ও একটি footer সহ একটি পেজ কাঠামো বানান।
✨ Show Answer (উত্তর দেখুন)
ans1.html<header> <h1>My Site</h1> </header> <main> <p>Main content goes here.</p> </main> <footer> <p>© 2026</p> </footer> -
Add a nav with three links inside the header from Problem 1.Problem 1-এর header-এর ভেতরে তিনটি লিংক সহ একটি nav যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans2.html<header> <h1>My Site</h1> <nav> <a href="#">Home</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> </header> -
Inside main, add a section titled "Recent Posts" containing two article elements, each with its own h3.Main-এর ভেতরে "Recent Posts" শিরোনামের একটি section যোগ করুন, যার ভেতরে দুটি article থাকবে, প্রতিটির নিজস্ব h3 সহ।
✨ Show Answer (উত্তর দেখুন)
ans3.html<main> <section> <h2>Recent Posts</h2> <article> <h3>Post One</h3> <p>Summary of post one.</p> </article> <article> <h3>Post Two</h3> <p>Summary of post two.</p> </article> </section> </main> -
Add an aside next to the section from Problem 3 containing a short "About the Author" note.Problem 3-এর section-এর পাশে একটি ছোট "About the Author" নোট সহ একটি aside যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
ans4.html<aside> <h3>About the Author</h3> <p>Rahim writes about web development in Bangla.</p> </aside> -
In two or three sentences, explain the difference between article and section with your own example.নিজের একটি উদাহরণসহ দুই বা তিন বাক্যে article ও section-এর পার্থক্য ব্যাখ্যা করুন।
✨ Show Answer (উত্তর দেখুন)
Answer: An article is content that could be lifted out and placed on a completely different site and still make full sense on its own — like a single news story. A section groups related content that belongs to a bigger page and usually needs its surrounding context — like a "Testimonials" section on a landing page, which only makes sense alongside the rest of that page.
Article হলো এমন কনটেন্ট যা তুলে নিয়ে সম্পূর্ণ ভিন্ন একটি সাইটে বসালেও নিজে থেকেই সম্পূর্ণ অর্থবহ থাকে — যেমন একটি একক নিউজ স্টোরি। Section এমন সম্পর্কিত কনটেন্ট গ্রুপ করে যা একটি বড় পেজের অংশ এবং সাধারণত তার আশেপাশের প্রেক্ষাপট দরকার হয় — যেমন একটি ল্যান্ডিং পেজের "Testimonials" সেকশন, যা শুধু সেই পেজের বাকি অংশের সাথেই অর্থবহ।
Summary — Module 08
Semantic elements — <header>, <nav>, <main>,
<article>, <section>, <aside>,
<footer> — give your page a meaningful structure that both humans and machines can
understand. Reach for <div>/<span> only as a last resort, and keep
heading levels in order so your page's outline makes sense.
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer> — আপনার পেজকে এমন একটি অর্থবহ কাঠামো দেয় যা মানুষ ও মেশিন দুই-ই বুঝতে পারে। <div>/<span> শুধু শেষ উপায় হিসেবে ব্যবহার করুন, এবং heading লেভেল সঠিক ক্রমে রাখুন যাতে পেজের outline অর্থবহ থাকে।