ওয়েব পাতার তিন স্তর — HTML, CSS আর JavaScript কে কী করে

১৯৮৯ সালের মার্চে সুইজারল্যান্ডের CERN গবেষণাগারে কর্মরত ব্রিটিশ বিজ্ঞানী Tim Berners-Lee একটি প্রস্তাব লেখেন — “Information Management: A Proposal”. সমস্যাটা খুব মানবিক ছিল: হাজারো বিজ্ঞানী আসেন-যান, আলাদা আলাদা কম্পিউটারে আলাদা ফরম্যাটে তথ্য রাখেন, আর একজনের কাজ আরেকজন খুঁজে পান না। তাঁর বস Mike Sendall প্রস্তাবের ওপর লিখেছিলেন “Vague but exciting” — অস্পষ্ট, কিন্তু রোমাঞ্চকর।

১৯৯০ সালের শেষ নাগাদ Berners-Lee একটি NeXT কম্পিউটারে তিনটি মূল জিনিস তৈরি করেন, যা আজও ওয়েবের হৃদয়: HTML (পাতা লেখার ভাষা), HTTP (পাতা চাওয়া ও পাঠানোর নিয়ম) আর URL (প্রতিটি জিনিসের একটি অনন্য ঠিকানা)। সাথে প্রথম ওয়েব সার্ভার আর প্রথম ব্রাউজার — যার নাম ছিল “WorldWideWeb”, আর যেটা দিয়ে পাতা পড়ার সাথে লেখাও যেত। সহকর্মী Robert Cailliau এই প্রকল্পে বড় ভূমিকা রাখেন। ১৯৯১ সালে প্রথম ওয়েবসাইট info.cern.ch সবার জন্য খুলে দেওয়া হয়; সেখানে লেখা ছিল ওয়েব কী আর কীভাবে নিজের সার্ভার বানাতে হয়। ১৯৯৩ সালে CERN ওয়েবের সফটওয়্যার সবার জন্য বিনামূল্যে ব্যবহারের অনুমতি দেয় — কোনো লাইসেন্স ফি নেই। ওয়েবের বিস্ফোরণের পেছনে এই সিদ্ধান্তটি বড় কারণ।

আজকের নকশায় কী রয়ে গেছে? প্রায় সবকিছুর বীজ। প্রথম HTML-এ ট্যাগ ছিল অল্প কয়েকটি, আর সেগুলো ছিল অর্থের ট্যাগ — শিরোনাম, অনুচ্ছেদ, তালিকা, link. চেহারার কোনো নির্দেশ ছিল না; ব্রাউজার নিজের মতো দেখাত। এই “অর্থ আগে” চিন্তাই আজকের semantic HTML. URL আর HTTP-র মূল ধারণাও বদলায়নি — এই পর্বের অংশ ২-এর GET /saree অনুরোধ ১৯৯১ সালের অনুরোধের সরাসরি বংশধর। আর একটি দর্শন: ওয়েব কেন্দ্রীয় অনুমতি ছাড়াই যে কাউকে পাতা বানাতে ও link দিতে দেয়।

মূল উপলব্ধি: ওয়েব শুরু হয়েছিল তথ্য ভাগাভাগির জন্য, অর্থপূর্ণ কাঠামো আর সবার জন্য খোলা নিয়ম দিয়ে। চেহারা আর আচরণ পরে এসেছে — তাই HTML-কে “সাজানোর জিনিস” না ভেবে “অর্থের ভিত্তি” ভাবাই ওয়েবের আসল চরিত্রের সাথে মেলে।

১৯৯৩ সালে Mosaic ব্রাউজার ছবি দেখানো জনপ্রিয় করার পর ওয়েব দ্রুত সাধারণ মানুষের কাছে পৌঁছায়, আর সবাই চাইলেন পাতা দেখতে ছাপা পত্রিকার মতো সুন্দর হোক। কিন্তু HTML-এ চেহারা নিয়ন্ত্রণের কোনো ব্যবস্থা ছিল না। ফলে ব্রাউজার কোম্পানিগুলো নিজেরাই চেহারার ট্যাগ যোগ করতে থাকে — যেমন রং ও অক্ষরের জন্য <font>. ডিজাইনাররা পাতার বিন্যাসের জন্য <table> ব্যবহার শুরু করেন, যদিও table আসলে তথ্যের সারণির জন্য। ফাঁকা জায়গা বানাতে অদৃশ্য এক-পিক্সেলের ছবিও ব্যবহার হতো। ফলাফল: অর্থ আর চেহারা এমনভাবে জট পাকিয়ে গেল যে পুরো সাইটের রং বদলাতে হাজার পাতা হাতে বদলাতে হতো, আর screen reader table-এর জঙ্গলে পথ হারাত।

