HTML দিয়ে প্রথম ওয়েব পেজ

১ · ওয়েব পেজ আসলে কী — লেবেল লাগানো একটি টেক্সট ফাইল

আপনি এখন যে পাতাটি পড়ছেন, তার পেছনে আছে একটি সাধারণ টেক্সট ফাইল — Notepad-এ খুললে শুধু অক্ষর দেখা যাবে, কোনো ছবি বা রং নয়। ফাইলটির ভেতরে লেখার প্রতিটি অংশের গায়ে ছোট ছোট লেবেল লাগানো আছে: “এটি শিরোনাম”, “এটি অনুচ্ছেদ”, “এটি তালিকা”। এই লেবেল লাগানোর ভাষাই HTML — HyperText Markup Language. আর লেবেলগুলোর নাম ট্যাগ।

HTML, CSS আর JavaScript — তিন ভাইয়ের তিন কাজ

ওয়েবসাইট, ওয়েব পেজ আর হোম পেজ

• ওয়েব পেজ: একটি HTML ফাইল বা একটি পাতা — যেমন এই পর্বের পাতা।
• ওয়েবসাইট: একই ডোমেইনের অধীনে পরস্পর hyperlink দিয়ে জোড়া অনেক ওয়েব পেজের সংগ্রহ — যেমন পুরো abcltech.com.
• হোম পেজ: ওয়েবসাইটের প্রথম বা মূল পাতা, শুধু ডোমেইন লিখলে যা খোলে; সার্ভারে সাধারণত এর নাম index.html.

পর্ব ৩৪-এ দেখেছেন, যে সাইটের পাতা আগে থেকে তৈরি ফাইল হিসেবে থাকে, তা static; আর যেখানে সার্ভারে কোড চলে প্রতিবার নতুন পাতা বানায়, তা dynamic. মজার কথা, dynamic সাইটও শেষ পর্যন্ত ব্রাউজারে HTML-ই পাঠায় — তাই HTML জানা সব ধরনের ওয়েব কাজের ভিত্তি।

ব্রাউজার কীভাবে লেখা থেকে পাতা বানায়

ছোট্ট একটি ফাইল ধরুন — একটি শিরোনাম আর একটি অনুচ্ছেদ। “পরে” চেপে দেখুন ব্রাউজার ধাপে ধাপে কী করে:

<h1>আমার পাতা</h1>
<p>আমি <b>নুসরাত</b></p>

3C 68 31 3E E0 A6 86 E0 A6 AE …
3C 68 31 3E = < h 1 >   (এক বাইটে এক অক্ষর)
E0 A6 86 = আ   (UTF-8-এ বাংলা অক্ষর তিন বাইট)

শুরু-ট্যাগ   h1
লেখা        "আমার পাতা"
শেষ-ট্যাগ   h1
শুরু-ট্যাগ   p
লেখা        "আমি "
শুরু-ট্যাগ   b
লেখা        "নুসরাত"
শেষ-ট্যাগ   b
শেষ-ট্যাগ   p

html
├─ head
└─ body
   ├─ h1 ─ "আমার পাতা"
   └─ p ─ "আমি "
        └─ b ─ "নুসরাত"

আমার পাতা          ← h1: বড়, মোটা, পুরো লাইন জুড়ে (block)
আমি নুসরাত         ← p: নতুন লাইনে; b: লাইনের ভেতরেই মোটা (inline)

২ · ওয়েব ডিজাইনের ধাপ, সাইটের কাঠামো আর HTML-এর ইতিহাস

বাড়ি বানানোর আগে নকশা লাগে। ওয়েবসাইটও তাই — ওয়েব ডিজাইন মানে শুধু সুন্দর রং নয়, কে, কেন, কী খুঁজতে আসবেন তা ভেবে পাতা সাজানো। ধরুন আপনার স্কুলের বিজ্ঞান ক্লাব একটি সাইট চায়। সাধারণ ধাপগুলো:

