Text Content & Semantic Basics

টেক্সট কনটেন্ট ও সিমান্টিক বেসিক্স

Read: ~20 min Beginner 8 practice problems Live preview runner

1. Content That Means Something, Not Just Looks a Certain Way

HTML's job is not to make text bold or big — that is CSS's job, coming later in this course. HTML's job is to say what a piece of text is: a heading, a paragraph, an important warning, a quoted phrase. This idea is called semantic markup, and it is one of the most important habits you will build in this entire course.

HTML-এর কাজ টেক্সটকে bold বা বড় দেখানো নয় — এটি CSS-এর কাজ, যা এই কোর্সে পরে আসবে। HTML-এর কাজ হলো একটি টেক্সট আসলে কী — একটি heading, একটি paragraph, একটি গুরুত্বপূর্ণ সতর্কবার্তা, নাকি একটি উদ্ধৃত বাক্য — তা বলে দেওয়া। এই ধারণাটিকেই বলে সিমান্টিক মার্কআপ, এবং এটি এই পুরো কোর্সে আপনার শেখা সবচেয়ে গুরুত্বপূর্ণ অভ্যাসগুলোর একটি।

2. Headings h1–h6

HTML gives you six levels of heading: <h1> (most important) down to <h6> (least important). A page should have exactly one <h1> — it announces the page's main topic, much like a book's title. Sub-topics use <h2>, their sub-topics use <h3>, and so on, forming an outline much like a table of contents.

HTML-এ ছয় লেভেলের heading আছে — <h1> (সবচেয়ে গুরুত্বপূর্ণ) থেকে <h6> (সবচেয়ে কম গুরুত্বপূর্ণ) পর্যন্ত। একটি পেজে ঠিক একটি <h1> থাকা উচিত — এটি পেজের মূল বিষয় ঘোষণা করে, ঠিক যেমন একটি বইয়ের টাইটেল। সাব-টপিকের জন্য <h2>, তার সাব-টপিকের জন্য <h3> — এভাবে একটি আউটলাইন তৈরি হয়, অনেকটা সূচিপত্রের মতো।
H1 — Page Title H2 — Section H3 — Sub-section H2 — Another Section H3 — Sub-section Figure 3.1 — heading levels একটি আউটলাইন তৈরি করে।
Common mistake Never pick a heading level because of its default size (e.g. using <h3> just because <h1> "looks too big"). Sizing is a CSS problem; heading level is a structure problem — skipping levels confuses screen readers and search engines.

শুধু default সাইজের জন্য heading লেভেল বাছাই করবেন না (যেমন <h1> "বেশি বড় লাগছে" বলে <h3> ব্যবহার করা)। সাইজ CSS-এর সমস্যা; heading লেভেল কাঠামোর সমস্যা — লেভেল বাদ দিলে স্ক্রিন রিডার ও সার্চ ইঞ্জিন বিভ্রান্ত হয়।

3. Paragraphs & Line Breaks

Regular text belongs inside <p> tags — the browser automatically adds space above and below each paragraph. Pressing Enter inside your HTML source does nothing visually; browsers collapse all extra whitespace into a single space. To force a line break within a paragraph — like in a mailing address — use the self-closing <br> tag. Use it sparingly: reaching for <br> to create paragraph-like spacing is a common beginner mistake.

সাধারণ টেক্সট <p> ট্যাগের ভেতরে থাকা উচিত — ব্রাউজার প্রতিটি paragraph-এর উপরে-নিচে নিজে থেকেই স্পেস যোগ করে। HTML সোর্সে Enter চাপলে ভিজ্যুয়ালি কিছুই হয় না — ব্রাউজার অতিরিক্ত সব whitespace একটি স্পেসে পরিণত করে দেয়। একটি paragraph-এর ভেতরে জোর করে লাইন ব্রেক করতে হলে (যেমন ঠিকানার ক্ষেত্রে) সেলফ-ক্লোজিং <br> ট্যাগ ব্যবহার করুন। এটি কম ব্যবহার করাই ভালো — paragraph-এর মতো স্পেসিং তৈরি করতে বারবার <br> ব্যবহার করা একটি সাধারণ ভুল।
paragraphs.html 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Text Basics</title></head>
<body>
  <h1>About Me</h1>
  <p>I am learning HTML and CSS with ABCL TECH.</p>
  <p>
    123 Green Road<br>
    Dhanmondi, Dhaka<br>
    Bangladesh
  </p>