১৯৯৪ সালের অক্টোবরে CERN-এ কর্মরত নরওয়েজিয়ান Håkon Wium Lie “Cascading HTML Style Sheets” নামে একটি প্রস্তাব প্রকাশ করেন। শিগগিরই Bert Bos তাঁর সাথে যোগ দেন, আর ১৯৯৬ সালের ডিসেম্বরে W3C প্রথম standard — CSS level 1 — প্রকাশ করে। প্রস্তাবের সবচেয়ে মৌলিক ধারণা ছিল “cascade”: পাতার লেখক, ব্যবহারকারী আর ব্রাউজার — তিন পক্ষেরই চেহারা নিয়ে মত থাকতে পারে, আর নিয়মগুলো স্তরে স্তরে মিলে চূড়ান্ত ফল ঠিক হবে। অর্থাৎ শুরু থেকেই ভাবা হয়েছিল, ছোট অক্ষর পড়তে কষ্ট হওয়া একজন ব্যবহারকারী নিজের stylesheet দিয়ে বড় অক্ষর চাইতে পারবেন।

আলাদা করার সুফল কয়েক দিকে। রক্ষণাবেক্ষণ: একটি CSS ফাইল বদলালে পুরো সাইট বদলায়। বিভিন্ন মাধ্যম: একই HTML পর্দায় এক রকম, প্রিন্টে আরেক রকম, ছোট ফোনে আরেক রকম (আজকের responsive design). Accessibility: কাঠামো পরিষ্কার থাকে বলে সহায়ক প্রযুক্তি সহজে পড়ে। গতি: CSS ফাইল একবার নেমে cache-এ থাকে। ২০০৩ সালে Dave Shea-র “CSS Zen Garden” সাইট নাটকীয়ভাবে দেখায়, হুবহু একই HTML-এর ওপর শুধু CSS বদলে সম্পূর্ণ আলাদা ডিজাইন সম্ভব।

মূল উপলব্ধি: “এটা কী” আর “এটা দেখতে কেমন” — দুটি আলাদা প্রশ্ন, আর আলাদা প্রশ্নের উত্তর আলাদা জায়গায় রাখলে সিস্টেম বদলানো সহজ হয়। AI যখন প্রতিটি ট্যাগে inline style দেয়, সে আসলে ১৯৯০-এর দশকের <font>-যুগে ফিরে যায়।

১৯৯০-এর দশকের মাঝামাঝি Netscape Navigator আর Microsoft-এর Internet Explorer বাজার দখলের তীব্র লড়াইয়ে নামে — এটাই প্রথম “browser war”. দুই পক্ষই নিজস্ব বৈশিষ্ট্য যোগ করত, যা অন্যটিতে চলত না: Netscape-এর ঝিকমিক করা <blink>, IE-র চলমান লেখার <marquee>. JavaScript-এর ক্ষেত্রেও একই অবস্থা — Netscape-এর JavaScript-এর জবাবে Microsoft আনে নিজের JScript, আর DOM-এর আচরণও আলাদা। ওয়েবসাইটে লেখা থাকত “Best viewed in Netscape” বা “Best viewed in Internet Explorer”; ডেভেলপাররা একই কাজ দুবার লিখতেন।

বিশৃঙ্খলা কমাতে দুটি বড় পদক্ষেপ আসে। ১৯৯৪ সালে Tim Berners-Lee W3C (World Wide Web Consortium) প্রতিষ্ঠা করেন — HTML, CSS-এর standard লেখার জন্য। আর JavaScript-কে Ecma International-এ standard করা হয়; ১৯৯৭ সালে প্রথম ECMAScript প্রকাশিত হয় (তাই আজও ES2015, ES2023 বলা হয়)। ২০০০-এর দশকের শুরুতে IE বাজারের বিশাল অংশ দখল করে উন্নয়ন প্রায় থামিয়ে দেয়; ডেভেলপারদের বছরের পর বছর পুরোনো IE-র জন্য বাড়তি কোড লিখতে হয়।

এরপর আসে দ্বিতীয় অধ্যায়। W3C তখন XHTML 2-এর দিকে যাচ্ছিল, যা পুরোনো পাতার সাথে সামঞ্জস্য ভাঙত। ২০০৪ সালে Apple, Mozilla আর Opera মিলে গড়ে WHATWG, এবং বাস্তব ওয়েবের উপযোগী করে HTML-কে এগিয়ে নেওয়ার কাজ শুরু করে — যেখান থেকে HTML5 আসে (<video>, <canvas>, semantic ট্যাগ, পরিষ্কার parsing নিয়ম)। Firefox (২০০৪) আর Chrome (২০০৮) প্রতিযোগিতা ফেরায়। ২০১৯ সালে W3C আর WHATWG একমত হয় যে HTML আর DOM-এর একক উৎস হবে WHATWG-এর Living Standard — একটি দলিল যা নিয়মিত হালনাগাদ হয়, “HTML6” বলে আলাদা সংস্করণ আর আসে না।

