লেসন ৩: হেড এলিমেন্ট

টাইটেল এলিমেন্ট

বৈধ HTML ডকুমেন্ট তৈরি করার জন্য হেড সেকশনে অন্ততপক্ষে টাইটেল এলিমেন্ট অন্তর্ভুক্ত করা আবশ্যক। যখন আপনি ব্রাউজারে কোন HTML ডকুমেন্ট লোড করেন আপনি টাইটেল বারে ওয়েবপেজটির টাইটেল দেখতে পাবেন।

গুগল, বিং এবং ইয়াহু’র মত সার্চ ইঞ্জিন আপনার ওয়েবপেজের টাইটেলকে সার্চ লিস্টে ওয়েবসাইটের টাইটেল হিসাবে ব্যবহার করে, তাই ওয়েবপেজের হেড সেকশনের এই উপাদানটি খুবই গুরুত্বপূর্ন ফ্যাক্টর হিসাবে কাজ করে।

উদাহরনঃ আপনার ব্রাউজারে নিচের উদাহরণ যেভাবে দেখাবে

<title>The Title Element</title>

মেটা এলিমেন্ট

হেড সেকশনের ভেতরে থাকা এই মেটা এলিমেন্টগুলি বিভিন্ন রকমের কাজের জন্য ব্যবহার করা হয়। এটা হল প্রথম HTML এলিমেন্ট যেখানে আপনি দেখতে পাবেন সেলফ ক্লোজিং ট্যাগের উদাহরণ। এটা শুধু মাত্র ওপেনিং ট্যাগ নিয়ে গঠিত, এর মাঝে কোন কন্টেন্ট থাকে না এবং এমনকি ক্লোজিং ট্যাগও থাকে না।

এই এলিমেন্টের সবথেকে গুরুত্বপুর্ন কাজ হল আপনার ওয়েবসাইটের সম্পর্কে কিছু মৌলিক তথ্য সার্চ ইঞ্জিনকে দেওয়া যেমন হেড সেকশনের ভেতরে থাকা সবথেকে গুরুত্বপুর্ন উপাদান হল কীওয়ার্ড ও ডেস্ক্রিপশন ট্যাগ।

মেটা ট্যাগ বিভিন্ন রকমের কাজের জন্য বিভিন্ন রকমের অ্যাট্রিবিউট ব্যবহার করে। উদাহরণস্বরুপ, আপনার ওয়েবসাইটের কিওয়ার্ডের ব্যাপারে যদি আপনি সার্চ ইঞ্জিনকে তথ্য দিতে চান তাহলে আপনাকে মেটা ট্যাগে প্রথম অ্যাট্রিবিউট দিতে হবে name এবং এর ভ্যালু হবে keyword, দ্বিতীয় অ্যাট্রিবিউট হবে content এবং এর মান হবে আপনার ওয়েবসাইটের কিছু কীওয়ার্ড যেটা আপনি দিতে চান(প্রতিটা কীওয়ার্ড কমা দিয়ে আলাদা করতে হয়)।

<meta name="keywords" content="keyword1, keyword2, ...">

সার্চ ইঞ্জিনকে ওয়েবপেজ সম্পর্কিত সংক্ষিপ্ত বিবরন দেওয়ার জন্য আপনাকে মেটা ট্যাগে name অ্যাট্রিবিউটের ভ্যালু description এবং content অ্যাট্রিবিউটের ভ্যালু দিতে হবে আপনার ওয়েবপেজের সম্পর্কে কিছু তথ্য, যেমনঃ

<meta name="description" content="About my webpage...">

নিচে উভয় মেটা ট্যাগের জন্য HTML কোড দিয়ে দেওয়া হল, সুতরাং এই কোডগুলিকে কপি করে নিয়ে আপনি আপনার প্রথম যে ওয়েবপেজ তৈরি করেছিলেন সেই পেজের হেড সেকশনের মধ্যে পেস্ট করে দিন। এরপর আপনি কীওয়ার্ড এবং ডেসক্রিপশন এর কনটেন্ট ভ্যালু গুলি আপনার পছন্দসই কীওয়ার্ড ও ডেসক্রিপশন দিয়ে পূরণ করুন।

<meta name="keywords" content=" ">
<meta name="description" content=" ">