</body>
</html>

4. strong vs em vs b/i — Meaning vs Style

<strong> and <b> both render bold text by default, and <em> and <i> both render italic text — but they mean different things. <strong> marks text of strong importance (screen readers may change their tone of voice); <b> just makes text bold with no special meaning — useful for something like a keyword in a product listing. Likewise, <em> marks stressed emphasis that changes a sentence's meaning, while <i> is for text in an "alternate voice" — a technical term, a book title, a foreign phrase — with no added emphasis.

<strong> ও <b> দুটোই ডিফল্টভাবে bold টেক্সট দেখায়, এবং <em> ও <i> দুটোই italic দেখায় — কিন্তু এদের অর্থ আলাদা। <strong> টেক্সটকে গুরুত্বপূর্ণ হিসেবে চিহ্নিত করে (স্ক্রিন রিডার কণ্ঠস্বরের ধরন পরিবর্তন করতে পারে); <b> শুধু bold দেখায়, কোনো বিশেষ অর্থ বহন করে না — যেমন প্রোডাক্ট লিস্টিং-এ একটি কীওয়ার্ডের জন্য উপযোগী। একইভাবে, <em> এমন জোর দেয় যা বাক্যের অর্থ পরিবর্তন করে, আর <i> ব্যবহৃত হয় "ভিন্ন স্বর"-এর টেক্সটের জন্য — একটি টেকনিক্যাল টার্ম, বইয়ের নাম, বিদেশি শব্দ — কোনো বাড়তি জোর ছাড়াই।
TagMeaningTypical Use
<strong>Strong importance / seriousness"Warning: do not unplug during update."
<b>Bold with no extra meaningHighlighting a product name in a list
<em>Emphasis that changes meaning"I did lock the door" (contradicting doubt)
<i>Alternate voice, no emphasisBook titles, technical terms, foreign words
Key insight When unsure, ask: "am I describing an importance level, or just a look?" Importance → <strong>/<em>. Pure look → <b>/<i>.

নিশ্চিত না হলে নিজেকে প্রশ্ন করুন — "আমি কি একটি গুরুত্বের মাত্রা বোঝাচ্ছি, নাকি শুধু একটি রূপ?" গুরুত্ব হলে <strong>/<em>, শুধু রূপ হলে <b>/<i>।

5. Comments in HTML

You can leave notes in your code that browsers ignore completely using <!-- comment text -->. Comments are useful for labeling sections of a long file, leaving reminders for your future self, or temporarily disabling a block of markup while testing. Unlike some languages, HTML comments can span multiple lines.

<!-- comment text --> ব্যবহার করে কোডে এমন নোট রাখা যায় যা ব্রাউজার সম্পূর্ণ উপেক্ষা করে। লম্বা ফাইলের সেকশন লেবেল করতে, ভবিষ্যতের নিজের জন্য রিমাইন্ডার রাখতে, অথবা টেস্ট করার সময় সাময়িকভাবে একটি মার্কআপ ব্লক বন্ধ রাখতে কমেন্ট কাজে লাগে। কিছু ভাষার মতো নয় — HTML কমেন্ট একাধিক লাইন জুড়ে থাকতে পারে।
comments.html 
<!-- This is the header section -->
<h1>My Page</h1>

<!--
  TODO: replace this placeholder paragraph
  before publishing
-->
<p>Real content goes here.</p>

<!-- <p>This old paragraph is disabled for now.</p> -->

6. Why Heading Order Matters

Screen reader users often navigate a page by jumping between headings alone, the way sighted users skim a page visually. If your headings skip from <h1> straight to <h4>, that navigation breaks — it implies missing sections that do not exist. Search engines also use heading order to understand which content matters most and how a page is organized, which affects how your page is summarized in search results.