1. উদ্দেশ্য ঠিক করা: সাইট কেন? ক্লাবের পরিচিতি, অনুষ্ঠানের খবর, নতুন সদস্য সংগ্রহ।
2. দর্শক চেনা: ছাত্রছাত্রী, অভিভাবক, শিক্ষক — বেশিরভাগই মোবাইলে দেখবেন, তাই ছোট পর্দায় পড়া সহজ হতে হবে।
3. কাঠামো আর navigation: কোন কোন পাতা (হোম, আমাদের কথা, অনুষ্ঠান, যোগাযোগ), আর এক পাতা থেকে আরেক পাতায় যাওয়ার মেনু। কাগজে একটি খসড়া নকশা (wireframe) আঁকুন।
4. ডিজাইন: রং, ফন্ট, ছবি, লোগো — পড়তে আরাম, বাংলা স্পষ্ট।
5. তৈরি (development): HTML দিয়ে কাঠামো, CSS দিয়ে চেহারা, দরকার হলে JavaScript.
6. পরীক্ষা (testing): কয়েকটি ব্রাউজার আর মোবাইলে খোলা, লিংক কাজ করে কি না, validator-এ ভুল নেই তো।
7. প্রকাশ আর রক্ষণাবেক্ষণ: ডোমেইন আর হোস্টিংয়ে তোলা (পর্ব ৩৪), তারপর নিয়মিত নতুন খবর যোগ।

ওয়েবসাইটের কাঠামো — পাতাগুলো কীভাবে জোড়া

৩ · সরঞ্জাম — editor, ফাইল সেভ, ব্রাউজার আর DevTools

HTML লিখতে দামি সফটওয়্যার লাগে না। লাগে একটি text editor আর একটি ব্রাউজার — দুটোই আপনার কম্পিউটারে আছে।

• Notepad (Windows): সবচেয়ে সরল। শেখার শুরুতে ভালো, কারণ সব নিজে লিখতে হয়।
• VS Code: বিনা খরচের পেশাদার editor — রঙিন কোড, ট্যাগ আপনাআপনি বন্ধ হওয়া, ভুলের ইঙ্গিত। খালি .html ফাইলে ! লিখে Tab চাপলে পুরো কঙ্কাল লেখা হয়ে যায়।
• Word নয়: Word বা Google Docs লেখার সাথে নিজের লুকানো ফরম্যাটিং যোগ করে; HTML লিখতে চাই একদম সাদামাটা টেক্সট। Word-এর মতো WYSIWYG ওয়েব-নির্মাতাও আছে, কিন্তু শেখার জন্য নিজের হাতে ট্যাগ লেখাই ভালো।

প্রথম ফাইল সেভ করা — তিনটি সাবধানতা

1. এক্সটেনশন .html: নাম দিন index.html (বা .htm — দুটোই চলে)। Notepad-এর Save as-এ “Save as type” থেকে “All files” বাছুন, নইলে নাম হয়ে যেতে পারে index.html.txt. Windows ফাইলের extension লুকিয়ে রাখে বলে এই ভুল চোখে পড়ে না — File Explorer-এ extension দেখানো চালু করুন (পর্ব ০৬)।
2. Encoding UTF-8: Save-এর সময় Encoding-এ UTF-8 আছে কি না দেখুন (Windows 11-এর Notepad-এ এটিই ডিফল্ট)। বাংলা লেখার জন্য এটি জরুরি।
3. ফাইলের নাম: ছোট হাতের ইংরেজি, ফাঁকা জায়গার বদলে হাইফেন — about-us.html. সার্ভারে About.html আর about.html আলাদা ফাইল হতে পারে।

খোলা, দেখা, ভেতরে উঁকি দেওয়া

• খোলা: ফাইলে ডাবল-ক্লিক করলে ব্রাউজারে খোলে; ঠিকানার ঘরে file:/// দেখবেন — মানে ইন্টারনেট নয়, নিজের ডিস্ক থেকে। editor-এ বদলে সেভ করে ব্রাউজারে F5 চাপলেই নতুন রূপ।
• View source (Ctrl+U): যেকোনো ওয়েবসাইটের পাঠানো আসল HTML লেখা দেখায়। এই পাতাতেও চেষ্টা করুন।
• DevTools (F12): Elements প্যানেলে দেখায় ব্রাউজারের বানানো DOM tree — parse করার পর, ভুল মেরামতের পর। কোনো element-এর ওপর মাউস রাখলে পাতায় তার বাক্সটি রঙিন হয়। View source = ফাইলে যা লেখা; DevTools = ব্রাউজার যা বুঝেছে। দুটোর পার্থক্যই অনেক সময় ভুল ধরিয়ে দেয়।