একজন JavaScript ডেভেলপারের জন্য এর মানে বাস্তব: আজ আপনি একবার addEventListener লিখলে Chrome, Firefox, Safari, Edge — সবখানে একই আচরণ পান, কারণ standard-এ নিয়মটা একভাবে লেখা আর ব্রাউজাররা নিয়মিত পরস্পরের সাথে মিলিয়ে পরীক্ষা করে। নতুন কোনো feature ব্যবহারের আগে MDN বা “Can I use”-এ সমর্থন দেখে নেওয়ার অভ্যাসও এই ইতিহাসেরই শিক্ষা।

মূল উপলব্ধি: খোলা standard ছাড়া ওয়েব একটি কোম্পানির সম্পত্তি হয়ে যেত। আপনার লেখা কোড যে বহু বছর পরেও চলবে, তার নিশ্চয়তা কোনো ব্রাউজার কোম্পানি নয়, standard-এর পেছনের সম্মিলিত প্রক্রিয়া।

২০০৩ সালে Steven Champeon আর Nick Finck-এর একটি আলোচনায় “progressive enhancement” শব্দটি জনপ্রিয় হয়। তখনকার প্রচলিত পদ্ধতি ছিল “graceful degradation” — আগে সবচেয়ে আধুনিক ব্রাউজারের জন্য বানাও, তারপর পুরোনো ব্রাউজারে যেন একেবারে ভেঙে না পড়ে সেটা দেখো। Champeon উল্টোটা প্রস্তাব করলেন: আগে সবার জন্য কাজ করা একটি ভিত্তি (HTML), তারপর সামর্থ্য অনুযায়ী স্তর যোগ।

অন্যদিকে ২০০৪ সালে Gmail দেখাল, পাতা reload না করেই ব্রাউজারে ডেস্কটপ-অ্যাপের মতো অভিজ্ঞতা সম্ভব (২০০৫ সালে Jesse James Garrett এই কৌশলের নাম দেন “Ajax”). পরে AngularJS, React, Vue-র মতো framework-এ পুরো পাতা JavaScript দিয়ে ব্রাউজারে বানানো সাধারণ হয়ে যায় — SPA. সুবিধা: একবার লোড হলে নেভিগেশন খুব দ্রুত, জটিল ইন্টারঅ্যাকশন সহজ। অসুবিধা: প্রথমবার বড় JavaScript ফাইল নামা, parse হওয়া আর চলার আগ পর্যন্ত পাতা খালি; search engine-এর জন্য কঠিন; কম দামি ফোনে JavaScript চালাতেই অনেক সময় লাগে।

বাস্তব অভিজ্ঞতা থেকে শিল্প আবার মাঝামাঝি পথে ফিরেছে। ২০১২ সালে Twitter জানায় যে পুরোপুরি ব্রাউজারে-বানানো পাতা থেকে সার্ভারে HTML বানানোয় ফিরে গিয়ে তারা প্রথম tweet দেখানোর সময় অনেক কমিয়েছে। আজকের Next.js, Nuxt, SvelteKit, Astro-র মতো টুল সাধারণত সার্ভারে HTML বানিয়ে পাঠায়, তারপর ব্রাউজারে JavaScript সেটাকে ইন্টারঅ্যাকটিভ করে (hydration) — অর্থাৎ progressive enhancement-এর চিন্তাই নতুন চেহারায়।

বাংলাদেশের প্রেক্ষাপটে প্রশ্নটা আরও বাস্তব। অনেক ব্যবহারকারী কম দামি Android ফোনে, সীমিত মোবাইল ডেটায়, কখনো দুর্বল নেটওয়ার্কে ওয়েব ব্যবহার করেন। খবরের সাইট, সরকারি সেবার ফর্ম, ই-কমার্সের পণ্য-পাতা — এখানে প্রথম কয়েক সেকেন্ডে লেখা দেখা যাওয়া আর ফর্ম কাজ করাই আসল কথা; সার্ভারে বানানো HTML আর তার ওপর হালকা JavaScript সাধারণত ভালো। অন্যদিকে লগইনের পরের হিসাবের ড্যাশবোর্ড, অনলাইন ডিজাইন টুল, চ্যাট অ্যাপ — যেখানে ব্যবহারকারী অনেকক্ষণ থাকেন — সেখানে SPA-র ধরন যুক্তিসঙ্গত।