স্ক্রিন রিডার ব্যবহারকারীরা প্রায়ই শুধু heading ধরে ধরে পেজে navigate করেন, ঠিক যেভাবে চোখে দেখা ইউজাররা visually পেজ স্ক্যান করেন। আপনার heading যদি <h1> থেকে সরাসরি <h4>-এ চলে যায়, তাহলে সেই navigation ভেঙে যায় — মনে হয় কিছু সেকশন অনুপস্থিত যা আসলে নেই। সার্চ ইঞ্জিনও heading order দেখে বুঝতে চেষ্টা করে কোন কনটেন্ট বেশি গুরুত্বপূর্ণ ও পেজটি কীভাবে সাজানো, যা সার্চ রেজাল্টে পেজের সারাংশকে প্রভাবিত করে।
Predictable outline
একের পর এক লেভেল বাড়ে, বাদ যায় না।
Screen reader friendly
heading-জাম্প নেভিগেশন ঠিকভাবে কাজ করে।
Better SEO
সার্চ ইঞ্জিন কনটেন্ট গঠন সঠিকভাবে বোঝে।

7. Glossary (শব্দকোষ)

TermMeaningবাংলায়
Semantic markupUsing tags that describe meaning, not just appearance.যে ট্যাগ শুধু রূপ নয়, অর্থ প্রকাশ করে তা ব্যবহার করা।
Heading outlineThe h1–h6 hierarchy of a document.একটি ডকুমেন্টের h1–h6 স্তরবিন্যাস।
Whitespace collapsingBrowsers merge multiple spaces/newlines into one space.ব্রাউজার একাধিক স্পেস/নতুন লাইন মিলিয়ে একটি স্পেস করে দেয়।
Inline elementAn element like <strong> that flows within text.<strong>-এর মতো এলিমেন্ট, যা টেক্সটের মধ্যে প্রবাহিত হয়।

8. Practice Problems

Every problem has a Show Answer button. Try each one yourself first.

প্রতিটি প্রশ্নে Show Answer বাটন আছে। প্রথমে নিজে চেষ্টা করুন, তারপর উত্তর মিলিয়ে নিন।
  1. Write a page with one h1 titled "My Recipes" and two h2 subsections: "Breakfast" and "Dinner".
    "My Recipes" শিরোনামে একটি h1 এবং "Breakfast" ও "Dinner" নামে দুটি h2 সাবসেকশনসহ একটি পেজ লিখুন।
    ✨ Show Answer (উত্তর দেখুন)
    ans1.html
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>My Recipes</title></head>
<body>
  <h1>My Recipes</h1>
  <h2>Breakfast</h2>
  <p>Egg paratha and milk tea.</p>
  <h2>Dinner</h2>
  <p>Rice, dal, and fish curry.</p>
</body>
</html>
  2. In one sentence each, explain the difference between <strong> and <b>.
    <strong> ও <b>-এর মধ্যে পার্থক্য এক বাক্যে ব্যাখ্যা করুন।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: <strong> marks text as having real importance that assistive technology can convey; <b> just makes text visually bold with no semantic weight.

    <strong> টেক্সটকে সত্যিকারের গুরুত্বপূর্ণ হিসেবে চিহ্নিত করে যা assistive technology বুঝতে পারে; <b> শুধু দৃশ্যত bold করে, কোনো অর্থগত গুরুত্ব বহন করে না।

  3. Write a sentence using <em> correctly to change its meaning, e.g. emphasizing one word in "I never said he stole the money."
    <em> সঠিকভাবে ব্যবহার করে এমন একটি বাক্য লিখুন যা অর্থ পরিবর্তন করে, যেমন "I never said he stole the money." বাক্যে একটি শব্দে জোর দিয়ে।
    ✨ Show Answer (উত্তর দেখুন)
    ans3.html
    <p>I never said <em>he</em> stole the money.</p>
<p>(Implying: maybe someone else did.)</p>
  4. Add an HTML comment above a paragraph that reminds a future editor to "update this price yearly", without it showing on the page.
    একটি paragraph-এর উপরে একটি HTML কমেন্ট যোগ করুন যা ভবিষ্যতের এডিটরকে "প্রতি বছর এই দাম আপডেট করতে হবে" মনে করিয়ে দেয়, কিন্তু পেজে দেখা যাবে না।
    ✨ Show Answer (উত্তর দেখুন)
    ans4.html
    <!-- update this price yearly -->
