প্রথম HTML পেজ — element, tag, attribute আর ডকুমেন্টের গঠন

১ · HTML আসলে কী — লেখার গায়ে লেবেল

পর্ব ১-এ দেখেছেন, ব্রাউজার সার্ভার থেকে একটি ফাইল আনে, তারপর সেটি পর্দায় সাজিয়ে দেখায়। সেই ফাইলটি আসলে একটি সাধারণ টেক্সট ফাইল — Notepad-এও খোলা যায়। তাহলে ব্রাউজার বোঝে কীভাবে, কোন লাইনটি শিরোনাম, কোনটি অনুচ্ছেদ, আর কোনটি একটি লিংক?

উত্তর হলো markup — লেখার গায়ে ছোট ছোট চিহ্ন বসিয়ে বলে দেওয়া, কোন অংশ কী। HTML-এর পুরো নাম HyperText Markup Language. “HyperText” মানে এমন লেখা, যেখান থেকে লিংক ধরে অন্য লেখায় যাওয়া যায়; আর “Markup Language” মানে চিহ্ন বসানোর ভাষা।

একটি গুরুত্বপূর্ণ কথা শুরুতেই মনে রাখুন: HTML প্রোগ্রামিং ভাষা নয়। এতে যোগ-বিয়োগ, শর্ত (if) বা লুপ নেই। এটি একটি বর্ণনার ভাষা — “এটি শিরোনাম, এটি তালিকা, এটি ছবি।” এজন্যই HTML শেখা সহজ; কিন্তু ঠিকভাবে লেখা, যাতে ব্রাউজার, সার্চ ইঞ্জিন আর screen reader সবাই সঠিক অর্থ বোঝে — সেটিই আসল দক্ষতা।

২ · Element, tag আর attribute — একটি element-এর ব্যবচ্ছেদ

দৈনন্দিন কথায় অনেকে “tag” আর “element” মিশিয়ে বলেন। কাজ চলে যায়, কিন্তু পরীক্ষা, ইন্টারভিউ আর পেশাদার আলোচনায় পার্থক্যটি জানা জরুরি। নিচে দোকানের একটি লিংক ধাপে ধাপে ভেঙে দেখুন — “পরে” চাপুন:

Void element — যাদের ভেতরে কিছু রাখার নেই

কিছু element-এর content থাকতেই পারে না — যেমন লাইন ভাঙা বা একটি ছবি। এদের বলে void element. এদের শুধু start tag থাকে; end tag লেখা নিষেধ। HTML-এ এ রকম element মোট ১৩টি:

</br> বা <img></img> লেখা ভুল। নতুনরা যে আরেকটি নাম শোনেন — “empty tag” বা “single tag” — সেটি void element-এরই পুরোনো ডাকনাম। একটি element-এর অংশগুলোর পরিচয় শেষ; এবার দেখি element-গুলো একে অপরের সাথে কীভাবে জোড়া লাগে।

৩ · Nesting আর tree — parent, child, sibling

এক element-এর ভেতরে আরেকটি রাখাকে বলে nesting. যেমন একটি অনুচ্ছেদের ভেতরে একটি শব্দকে মোটা করা: <p>আজ <strong>হরতাল নেই</strong>, দোকান খোলা।</p>. নিয়ম একটাই, কিন্তু কঠোর — যেটি পরে খুলেছেন, সেটি আগে বন্ধ করবেন।

এই বাটির ভেতরে বাটি সাজানো থেকেই তৈরি হয় একটি গাছ বা tree. ব্রাউজার HTML পড়ে মেমরিতে যে tree বানায়, তার নাম DOM (Document Object Model). Tree-এর প্রতিটি অংশকে বলে node — element node, লেখার (text) node, comment node. পরিবারের সম্পর্কের নামেই এদের সম্পর্ক বোঝানো হয়। নিচে একটি ছোট পাতার tree ধাপে ধাপে দেখুন:

খেয়াল করুন, আপনি যে ফাইল লেখেন (source) আর ব্রাউজার যে tree বানায় (DOM) — দুটো আলাদা জিনিস। ব্রাউজারে Ctrl+U চাপলে দেখা যায় source — আপনার হুবহু লেখা। আর DevTools-এর Elements প্যানেলে (পর্ব ২) দেখা যায় DOM — ব্রাউজার যা বুঝেছে। লেখা ঠিক থাকলে দুটো প্রায় এক; ভুল থাকলে পার্থক্য চোখে পড়ে — অংশ ৬-এ নিজেই দেখবেন।

