এইচটিএমএল বিভিন্ন উপাদানের সমন্বয়ে গঠিত যেগুলোকে এইচটিএমএল এলিমেন্ট বলা হয় । এইচটিএমএল এলিমেন্টগুলি ব্রাউজারকে বলে দেয় ওয়েব কনটেন্ট গুলো কীভাবে প্রদর্শন করতে হয় ওয়েব ব্রাউজার এ । এইচটিএমএল এলিমেন্ট বা উপাদানগুলি “এটি একটি শিরোনাম”, “এটি একটি অনুচ্ছেদ”, “এটি একটি লিঙ্ক”, ইত্যাদির মতো কনটেন্ট এর টুকরা লেবেল করে।
এইচটিএমএল ওয়েব পেজ তৈরির জন্য একটি আদর্শ মার্কআপ ল্যংগুয়েজ ।
চলুন দেখে নেয়া যাক একটি এইচটিএমএল পেজের বেসিক কোড ব্লক।
<!DOCTYPE html>
<html>
<head>
<title>ওয়েব পেজ টাইটেল</title>
</head>
<body>
<h1>আমার প্রথম ওয়েব পেজ।</h1>
<p>আমার প্রথম পেরাগ্রাফ।</p>
</body>
</html>উপরের কোড এর ব্যাখ্যা
- <!DOCTYPE HTML> টি বলে দেয় যে HTML পেজের কোড গুলো HTML5 এ লেখা কিংবা HTML6 এ।
- <html>, <head>, <title>, <body> এগুলো এক একটি এইচটিএমএল ট্যাগ। এবং এগুলোকে ওপেনিং ট্যাগ বলে । আর বেশিরভাগ ট্যাগ এর ক্লোজিং ট্যাগ থাকে যেনম </html> ,</head> , </title>, </body>. tag গুলোকে কখন ও কখনও element ও বলা হয় । সবগুলো এইচটিএমএল ট্যাগ লিস্ট।
- <html> এলিমেন্ট টি রুট এলিমেন্ট এবং অন্য সব HTML কোড এর বেতরে থাকে । এবং লক্ষ করুন উপরের কোডের একদম নিচে ক্লোজিং html tag আছে যা হচ্ছে </html>
- <title> ট্যাগটি বলে দেয় ওয়েব পেজটির টাইটেল কি হবে এবং এটি ওয়েব ব্রাউজার এর টাইটের আকারে দেখায় । প্রয়োজনে আরো বিস্তারিত আকারে title tag
- <body> ট্যাগএর মধ্যে যা থাকে তা ওয়েব পেজে দেখায় । নিচের ছবিতে আরো সু্ন্দর ভাবে বোঝা যাবে ।
- <h1> ট্যাগ হলো হেডিং ট্যাগ যা ডকুমেন্ট এর শিরোনাম প্রকাশ করে । আরো ৫টি ট্যাগ আছে যথা h2 h3 h4 h5 ও h6. এগুলোকে হেডিং ট্যাগ বলে । প্রয়োজন এ আরো বিস্তারিত আকারে হেডিং ট্যাগ ।
- <p> ট্যাগ টি ওয়েব ডকুমেন্ট এ প্যারাগ্রাফ প্রকাশ করে ।
উপরের কোড গুলো আরো একটু ভালো ভাবে বোঝার জন্য নিচের ছবিটি দেখুন।
ছবিটির উপরের অংশে আছে কোড এবং নিচে আছে ওয়েব ব্রাউজার এ কোড এর প্রিভিউ । আর কালার দেখে আশা করি বুঝতে পারবেন কোন কোড এর জন্য ওয়েব বাউজার এ কোনটি কেমন দেখাবে ।
এইচটিএমএল এলিমেন্ট কি ?
একটি HTML এলিমেন্ট একটি স্টার্ট ট্যাগ, কিছু সামগ্রী বা কন্টেন্ট এবং একটি শেষ ট্যাগ (ক্লোজিং ট্যাগ) দ্বারা সংজ্ঞায়িত করা হয়। নিচে দেখুন
<tagname>Content goes here...</tagname>
tagname এর যায়গায় যেকোন ট্যাগ বসবে । যেমন head কিংবা title
HTML element হলো কোন ট্যাগ এর শুরু থেকে শেষের ক্লোজিং ট্যাগ সহ ।
<h1>আমার প্রথম হেডিং</h1> <p>আমার প্রথম প্যারাগ্রাফ</p>
| স্টার্ট ট্যাগ | এলিমেন্ট কন্টেন্ট | ক্লোজিং ট্যাগ |
| <h1> | আমার প্রথম হেডিং | </h1> |
| <p> | আমার প্রথম প্যারাগ্রাফ | </p> |
| <br> | নেই | নেই |
কিছু কিছু ট্যাগের ক্লোজিং ট্যাগ থাকেনা যেমন <br> tag কিংবা <hr> ট্যাগ । আর এই ট্যাগগুলোকে ফাকা এলিমেন্ট ও বলে কারন এদের মধ্যে কোন কনটেন্ট লেখা যায় না ।
ওয়েব ব্রাউজার
ওয়েব ব্রাউজারের (ক্রোম, এজ, ফায়ারফক্স, সাফারি) উদ্দেশ্য হ’ল এইচটিএমএল ডকুমেন্ট পড়া এবং সেগুলি সঠিকভাবে প্রদর্শন করা।
এইচটিএমএল পেজের কাঠামো
শুধু body ট্যাগের ভেতরে যা আছে তা ওয়েব ব্রাউজার এ দেখায় । উপরের HTML Structure এর সাদা অংশ টি দেখুন।
HTML এই ইতিহাস
HTML এর বিভিন্য ফিচার ডেভেলপ করে World Wide Web বা সংক্ষেপে W3 এবং এখন এটি World Wide Web Consortium বা সংক্ষেপে W3C.
এইচটিএমএল ৪.০১ ভার্সন টি অনেক দিন চলেছে এবং এর পর জায়গা করে নিয়েছে এইচটিএমএল ৫। ওয়ার্ল্ড ওয়াইড ওয়েবের প্রথম দিন থেকেই HTML এর অনেকগুলি সংস্করণ রয়েছে:
| ভার্সন | সন |
| টিম বার্নার্স-লি )Tim Berners-Lee) আবিষ্কার করেছিলেন www | ১৯৮৯ |
| টিম বার্নার্স-লি আবিষ্কার করেছিলেন HTML | ১৯৯১ |
| ডেভ রেগেট (Dave Raggett ) HTML+ এর খসড়া করেছিলেন | ১৯৯৩ |
| এইচটিএমএল ওয়ার্কিং গ্রুপ (HTML Working Group) নিয়ে আসে HTML 2.0 | ১৯৯৫ |
| HTML 3.2 | ১৯৯৭ |
| HTML 4.01 | ১৯৯৯ |
| XHTML 1.0 | ২০০০ |
| HTML5 এর প্রাথমিক সুচনা | ২০০৮ |
| HTML5 মোটামুটি স্টাবল | ২০১২ |
| W3C নিয়ে এলো স্টাবল HTML5 | ২০১৪ |
| HTML 5.1 | ২০১৬ |
| HTML 5.1 2nd Edition | ২০১৭ |
| HTML 5.2 | ২০১৭ |
| HTML 5.3 — ডেভেলপমেন্ট চলছে | — |
আমরা সর্বশেষ HTML 5 স্টেন্ডার্ড নিয়ে টিউটোরিয়াল তৈরি করেছি ।