৪ · ট্যাগ, element আর attribute — HTML-এর ব্যাকরণ

একটি অনুচ্ছেদ খুঁটিয়ে দেখি:

<p class="note">আজ ক্লাবের সভা।</p>

শুরুর ট্যাগ, বিষয়বস্তু আর শেষের ট্যাগ মিলে পুরোটাকে বলে একটি element. দৈনন্দিন কথায় “ট্যাগ” আর “element” মিশিয়ে বলা হয়, কিন্তু পরীক্ষায় পার্থক্যটি জানতে হয়: ট্যাগ হলো চিহ্ন, element হলো চিহ্নসহ পুরো অংশ। একটি element-এ একাধিক attribute থাকতে পারে, ফাঁকা জায়গা দিয়ে আলাদা করে: <ol type="A" start="3">. প্রায় সব element-এ চলে এমন কয়েকটি attribute: id (পাতায় অনন্য নাম), class (দলের নাম, CSS-এ কাজে লাগে), style, title (মাউস রাখলে ছোট বার্তা), lang.

Paired ট্যাগ আর empty ট্যাগ

পুরোনো বই বা XHTML-এ <br /> লেখা দেখবেন — শেষে স্ল্যাশ। HTML5-এ স্ল্যাশ দেওয়া বা না দেওয়া দুটোই বৈধ, কিন্তু </br> বা <br></br> ভুল।

Nesting, বড়-ছোট হাতের অক্ষর আর comment

• Nesting: এক element-এর ভেতরে আরেকটি রাখা যায়। নিয়ম একটাই — যেটি পরে খুলেছেন, সেটি আগে বন্ধ করুন। টিফিন ক্যারিয়ারের বাটির মতো: ভেতরের বাটি বাইরে না এনে বাইরেরটি বের করা যায় না। ঠিক: <b><i>…</i></b>; ভুল: <b><i>…</b></i>.
• Case-insensitive: ট্যাগ আর attribute-এর নাম বড় বা ছোট হাতের — <P> আর <p> একই। পুরোনো বইয়ে বড় হাতের ট্যাগ দেখবেন; এখনকার প্রচলন ছোট হাতের। তবে attribute-এর মান (যেমন id) বড়-ছোট আলাদা ধরতে পারে।
• ফাঁকা জায়গা গলে যায়: লেখায় দশটি space বা পাঁচটি Enter দিলেও ব্রাউজার একটি space-ই দেখায়। নতুন লাইনের জন্য তাই ট্যাগ লাগে।
• Comment: <!-- এটি পাতায় দেখা যাবে না --> — নিজের বা সহকর্মীর জন্য নোট। তবে view source-এ সবাই দেখতে পায়, তাই পাসওয়ার্ড বা গোপন কথা কখনো নয়।

ভুল nesting-এ ব্রাউজার আসলে কী করে? নিচে “পরে” চাপুন — ব্রাউজার খোলা ট্যাগগুলো একটি স্তূপে (stack) মনে রাখে:

৫ · একটি HTML ডকুমেন্টের কাঠামো — আর বাংলা লেখা

প্রতিটি পূর্ণ HTML পাতার একটি নির্দিষ্ট কঙ্কাল থাকে। নিচে নুসরাতের পরিচিতি-পাতার পুরো ফাইল — অংশ ৭-এ আমরা এটি ধাপে ধাপে বানাব:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>নুসরাত জাহান — পরিচিতি</title>
</head>
<body>
  <header>
    <h1>নুসরাত জাহান</h1>
    <p>রাজশাহী · বিজ্ঞান ক্লাবের সদস্য</p>
  </header>
  <main>
    <section>
      <h2>আমার সম্পর্কে</h2>
      <p>আমি <strong>কম্পিউটার</strong> আর <em>গণিত</em> ভালোবাসি।<br>
      প্রিয় সূত্র: a<sup>2</sup> + b<sup>2</sup></p>
    </section>
    <section>
      <h2>দক্ষতা</h2>
      <ul>
        <li>বাংলা ও ইংরেজি টাইপিং</li>
        <li>HTML <mark>শিখছি</mark></li>
      </ul>
    </section>
    <section>
      <h2>এ বছরের লক্ষ্য</h2>
      <ol>
        <li>নিজের ওয়েবসাইট বানানো</li>
        <li>ক্লাবের জন্য একটি পাতা</li>
        <li>C প্রোগ্রামিং শুরু করা</li>
      </ol>
    </section>
  </main>
  <footer>
    <p><small>&copy; ২০২৬ নুসরাত জাহান</small></p>
  </footer>