৪ · একটি পূর্ণ HTML ডকুমেন্টের কঙ্কাল

এবার একটি সম্পূর্ণ, বৈধ পাতা লিখি। বাড়ি বানানোর আগে যেমন ভিত, পিলার আর ছাদের কাঠামো লাগে, তেমনি প্রতিটি HTML পাতার একই কঙ্কাল থাকে। নিচের এডিটরটি লাইভ — কোড বদলালেই সাথের প্রিভিউ বদলে যাবে।

<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>রহিমের চায়ের দোকান</title>
</head>
<body>
  <h1>রহিমের চায়ের দোকান</h1>
  <p>দুধ চা ১৫ টাকা, লাল চা ১০ টাকা।</p>
  <!-- সময়সূচি পরে বদলাতে পারে -->
  <p>সকাল ৭টা থেকে রাত ১১টা পর্যন্ত খোলা।</p>
</body>
</html>

প্রতিটি লাইন কেন আছে, এক এক করে দেখি:

head আর body — দোকানের পেছনের খাতা আর সামনের তাক

<meta charset="utf-8"> লাইনটি head-এর একদম শুরুতে রাখুন — নিয়ম অনুযায়ী এটি ফাইলের প্রথম ১০২৪ বাইটের মধ্যে থাকতে হয়, কারণ ব্রাউজার এটুকু পড়েই ঠিক করে বাকি অক্ষরগুলো কীভাবে পড়বে। আর বাংলা পাতার জন্য UTF-8 ছাড়া অন্য কিছু ভাবার দরকার নেই; আধুনিক নিয়মে নতুন পাতার encoding হতেই হবে UTF-8. বাংলা অক্ষর কম্পিউটারে কীভাবে জমা থাকে, তা জানতে চাইলে আমাদের বাংলা টাইপিং ও Unicode পর্ব দেখুন; ওয়েবে বাংলার খুঁটিনাটি আসবে পর্ব ১৪-তে।

Viewport meta ছাড়া ফোনের ব্রাউজার ধরে নেয় পাতাটি ডেস্কটপের জন্য বানানো — প্রায় ৯৮০ পিক্সেল চওড়া — তারপর পুরোটা ছোট করে পর্দায় ঢোকায়, লেখা পড়তে হয় চিমটি দিয়ে বড় করে। width=device-width বলে “ফোনের আসল চওড়াই পাতার চওড়া”। এখানে এটুকু জানলেই চলবে; head-এর বাকি meta আর SEO পর্ব ১৩-তে, আর viewport-এর পূর্ণ গল্প পর্ব ৩০-এ (রেসপন্সিভ ডিজাইন)।

৫ · Doctype আর quirks mode — পুরোনো ওয়েবের উত্তরাধিকার

প্রথম লাইনটি দেখতে সবচেয়ে অদ্ভুত — এটি কোনো element নয়, এর end tag নেই, পাতায় কিছু দেখায়ও না। তাহলে এটি আছে কেন? উত্তর লুকিয়ে আছে ১৯৯০-এর দশকের শেষে, “ব্রাউজার যুদ্ধের” সময়ে।

তখন Netscape আর Internet Explorer যে যার মতো নিয়মে পাতা আঁকত, আর লাখো ওয়েবসাইট সেই ভুলভাল নিয়মের ওপর ভর করে বানানো হয়েছিল। পরে CSS-এর সঠিক নিয়ম চালু করতে গিয়ে ব্রাউজার-নির্মাতারা বিপদে পড়লেন — সঠিক নিয়মে আঁকলে পুরোনো সাইটগুলো ভেঙে যায়। সমাধান: doctype দেখে আচরণ বেছে নেওয়া। পাতার শুরুতে আধুনিক doctype থাকলে standards mode (সঠিক নিয়ম); না থাকলে বা পুরোনো ধাঁচের হলে quirks mode — পুরোনো ব্রাউজারের “খামখেয়ালি” (quirk) নকল করা।

নিচের পাতাটি নিজেই বলে দেয় সে কোন mode-এ চলছে। প্রথম লাইনটি (<!doctype html>) মুছে দিয়ে দেখুন কী হয়:

<!doctype html>
<html lang="bn">
<head>
  <meta charset="utf-8">
  <title>Mode পরীক্ষা</title>