<p>Course price: 999 BDT</p>
  5. Explain why writing three <br> tags in a row to create paragraph spacing is considered bad practice.
    paragraph-এর মতো স্পেস তৈরি করতে পরপর তিনটি <br> ট্যাগ ব্যবহার করা কেন খারাপ অভ্যাস, ব্যাখ্যা করুন।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: It uses a layout hack instead of correct structure — a <p> tag already carries semantic and spacing meaning, so stacking <br> tags produces the same visual gap without telling browsers, screen readers, or search engines that a new paragraph has actually started.

    এটি সঠিক কাঠামোর বদলে একটি লেআউট hack — <p> ট্যাগ নিজেই একটি অর্থবহ স্পেসিং বহন করে, তাই পরপর <br> ব্যবহার করলে দেখতে একই রকম স্পেস তৈরি হয়, কিন্তু ব্রাউজার, স্ক্রিন রিডার বা সার্চ ইঞ্জিনকে জানানো হয় না যে আসলে একটি নতুন paragraph শুরু হয়েছে।

  6. Write a heading structure for a blog post with one h1, and two h2 sections each containing one h3 sub-point.
    একটি ব্লগ পোস্টের জন্য heading গঠন লিখুন — একটি h1, এবং দুটি h2 সেকশন যার প্রতিটিতে একটি করে h3 সাব-পয়েন্ট আছে।
    ✨ Show Answer (উত্তর দেখুন)
    ans6.html
    <h1>Learning HTML in 2026</h1>
<h2>Why Start Now</h2>
<h3>Free Tools Available</h3>
<h2>How to Practice</h2>
<h3>Build Small Pages Daily</h3>
  7. Which tag — <i> or <em> — would you use to mark the movie title "Titanic" inside a sentence, and why?
    একটি বাক্যের মধ্যে "Titanic" সিনেমার নাম চিহ্নিত করতে <i> নাকি <em> ব্যবহার করবেন, এবং কেন?
    ✨ Show Answer (উত্তর দেখুন)

    Answer: <i> is correct — a movie title is text in an "alternate voice" (a proper title), not something being stressed or emphasized for meaning.

    <i> ব্যবহার করাই সঠিক — সিনেমার নাম "ভিন্ন স্বর"-এর টেক্সট (একটি প্রপার টাইটেল), অর্থের জন্য জোর দেওয়া কোনো বিষয় নয়।

  8. Rewrite this incorrect heading order to fix the skipped level: h1 → h2 → h4.
    এই ভুল heading অর্ডারটি ঠিক করুন যেখানে একটি লেভেল বাদ পড়েছে: h1 → h2 → h4।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: It should go h1 → h2 → h3, not straight to h4. If a fourth level of nesting is genuinely needed under the h3, only then does h4 appear.

    এটি h1 → h2 → h3 হওয়া উচিত, সরাসরি h4-এ যাওয়া নয়। h3-এর নিচে সত্যিই আরও একটি নেস্টিং লেভেল দরকার হলে তখনই h4 আসবে।

Summary — Module 03

Headings (h1–h6) build a document outline and must not skip levels. Paragraphs hold running text, with <br> reserved for forced line breaks inside a paragraph. <strong>/<em> carry real meaning, while <b>/<i> are purely visual. Comments document your code without affecting the rendered page.

Heading (h1–h6) একটি ডকুমেন্ট আউটলাইন তৈরি করে এবং লেভেল বাদ দেওয়া উচিত নয়। Paragraph-এ সাধারণ টেক্সট থাকে, আর <br> শুধু paragraph-এর ভেতরে জোরপূর্বক লাইন ব্রেকের জন্য। <strong>/<em> প্রকৃত অর্থ বহন করে, আর <b>/<i> শুধুই দৃশ্যগত। কমেন্ট পেজে না দেখিয়ে কোড ডকুমেন্ট করে রাখে।

Next Module → Links & Navigation — পেজগুলোকে একসাথে সংযুক্ত করা, hypertext-এর "hyper" অংশ।

Previous: Your First HTML Page: Anatomy of a Document Next: Links & Navigation