</body>
</html>

বাংলা লেখা কেন ভেঙে যায়

বাংলা অক্ষর কম্পিউটারে Unicode নম্বর হিসেবে থাকে, আর ফাইলে সেই নম্বর লেখা হয় UTF-8 নিয়মে (পর্ব ০৭ আর ১৮)। ফাইল UTF-8-এ সেভ হলো, কিন্তু <meta charset="UTF-8"> নেই — তখন ব্রাউজার অনুমান করে, আর ভুল অনুমানে “আমার” হয়ে যায় আমার ধরনের হিজিবিজি। একে বলে mojibake. সমাধান দুটি একসাথে: ফাইল UTF-8-এ সেভ, আর head-এ charset ঘোষণা।

দ্বিতীয় বিষয় ফন্ট। দর্শকের কম্পিউটারে বাংলা ইউনিকোড ফন্ট (যেমন Windows-এর Nirmala UI বা Vrinda, অথবা SolaimanLipi, Kalpurush) থাকলে লেখা দেখা যাবে; যুক্তাক্ষর ঠিক দেখাতে ভালো ফন্ট লাগে। নিশ্চিত হতে ওয়েবসাইটগুলো Google Fonts-এর মতো জায়গা থেকে ওয়েব-ফন্ট লোড করে — এই পাতা যেমন Anek Bangla ব্যবহার করছে। আর মনে রাখুন, বিজয়ের পুরোনো ANSI ফন্টে লেখা বাংলা কপি করে ওয়েবে বসালে ইংরেজি হিজিবিজি দেখাবে — ওয়েবে সবসময় Unicode বাংলা (পর্ব ০৭)।

৬ · লেখা সাজানো — heading, অনুচ্ছেদ, formatting আর entity

Heading — ছয় স্তরের শিরোনাম

Heading ট্যাগ ছয়টি: <h1> থেকে <h6>. h1 সবচেয়ে গুরুত্বপূর্ণ আর ডিফল্টে সবচেয়ে বড়, h6 সবচেয়ে ছোট। বইয়ের মতো ভাবুন — h1 বইয়ের নাম, h2 অধ্যায়, h3 অধ্যায়ের ভেতরের অংশ।

• একটি h1: প্রতিটি পাতায় সাধারণত একটিই h1 — পাতাটি কী নিয়ে।
• স্তর লাফাবেন না: h2-এর পরে সরাসরি h4 নয়। screen reader ব্যবহারকারী heading-এর তালিকা দেখে পাতায় চলাফেরা করেন; সিঁড়ির ধাপ ভাঙলে তাঁরা হারিয়ে যান।
• আকারের জন্য heading নয়: লেখা বড় দেখাতে চাইলে CSS; heading মানে “এটি একটি অংশের শিরোনাম”।

অনুচ্ছেদ, লাইন ভাঙা আর আড়াআড়ি দাগ

• <p>: একটি অনুচ্ছেদ। ব্রাউজার আগে-পরে ফাঁকা জায়গা রাখে।
• <br>: একই অনুচ্ছেদের ভেতরে শুধু নতুন লাইন — কবিতার চরণ বা ঠিকানার লাইনের জন্য। ফাঁকা জায়গা বানাতে পরপর অনেক <br> দেওয়া ভালো অভ্যাস নয়; সে কাজ CSS-এর।
• <hr>: আড়াআড়ি একটি দাগ — HTML5-এ এর মানে বিষয়ের পালাবদল, যেমন গল্পে দৃশ্য বদল।