</head>
<body>
  <div style="font-size: 28px">
    <p>বড় লেখা — div থেকে পাওয়া</p>
    <table><tr><td>টেবিলের লেখা</td></tr></table>
  </div>
  <p>এই পাতা চলছে: <b id="mode">?</b></p>
  <script>
    const mode = document.compatMode;
    document.getElementById('mode').textContent =
      mode === 'CSS1Compat' ? 'standards mode' : 'quirks mode';
    console.log('document.compatMode = ' + mode);
  </script>
</body>
</html>

HTML5-এর আগে doctype ছিল দীর্ঘ, মুখস্থ করা কঠিন — যেমন <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. HTML5-এর নকশাকারীরা খুঁজে বের করলেন সবচেয়ে ছোট কোন লেখাটি সব ব্রাউজারকে standards mode-এ নিয়ে যায়: <!doctype html>. ব্যস, এটুকুই। এর কোনো version নেই, আর কখনো বদলাবে না।

৬ · ব্রাউজার ভুল ক্ষমা করে — parser কীভাবে মেরামত করে

C বা Java-তে একটি সেমিকোলন বাদ পড়লে compiler পুরো প্রোগ্রাম বাতিল করে দেয়। HTML-এ ব্যাপারটা একদম উল্টো — আপনি যত ভুলই করুন, ব্রাউজার কিছু একটা দেখাবেই। কারণ ওয়েবের শুরু থেকেই নীতি ছিল: পাঠকের সামনে খালি পর্দা নয়, যতটুকু সম্ভব পাতা দেখাও।

HTML ফাইল পড়ে tree বানানোর কাজটি করে ব্রাউজারের parser. সে লেখা পড়ে টুকরো টুকরো করে (কোনটি start tag, কোনটি লেখা), আর একটি “খোলা element-এর স্তূপ” মনে রাখে — শেষ যেটি খুলেছে, সেটি সবার ওপরে। মজার ব্যাপার, অনেক tag লেখা ঐচ্ছিক — parser নিজেই বুঝে নেয় কোথায় সেগুলো থাকার কথা। এদের বলে optional tag. নিচের চার লাইনের “পাতা”-তে <html>, <head>, <body> কোনোটাই নেই, </p>-ও নেই। Parser কী করে, দেখুন:

1<!doctype html>2<title>রহিমের দোকান</title>3<p>চাল ৬০ টাকা4<p>ডাল ১১০ টাকা5

উপরের মেরামতগুলো সব নিয়মসিদ্ধ। কিন্তু সত্যিকারের ভুল হলে কী হয়? নিচের কোডে চারটি ভুল ইচ্ছা করে রাখা আছে — বন্ধ না করা p, ভুল ক্রমে বন্ধ করা b-i, অনুচ্ছেদের ভেতরে div, আর বন্ধ না করা li. সাথের ছোট script-টি ব্রাউজারের বানানো DOM tree ছাপিয়ে দেখায়:

<div id="demo">
<p>প্রথম অনুচ্ছেদ
<p>দ্বিতীয় — আগেরটি বন্ধ করিনি
<p><b>মোটা <i>মোটা-বাঁকা</b> শুধু বাঁকা?</i></p>
<p>লেখার মাঝে <div>একটি div</div> বাকি লেখা</p>
<ul><li>চাল<li>ডাল</ul>
</div>
<script>
  // DOM tree ছাপাই: element হলে <নাম>, লেখা হলে "লেখা"
  function show(node, pad) {
    for (const c of node.childNodes) {
      if (c.nodeType === 1) {
        console.log(pad + '<' + c.localName + '>');
        show(c, pad + '  ');
      } else if (c.nodeType === 3 && c.data.trim()) {
        console.log(pad + '"' + c.data.trim() + '"');
      }
    }
  }
  show(document.getElementById('demo'), '');
</script>

৭ · লেখার আদবকায়দা — whitespace, comment, অক্ষরের হাত আর quote

Whitespace গলে যায়

পরীক্ষার খাতায় যেমন যত জোরে কলম চাপুন, শব্দের মাঝের ফাঁক দিয়ে নম্বর বাড়ে না — HTML-এও লেখার মাঝে দশটি space বা পাঁচবার Enter দিলে ব্রাউজার দেখায় মাত্র একটি space. একে বলে whitespace collapsing. Space, Tab আর নতুন লাইন — সবই “whitespace”; পাশাপাশি অনেকগুলো থাকলে মিলে একটি হয়ে যায়, আর লাইনের শুরু-শেষের ফাঁকা অংশ মুছে যায়। নিচে নিজেই দেখুন:

<p>রহিম      চাচার
        চায়ের


   দোকান</p>

<pre>রহিম      চাচার
        চায়ের
   দোকান</pre>

<p>দাম:&nbsp;&nbsp;&nbsp;১০&nbsp;টাকা</p>

<p><b>চা</b><b>কফি</b> বনাম <b>চা</b> <b>কফি</b></p>

এর মানে: পাতায় ফাঁকা জায়গা বা লাইন-বিরতি আনতে space বা Enter নয়, সঠিক element ব্যবহার করুন — নতুন অনুচ্ছেদের জন্য <p>, কবিতা বা ঠিকানার লাইনের জন্য <br>, আর দূরত্বের জন্য CSS (পর্ব ১৯-এ margin, padding). পাশাপাশি সাজানো element-এর মাঝের whitespace কখনো কখনো অপ্রত্যাশিত ফাঁক তৈরি করে — সেই রহস্যের সমাধান পর্ব ২৩-এ।

Comment — নিজের জন্য নোট

<!-- এখানে নোট --> হলো comment. ব্রাউজার এটি দেখায় না, কিন্তু DOM-এ একটি comment node হিসেবে থেকে যায়, আর Ctrl+U চাপলে যে কেউ পড়তে পারে। তাই পাসওয়ার্ড, গোপন দাম বা কারও সম্পর্কে মন্তব্য comment-এ কখনো নয়। Comment-এর ভেতরে comment রাখা যায় না — প্রথম --> পেলেই comment শেষ।

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

• Tag আর attribute-এর নাম case-insensitive: <P CLASS="x"> আর <p class="x"> ব্রাউজারের কাছে একই। পুরোনো বইয়ে বড় হাতের tag দেখবেন; আজকের প্রচলন সবই ছোট হাতে।
• কিন্তু attribute-এর মান প্রায়ই case-sensitive: id="offer" আর id="Offer" দুটি আলাদা id. Class-এর নামও তাই। ফাইলের নামও — Windows-এ Logo.png আর logo.png একই হলেও Linux সার্ভারে আলাদা, আর বেশিরভাগ হোস্টিং চলে Linux-এ।
• Quote: মান লেখা যায় ডাবল quote-এ (class="price"), সিঙ্গেল quote-এ (class='price'), এমনকি quote ছাড়াও (class=price) — শেষেরটি শুধু তখন, যখন মানে space, quote, =, <, > বা backtick নেই। প্রচলন: সবসময় ডাবল quote. class=price new লিখলে ব্রাউজার বুঝবে class হলো শুধু price, আর new একটি আলাদা (অর্থহীন) attribute.
• Boolean attribute: কিছু attribute-এর মান লাগে না — থাকলেই “হ্যাঁ”। যেমন hidden, disabled, required. সাবধান: hidden="false" লিখলেও element লুকানোই থাকে! নিচের অংশে নিজেই দেখবেন।

৮ · Global attribute — id, class, title, lang আর hidden

বেশিরভাগ attribute নির্দিষ্ট element-এর জন্য — href শুধু লিংকের, src ছবির। কিন্তু কিছু attribute যেকোনো HTML element-এ বসানো যায়। এদের বলে global attribute. সবচেয়ে বেশি ব্যবহৃত পাঁচটি:

এ ছাড়া style (ছোট CSS), dir (লেখার দিক), tabindex, contenteditable আর নিজের ডেটা রাখার data-* — এরাও global attribute; যথাসময়ে দেখা হবে। নিচের কোডে ইচ্ছা করে বড় হাতের tag, quote ছাড়া মান আর hidden="false" রাখা আছে:

<P ID="offer" Class=notice title="অফার চলবে ৩০ অক্টোবর পর্যন্ত">ঈদ অফার — এখানে মাউস রাখুন</P>
<p lang="en">Free delivery inside Dhaka</p>
<p hidden>এই লাইনটি পাতায় দেখা যাবে না</p>
<p hidden="false">এটিও দেখা যাবে না!</p>
<script>
  const offer = document.getElementById('offer');
  console.log(offer.outerHTML);
  console.log('id="Offer" আছে? ' + (document.getElementById('Offer') !== null));
  console.log('লুকানো element: ' + document.querySelectorAll('[hidden]').length);