মূল উপলব্ধি: “SPA ভালো না খারাপ” প্রশ্নটা ভুল; প্রশ্ন হলো “আমার ব্যবহারকারী কে, কোন যন্ত্রে, কোন নেটওয়ার্কে, আর প্রথম কয়েক সেকেন্ডে তাঁর কী দরকার?” উত্তর যা-ই হোক, তিন স্তরের ভাগ বোঝা থাকলে আপনি যেকোনো পথ সচেতনভাবে বেছে নিতে পারবেন।

১৯৯৭ সালে W3C-র Web Accessibility Initiative চালুর সময় Tim Berners-Lee বলেছিলেন, ওয়েবের শক্তি তার সর্বজনীনতায়, আর প্রতিবন্ধিতা নির্বিশেষে সবার প্রবেশাধিকার এর অপরিহার্য দিক। দৃষ্টিপ্রতিবন্ধী, কম দেখেন, রং আলাদা করতে পারেন না, হাত কাঁপে বলে মাউস ধরতে পারেন না, শুনতে পান না — এমন মানুষ বিপুল সংখ্যায় আছেন। বয়স বাড়লে আমরা প্রায় সবাই কোনো না কোনোভাবে এই দলে যোগ দিই। ভাঙা হাতে কিছুদিন শুধু কিবোর্ড ব্যবহার করতে হলে, বা রোদে ফোনের পর্দা ঝাপসা দেখলে আমরাও সাময়িকভাবে এই অভিজ্ঞতা পাই।

Screen reader হলো এমন সফটওয়্যার, যা পর্দার লেখা পড়ে শোনায় আর কিবোর্ড দিয়ে নেভিগেশন করতে দেয় — Windows-এ বিনামূল্যের NVDA আর বাণিজ্যিক JAWS, Apple যন্ত্রে VoiceOver, Android-এ TalkBack. এগুলো পর্দার ছবি দেখে না; ব্রাউজার DOM থেকে একটি accessibility tree বানায় — কোনটা বোতাম, কোনটা শিরোনাম, কোন ঘরের নাম কী — আর screen reader সেটাই পড়ে। তাই <button> আর <div> দেখতে এক হলেও screen reader-এর কাছে দুটি সম্পূর্ণ আলাদা জিনিস।

নিয়ম লেখা আছে WCAG (Web Content Accessibility Guidelines)-এ। প্রথম সংস্করণ ১৯৯৯ সালে, WCAG 2.0 ২০০৮ সালে, 2.1 ২০১৮ সালে আর 2.2 ২০২৩ সালে। এর চারটি মূলনীতি: তথ্য বোধগম্য (perceivable — যেমন ছবির alt লেখা, যথেষ্ট রঙের বৈপরীত্য), চালনাযোগ্য (operable — শুধু কিবোর্ডেও সব করা যায়), বোঝার যোগ্য (understandable — পরিষ্কার ভুলের বার্তা) আর শক্তপোক্ত (robust — বিভিন্ন সহায়ক প্রযুক্তিতে চলে)। অনেক দেশে এখন আইনেও এটা বাধ্যতামূলক: যুক্তরাষ্ট্রে প্রতিবন্ধী অধিকার আইনের অধীনে ওয়েবসাইট নিয়ে মামলা হয়েছে, আর ইউরোপীয় ইউনিয়নের European Accessibility Act ২০২৫ সাল থেকে অনেক ডিজিটাল সেবায় কার্যকর। জাতিসংঘের প্রতিবন্ধী ব্যক্তিদের অধিকার সনদেও তথ্যে প্রবেশাধিকারকে অধিকার হিসেবে স্বীকার করা হয়েছে, আর বাংলাদেশেরও প্রতিবন্ধী ব্যক্তির অধিকার ও সুরক্ষা আইন (২০১৩) আছে।

প্রকৌশলীর চোখে সবচেয়ে বড় শিক্ষা: accessibility-র বেশিরভাগই বিনা খরচে আসে, যদি শুরু থেকে semantic HTML লেখেন। পরে “ঠিক করতে” গেলে খরচ বহুগুণ। আর সুবিধা সবার — label থাকা ফর্ম সবার জন্য সহজ, ভালো বৈপরীত্য রোদে সবার জন্য পড়ার যোগ্য, পরিষ্কার শিরোনাম-কাঠামো search engine-ও পছন্দ করে।

মূল উপলব্ধি: Accessibility কোনো আলাদা feature নয়, সঠিক HTML-এর স্বাভাবিক ফল। যে পাতা সবাই ব্যবহার করতে পারে না, সেটা আসলে অসম্পূর্ণ পাতা।