Formatting ট্যাগ — চেহারা নয়, অর্থ

b আর strong দেখতে একই, তবু আলাদা কেন? কারণ HTML-এর মূল কাজ অর্থ জানানো। strong বলে “এটি গুরুত্বপূর্ণ” — যন্ত্র এই মানে পড়তে পারে; b শুধু বলে “আলাদা করে দেখাও”। পুরোনো বইয়ে <font> আর <center> দেখবেন — HTML5-এ এগুলো বাতিল, চেহারার কাজ CSS-এর।

pre আর code

<code> বলে “এটি কম্পিউটারের কোড” — সাধারণত monospace ফন্টে দেখায়। <pre> (preformatted) এর ভেতরে লেখার space আর লাইন-ভাঙা যেমন লিখেছেন, ঠিক তেমন থাকে — গলে যায় না। কোডের টুকরো বা ASCII নকশা দেখাতে দুটো একসাথে: <pre><code>…</code></pre>.

বিশেষ চিহ্ন — entity

পাতায় যদি লিখতে চান “অনুচ্ছেদের ট্যাগ <p>” — সমস্যা! ব্রাউজার <p> দেখে ভাববে নতুন অনুচ্ছেদ। তাই এমন চিহ্ন লিখতে হয় entity দিয়ে: & দিয়ে শুরু, ; দিয়ে শেষ।

এবার সব একসাথে চালিয়ে দেখুন। নিচের HTML-টি একটি ছোট পাতা হিসেবে আঁকা হবে, আর ছোট একটি স্ক্রিপ্ট প্রতিটি অনুচ্ছেদ থেকে ব্রাউজার আসলে কী লেখা দেখাচ্ছে তা পড়ে জানাবে:

<p id="water">পানি H<sub>2</sub>O, সালফিউরিক অ্যাসিড H<sub>2</sub>SO<sub>4</sub></p>
<p id="math">x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
<p id="tag">অনুচ্ছেদের ট্যাগ: &lt;p&gt; … &lt;/p&gt;</p>
<p id="sign">&copy; ২০২৬ · দাম &#x9F3;৫০ · চা &amp; বিস্কুট</p>
<p id="space">১০&nbsp;কেজি চাল আর ডাল</p>
<p id="bad"><b><i>সাবধান</b></i> — ভুল nesting</p>

// প্রতিটি অনুচ্ছেদের লেখা (textContent) পড়ি — nbsp-কে চিহ্নিত করে
for (const p of document.querySelectorAll('p')) {
  const shown = p.textContent.replace(/\u00a0/g, '[nbsp]');
  console.log(p.id.padEnd(5), '|', shown);
}
const n = (sel) => document.querySelectorAll(sel).length;
console.log('sub:', n('sub'), '| sup:', n('sup'));
console.log('bad, as stored in the DOM:', document.getElementById('bad').innerHTML);

৭ · তালিকা — আর ধাপে ধাপে একটি পরিচিতি-পাতা

HTML-এ তিন ধরনের তালিকা আছে। প্রতিটি তালিকার ভেতরের প্রতিটি আইটেম <li> (list item) — তবে description list-এ আলাদা নিয়ম।

<ol>-এর দুটি দরকারি attribute: type — 1 (১, ২, ৩ — ডিফল্ট), A (A, B, C), a (a, b, c), I (I, II, III), i (i, ii, iii); আর start — কত থেকে গোনা শুরু। <ol type="I" start="4"> লিখলে প্রথম আইটেম হবে IV. reversed দিলে উল্টো গোনে। আর তালিকার ভেতরে তালিকা (nested list) রাখতে হয় একটি <li>-এর ভেতরে:

<ol type="A">
  <li>বিজ্ঞান মেলা
    <ul>
      <li>রোবট প্রদর্শনী</li>
      <li>সৌরবিদ্যুতের মডেল</li>
    </ul>
  </li>
  <li>গণিত অলিম্পিয়াড প্রস্তুতি</li>
</ol>

<dl>
  <dt>CPU</dt>
  <dd>কম্পিউটারের হিসাব আর নির্দেশ চালানোর অংশ</dd>
</dl>