নিচের চিত্রের মত আপনি হয়ত এই ব্যাপারটি অনেক বার লক্ষ্য করেছেন, কিন্তু এখন আপনি জানেন সার্চ ইঞ্জিনের রেজাল্ট পেজের সার্চ লিস্টে এগুলো আসে টাইটেল এবং ডেসক্রিপশন ট্যাগের মাধ্যমে।উদাহরণস্বরূপ গুগল রেজাল্ট পেজের সার্চ তালিকায় ওয়েবপেজের টাইটেল এলিমেন্টের কনটেন্টকে ওয়েবপেজের টাইটেল হিসাবে ব্যবহার করে, এবং কিছু কিছু সময় ডেসক্রিপশন ট্যাগকেও কোন ওয়েবপেজের সংক্ষিপ্ত বিবরণ হিসাবে ব্যবহার করে(বিশেষ করে যখন ডেসক্রিপশনে সার্চ করা শব্দ গুলি থাকে)। নিচের চিত্রে Best Budget Smartphone নিয়ে গুগলে সার্চ করার পরে যা দেখানো হয়েছেঃ

আপনার ওয়েবপেজের ক্যারেকটার এনকোডিং

মেটা এলিমেন্টের আরেকটা কাজ হল আপনি আপনার ওয়েব পেজে কোন ধরনের অক্ষর সেট করতে চান। যদিও এটার প্রয়োজন নেই, তবুও এই এলিমেন্টকে আপনার ওয়েবপেজে অন্তর্ভুক্ত করা আমি বুদ্ধিমানের কাজ মনে করি, কারনঃ

আপনি যদি কোন ক্যারেকটার সেট ব্যবহার না করেন তাহলে ব্রাউজার আপনার ওয়েবপেজে ইউজারের লোকাল ডিফল্ট ক্যারেক্টার সেট ব্যবহার করবে। এটা কোন রকম পার্থক্য তৈরি করবে না যদি ভিজিটর আপনার আপনার লোকাল কান্ট্রির হয়। কিন্তু আপনি ধরুন বাংলায় একটি ওয়েবসাইট তৈরী করলেন এবং কোন ক্যারেকটার এনকোডিং মেটা ট্যাগ আপনি ব্যবহার করেননি তাহলে আপনার ওয়েবসাইট শুধুমাত্র আপনার লোকাল ভিজিটররাই সহজে বুঝতে পারবে, কারন তাদের সিস্টেমে সেই ডিফল্ট ক্যারেকটার এনকোডিং আছে। কিন্তু ধরুন আপনার ওয়েবসাইটে আমেরিকার কোন ভিজিটর এল, সে কিন্তু দেখবে আপানার ওয়েবসাইটটিতে বিশৃঙ্খল ভাবে লেখা হয়েছে যেটার মাথা-মুন্ডু কিছুই বোঝা যাচ্ছেনা এবং আপনি যে বাংলা ভাষায় লিখেছিলেন সেটা কিন্তু তার ওয়েবসাইটে দেখাবে না। নিচের চিত্রে বিষয়টি পরিষ্কার হয়ে যাবে,

তাই আপনি যদি আপনার ওয়েবসাইট পৃথিবীর নানা প্রান্তে একইরকম ভাবে দেখাতে চান তাহলে এই ক্যারেকটার সেট মেটা ট্যাগ ব্যবহার করতে হবে।

<meta charset="utf-8" />

উপরের ক্যারেকটার সেট সমস্ত বিশ্বজনীন ইউনিকোড ক্যারেকটারকে সাপোর্ট করতে সক্ষম এবং বেশিরভাগ ওয়েবপেজে এই UTF8(U from Universal Character Set + Transformation Format—8-bit) ইউনিকোড ব্যবহৃত হচ্ছে। আপনি http://www.iana.org/assignments/character-sets থেকে আপনার ভাষার ইউনিকোড খুঁজে পেতে পারেন।

আপনাকে যে সমস্ত গুরুত্বপূর্ণ হেড এলিমেন্ট সম্পর্কে জানতে হবে সেটা এখানেই শেষ করতে হচ্ছে। পরবর্তী পাঠে আমরা আমাদের তৈরি করা ওয়েবপেজে বিষয়বস্তু যোগ করা শুরু করব। আপনি ইতিমধ্যে হয়ত লক্ষ্য করেছেন যে টেক্সট এডিটর দিয়ে ওয়েবপেজ বানানো কতটা সময় অপচয়কারী কাজ। আপনার ওয়েবপেজে যে সমস্ত কাজ গুলি আপনি করেছেন সেই পরিবর্তনগুলি দেখার জন্য আপনি ডকুমেন্টকে সেভ করে দিয়ে ব্রাউজারটাকে রিলোড দেবেন।