একটি বইয়ে সাধারণত কী কী অংশ থাকে সেটি বিবেচনা করা যাক। বইয়ের একাধিক খন্ড থাকতে পারে, একটি খন্ডে একাধিক অধ্যায় থাকে। প্রতিটি অধ্যায়ে আবার শিরোনাম বা হেডিং, সাবহেডিং, অনুচ্ছেদ বা প্যারাগ্রাফ থাকতে পারে। এছাড়াও বইতে বিভিন্ন ছবি, ছবির ক্যাপশন, সারণি বা টেবিল ইত্যাদি অংশ থাকতে পারে। তেমনি একটি এইচটিএমএল পেইজেও বিভিন্ন অংশ বা উপাদান থাকে। এ উপাদানগুলোকে বলা হয় এইচটিএমএল এলিমেন্ট (HTML Elements)।
এইচটিএমএল-এর এলিমেন্ট লেখার জন্য ব্যবহার করা হয় ট্যাগ। ট্যাগকে অনেকটা ব্র্যাকেট বা বন্ধনীর সঙ্গে তুলনা করা যেতে পারে। সাধারণত এলিমেন্টের শুরু বোঝাতে একটি ওপেনিং ট্যাগ এবং শেষ বোঝাতে একটি ক্লোজিং ট্যাগ ব্যবহার করা হয়। ওপেনিং ট্যাগ, দুই ট্যাগের মধ্যবর্তী কনটেন্ট ও ক্লোজিং ট্যাগ মিলে যা হয় তা-ই একটি এলিমেন্ট। তবে কিছু এলিমেন্ট আছে যাদের মধ্যে কোনো কনটেন্ট থাকে না, তাই এদের ক্লোজিং ট্যাগও থাকে না। এদেরকে বলা হয় এম্পটি (empty) এলিমেন্ট।
ট্যাগ গঠিত হয় এলিমেন্টের নাম বা নামের অংশ দিয়ে। ওপেনিং ও ক্লোজিং ট্যাগের গঠন হয় এরকম, <element_name> ও </element_name> । দুটি অ্যাঙ্গেল ব্র্যাকেটের ভেতরে এলিমেন্টের নাম লিখলে হয় ওপেনিং ট্যাগ, আর ক্লোজিং ট্যাগ হয় এ রকম, </….> । অর্থাৎ, এলিমেন্টের নামের আগে একটি অতিরিক্ত ফরওয়ার্ড স্ল্যাশ চিহ্ন (Forward Slash-/) দেওয়া হয়। ওপেনিং এবং ক্লোজিং ট্যাগের ভেতরের লেখা এলিমেন্টের নাম একই হতে হবে।
নিচে একটি এইচটিএমেল কোড দেখানো হলো
<!DOCTYPE html> <html> <body> Hello World! </body> </html>
কোডটি রান করলে স্ক্রিনে Hello World! লেখাটি দেখাবে। যদি কোডটি পিসিতে রান করতে চাও তাহলে Download বাটনে ক্লিক করে সেভ করো। তারপর সেভ করা ফাইলটি ব্রাউজারে ওপেন করলে স্ক্রিনে Hello World! লেখাটি দেখাবে।
উপরের কোডটি ভালো করে লক্ষ করা যাক। প্রথম লাইনে আছে ‘<!DOCTYPE html>’, যাকে বলা হয় ডকুমেন্ট টাইপ ডিক্লারেশন। এর দ্বারা ব্রাউজার বুঝতে পারে যে ডকুমেন্টটি এইচটিএমএল ৫ স্ট্যান্ডার্ড অনুসরণ করে লেখা হয়েছে এবং সেই অনুযায়ী রেন্ডার (প্রদর্শন) করে। এটি আসলে ডকুমেন্টের অংশ নয়, তবে লেখা জরুরি।
এইচটিএমএলের যাবতীয় এলিমেন্ট রাখতে হয় একটি মূল এলিমেন্টের ভেতরে, সেটি হচ্ছে html। সেজন্য দ্বিতীয় লাইনে আছে <html> ট্যাগ, ডকুমেন্টের শেষও কিন্তু হয়েছে </html> ট্যাগ দিয়ে। এরপর আছে <body> ট্যাগ। ব্রাউজারে আমরা যা কিছু দেখি তার সবই থাকে body এলিমেন্টের ভেতরে। বডির ভেতরে আমরা লিখেছি Hello World, এই লেখাটিই ব্রাউজার দেখাবে।
বডি এলিমেন্ট যেমন আছে, তেমনি একটি হেড এলিমেন্টও আছে। ওয়েব পেইজের দৃশ্যমান সবকিছু দেওয়া হয় বডির ভেতরে, আর হেডের ভেতরে ওয়েব পেইজ সম্পর্কে তথ্য দেওয়া, বিভিন্ন সেটিংস ঠিক করা, স্টাইল, স্ক্রিপ্ট এসব নিয়ন্ত্রণ করা ইত্যাদি কাজ করা হয়। ব্রাউজারের ট্যাবে ওয়েবপেইজের যে শিরোনাম বা টাইটেল (title) দেখা যায় তা লেখা থাকে হেডে। উপরে তৈরি পেইজে একটি টাইটেল যুক্ত করে দেওয়া যাক।
<!DOCTYPE html> <html> <head> <title> My first html doc</title> </head> <body> Hello World! </body> </html>
এই কোডটি লিখে সেভ করে ব্রাউজারে ওপেন করলে আগের মতোই Hello World! দেখা যাবে। একইসঙ্গে ব্রাউজারের টাইটেল বারে টাইটেলটিও দেখা যাবে। এখানে <title> … </title> ট্যাগ দিয়ে ওয়েব পেইজের টাইটেল দেখানো হয়েছে।