এখানে A আর B অক্ষরে দুটি আইটেম, প্রথমটির নিচে বুলেটসহ দুটি উপ-আইটেম। সাধারণ ভুল: <ul>-কে </li>-এর পরে, সরাসরি <ol>-এর ভেতরে রাখা — ol আর ul-এর সরাসরি সন্তান শুধু li হতে পারে।

বানিয়ে ফেলুন — নুসরাতের পরিচিতি-পাতা

রাজশাহীর নুসরাত বিজ্ঞান ক্লাবের সদস্য। সে নিজের একটি পাতা বানাবে। “পরে” চাপুন — প্রতি ধাপে যা যোগ হলো তা উজ্জ্বল:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>নুসরাত জাহান — পরিচিতি</title>
</head>
<body>
</body>
</html>

<h1>নুসরাত জাহান</h1>
<h2>আমার সম্পর্কে</h2>
<h2>দক্ষতা</h2>
<h2>এ বছরের লক্ষ্য</h2>

<h1>নুসরাত জাহান</h1>
<p>রাজশাহী · বিজ্ঞান ক্লাবের সদস্য</p>
<h2>আমার সম্পর্কে</h2>
<p>আমি কম্পিউটার আর গণিত ভালোবাসি।<br>
প্রিয় সূত্র: a2 + b2</p>
…

<h2>দক্ষতা</h2>
<ul>
  <li>বাংলা ও ইংরেজি টাইপিং</li>
  <li>HTML শিখছি</li>
</ul>
<h2>এ বছরের লক্ষ্য</h2>
<ol>
  <li>নিজের ওয়েবসাইট বানানো</li> …
</ol>

<p>আমি <strong>কম্পিউটার</strong> আর <em>গণিত</em> ভালোবাসি।<br>
প্রিয় সূত্র: a<sup>2</sup> + b<sup>2</sup></p>
<li>HTML <mark>শিখছি</mark></li>
<p><small>&copy; ২০২৬ নুসরাত জাহান</small></p>

<header> h1 + পরিচয়ের p </header>
<main>
  <section> আমার সম্পর্কে … </section>
  <section> দক্ষতা … </section>
  <section> এ বছরের লক্ষ্য … </section>
</main>
<footer> কপিরাইট </footer>

নিজে চালিয়ে দেখুন — পাতাটি আঁকা আর গোনা

নিচে নুসরাতের পাতার body অংশ (অংশ ৫-এর ফাইলের body-র ভেতরের লেখা) ব্রাউজারে আঁকা হবে; প্রিভিউতে জায়গা বাঁচাতে লেখা সামান্য ছোট করা। স্ক্রিপ্টটি গুনে বলবে কোন ধরনের element কয়টি — DOM tree থেকে:

// DOM tree থেকে element গোনা — CSS selector দিয়ে খুঁজি
const count = (sel) => document.querySelectorAll(sel).length;
console.log('h1:', count('h1'), '| all headings h1-h6:', count('h1,h2,h3,h4,h5,h6'));
console.log('paragraphs <p>:', count('p'), '| line breaks <br>:', count('br'));
console.log('lists ul/ol:', count('ul,ol'), '| list items <li>:', count('li'));
console.log('formatting tags:', count('strong,em,mark,sup,sub,small'));
console.log('semantic blocks:', count('header,nav,main,section,article,footer'));
const outline = [...document.querySelectorAll('h1,h2')].map((h) => h.tagName + ' ' + h.textContent);
console.log(outline.join('\n'));

৮ · CSS-এর এক ঝলক, semantic HTML, validator আর সাধারণ ভুল

চেহারা বদলানো — style attribute থেকে আলাদা CSS ফাইল

যেকোনো element-এ style attribute দিয়ে সরাসরি চেহারা বলা যায় — একে বলে inline style:

<h1 style="color: darkgreen; text-align: center;">বিজ্ঞান ক্লাব</h1>
<p style="font-size: 18px;">প্রতি বৃহস্পতিবার বিকেল ৪টায় সভা।</p>