</script>

lang শুধু একটি ছোট attribute মনে হলেও এর প্রভাব বড়: screen reader সঠিক ভাষার কণ্ঠ বেছে নেয়, ব্রাউজার সঠিক ফন্ট ও শব্দ-ভাঙার নিয়ম প্রয়োগ করে, আর Google Translate-এর মতো টুল বোঝে পাতাটি কোন ভাষার। অ্যাক্সেসিবিলিটির আন্তর্জাতিক নির্দেশিকা WCAG-এর একদম প্রথম স্তরের শর্তই হলো পাতার ভাষা জানানো (পর্ব ১২)। আর hidden-এর একটি নতুন রূপ আছে — hidden="until-found", যেখানে লুকানো লেখা পাতার ভেতরে খুঁজলে (Ctrl+F) নিজে থেকে বেরিয়ে আসে। এটি এখনো Baseline Widely available নয় — ব্যবহারের আগে Can I use-এ দেখে নিন; না-চলা ব্রাউজারে সাধারণ hidden-এর মতোই লুকিয়ে থাকে, খুঁজে পাওয়া যায় না।

৯ · Validator — আপনার HTML-এর পরীক্ষক

ব্রাউজার ভুল দেখায় না, চুপচাপ মেরামত করে। তাহলে ভুল ধরবে কে? উত্তর validator — একটি টুল, যা আপনার HTML-কে নিয়মের বইয়ের সাথে মিলিয়ে প্রতিটি ভুল লাইন নম্বরসহ জানায়। সবচেয়ে প্রচলিতটি W3C-র বিনামূল্যের validator.w3.org/nu (Nu Html Checker). তিনভাবে ব্যবহার করা যায়: প্রকাশিত পাতার URL দিয়ে, ফাইল আপলোড করে, বা সরাসরি কোড পেস্ট করে (“Text Input”).

অংশ ৬-এর ভুল কোডটি পেস্ট করলে এ রকম বার্তা পাবেন (হুবহু শব্দ সময়ে সময়ে একটু বদলাতে পারে):

Error: Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
Error: End tag “b” violates nesting rules.
Error: No “p” element in scope but a “p” end tag seen.
Warning: Consider adding a “lang” attribute to the “html” start tag to declare the language of this document.

অভ্যাস গড়ুন: সবার আগে প্রথম error-টি ঠিক করুন, তারপর আবার যাচাই করুন — একটি ভুল প্রায়ই পরের দশটি “ভুল”-এর জন্ম দেয়। আর DevTools-এর Elements প্যানেল দিয়ে মিলিয়ে দেখুন ব্রাউজারের DOM আপনার ইচ্ছার সাথে মিলছে কি না। Validator নিয়ম যাচাই করে, DevTools দেখায় ফল — দুটো মিলিয়েই পূর্ণ ছবি।

১০ · AI-এর যুগে — সেকেন্ডে পাতা, কিন্তু যাচাই আপনার

আজ ChatGPT, Gemini বা Copilot-কে বললেই কয়েক সেকেন্ডে পুরো একটি পাতা লিখে দেয়। দারুণ সুবিধা — কিন্তু AI শিখেছে ইন্টারনেটের কোটি কোটি পাতা থেকে, যার বড় অংশই পুরোনো বা অগোছালো। তাই AI-এর HTML দেখতে ঠিক লাগলেও ভেতরে প্রায়ই পুরোনো অভ্যাস লুকিয়ে থাকে। এই পর্বের জ্ঞান দিয়েই আপনি সেগুলো ধরতে পারবেন।

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

• validator.w3.org-এ পেস্ট করেছি — শূন্য error
• প্রথম লাইন <!doctype html>, আর <html lang="bn"> ঠিক আছে
• DevTools-এর Elements প্যানেলে DOM দেখেছি — কোনো খালি p বা অপ্রত্যাশিত element নেই
• অজানা কোনো tag বা attribute পেলে MDN-এ দেখেছি সেটি আজও চালু কি না, আর নতুন ফিচার হলে Can I use-এ সাপোর্ট দেখেছি
• Chrome DevTools-এর Lighthouse দিয়ে Accessibility রিপোর্ট চালিয়েছি
• প্রতিটি element কেন আছে, নিজের ভাষায় বলতে পারি — না পারলে AI-কে জিজ্ঞেস করেছি “এটি না থাকলে কী হতো?”