color লেখার রং, font-size আকার, text-align বাঁ-ডান-মাঝে বসানো। কিন্তু পঞ্চাশ পাতার সাইটে প্রতিটি h1-এ একই style লেখা ঝামেলার — রং বদলাতে পঞ্চাশ জায়গায় হাত দিতে হবে। তাই পেশাদার সাইটে চেহারার নিয়ম থাকে আলাদা একটি .css ফাইলে, যা head-এ <link rel="stylesheet" href="style.css"> দিয়ে যুক্ত হয় — এক ফাইল বদলালে পুরো সাইট বদলায়। এই কারণেই বলা হয় “HTML-এ অর্থ, CSS-এ চেহারা”।

Semantic HTML — অংশের নাম দিয়ে পাতা সাজানো

আগে পাতা সাজানো হতো শুধু অর্থহীন <div> বাক্স দিয়ে। HTML5 দিয়েছে অর্থবহ ট্যাগ — semantic HTML:

দেখতে <div> আর <section>-এ কোনো পার্থক্য নেই। লাভটা যন্ত্রের। Screen reader — দৃষ্টিপ্রতিবন্ধী মানুষ যে সফটওয়্যারে পাতা শুনে পড়েন — এক চাপে “মূল অংশে যাও” বা “পরের heading”-এ যেতে দেয়; semantic ট্যাগ আর ঠিক heading না থাকলে তাঁদের পুরো পাতা শুরু থেকে শুনতে হয়। একে বলে accessibility. সার্চ ইঞ্জিনও কাঠামো দেখে বোঝে কোনটি মূল লেখা, কোনটি মেনু — যা SEO-তে সাহায্য করে। পর্ব ৩৭-এ ছবির alt text দিয়ে এই আলোচনা আরও এগোবে।

যাচাই করুন — W3C validator

ব্রাউজার ভুল ক্ষমা করে, তাই ভুল চোখে পড়ে না। HTML validator সেই ভুল খুঁজে দেয়। validator.w3.org খুলে “Validate by File Upload” বা “Validate by Direct Input” বেছে ফাইল দিন — প্রতিটি ভুলের লাইন নম্বর আর কারণ দেখাবে, যেমন “End tag b violates nesting rules”. লাল Error আগে ঠিক করুন, তারপর Warning পড়ুন।

নতুনদের সাধারণ ভুল

৯ · AI-এর যুগে — সেকেন্ডে HTML, কিন্তু বুঝে নেওয়ার দায় আপনার

AI চ্যাটবটকে “আমার একটি পরিচিতি-পাতা বানিয়ে দাও” বললে কয়েক সেকেন্ডে পুরো HTML পেয়ে যাবেন — প্রায়ই চলনসইও। তবু চারটি জায়গায় চোখ রাখুন। এক, বৈধতা: AI মাঝে মাঝে বন্ধ না করা ট্যাগ, বাতিল ট্যাগ (<center>, <font>) বা পুরোনো ধাঁচের কোড দেয়। দুই, semantics: সব কিছু <div> দিয়ে মুড়ে দেয়, বা লেখা বড় করতে heading ব্যবহার করে। তিন, accessibility: একাধিক h1, স্তর লাফানো heading, ছবিতে alt না থাকা, lang না থাকা। চার, বোঝা: যে ট্যাগ আপনি বোঝেন না, তা আপনার পাতায় থাকলে ভুল হলে ঠিকও করতে পারবেন না। AI-এর বানানো তথ্যও (hallucination) — যেমন বানানো পুরস্কার বা ঠিকানা — মুছে দিন।

AI-এর লেখা HTML — যাচাইয়ের চেকলিস্ট

• validator.w3.org-এ চালিয়েছি — কোনো Error নেই
• DOCTYPE, lang="bn", meta charset="UTF-8" আর অর্থবহ title আছে; ব্রাউজারে বাংলা ঠিক দেখাচ্ছে
• একটি h1, heading-এর স্তর লাফায়নি; DevTools-এ DOM আর আমার লেখা কাঠামো একই
• div-এর বদলে যেখানে মানায় header, nav, main, section, footer; ছবি থাকলে প্রতিটিতে alt
• পাতার প্রতিটি ট্যাগ কী করে, নিজের ভাষায় বলতে পারি; AI-এর বানানো কোনো তথ্য রাখিনি