এইচটিএমএল মার্কআপ ল্যাংগুয়েজ এর হেডিং হচ্ছে কনটেন্ট এর মধ্যে টাইটেল এবং সাবটাইটেল নির্দেশ করে দেওয়ার মাধ্যম | যা ওয়েবপেজে শিরোনাম হিসেবে প্রদর্শিত হয় |
আজকের এই চ্যাপ্টার থেকে আমরা এইচটিএমএল হেডিং সম্পর্কে বিস্তারিত ভাবে জানবো |
আজকের এই চ্যাপ্টার থেকে আপনি যা জানতে পারবেন –
- এইচটিএমএল হেডিং কি ?
- এইচটিএমএল মার্কআপ ল্যাংগুয়েজ এ কতগুলো হেডিং রয়েছে
- হেডিং এর ব্যবহার
- হেডিং ব্যবহারের প্রয়োজনীয়তা
তাহলে চলুন আমরা উপরের বিষয়গুলো জেনে নিন,
এইচটিএমএল হেডিং কি ?
এইচটিএমএল মার্কআপ ল্যাংগুয়েজ এর মাধ্যমে বিভিন্ন ধরনের ওয়েব পেজ তৈরি করা হয় | প্রতিটি ওয়েব পেজ তৈরি টাইটেল এবং সাবটাইটেল ব্যবহার করা হয় | ওয়েব পেজে টাইটেল এবং সাবটাইটেল ব্যবহার করার জন্য এইচটিএমএল ডেভেলপাররা হেডিং নামে একটি ট্যাংক তৈরি করেছে যার মাধ্যমে ওয়েবপেজের শিরোনামকে প্রদর্শন করা হয় | সাধারণ ভাষায় এটাই এইচটিএমএল হেডিং |
অনেকে ভুল করে হেড সেকশন এবং হেডিং কে মিলিয়ে ফেলেন | কিন্তু অবশ্যই মনে রাখা জরুরী যে হেড সেকশন হচ্ছে একটি সম্পূর্ণ আলাদা সেকশন যার সাথে হেডিং ট্যাগ এর কোন সম্পর্ক নেই | সেকশন মূলত একটি ওয়েব পেজের মেটা ট্যাগ নির্ধারণের জন্য ব্যবহার করা হয় |
তাহলে আমরা এখন জানি যে এইচটিএমএল হেডিং এবং এইচটিএমএল হেড সম্পন্ন আলাদা দুটি সেকশন |
এইচটিএমএল মার্কআপ ল্যাংগুয়েজ কতগুলো হেডিং রয়েছে
এইচটিএমএল হেডিং এর মাধ্যমে গুরুত্বপূর্ণ কনটেন্ট কে টাইটেল আকারে প্রদর্শন করা হয় |
এইচটিএমএল 6 টি হেডিং রয়েছে পর্যায়ক্রমে সবথেকে বড় হেডিং থেকে সবচেয়ে ছোট হেডিং নির্দেশ করে | h1 হচ্ছে সবথেকে বড় হেডিং এবং h6 হচ্ছে সবথেকে ছোট হেডিং |
যদি আমরা এইচটিএমএল এডিটর ওপেন করি তাহলে বিষয়টি যেভাবে কাজ করে দেখতে পাবো |
চলুন তাহলে একটি এইচটিএমএল কোড এডিটর হেডিং রান করিয়ে দেখি.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>
Html tutorial
</title>
</head>
<body>
<h1>This is a h1 </h1>
<h2>This is a h2 </h2>
<h3>This is a h3 </h3>
<h4>This is a h4</h4>
<h5>This is a h5 </h5>
<h6>This is a h6 </h6>
</body>
</html>
কোড এডিটর এইচটিএমএল এর এই কোডটি লেখার পর তা ব্রাউজার রান করালে যেভাবে দেখা যাবে |
চলুন আমরা ওপরের দিকে ব্রাউজারে রান করিয়ে দেখি আউটপুট টা কেমন আসে |
উপরের ইমেজটি দেখলেই আমরা হেডিং সম্পর্কে সম্পূর্ণ ধারণা পাব এইচটিএমএল হেডিং এর কাজ কি এবং এখানে h1 সব থেকে বড় এবং বোল্ড ও h6 সবথেকে ছোট |
এইচটিএমএল ল্যাঙ্গুয়েজ হেডিং এর ব্যবহার
আমরা পূর্বের আলোচনা থেকে হেডিং সম্পর্কে সম্পূর্ণ একটি ধারণা পেয়েছি এখন দেখব কোন হেডিং টি কোন কাজে ব্যবহার করা হয় |
নিচে হেডিং সম্পর্কে বিস্তারিতভাবে তুলে ধরা হলো –
- <h1> – </h1> – হেডিং অন দিয়ে কনটেন্টের মধ্য সবথেকে বড় হেডিং নির্দেশ করা হয় |
- <h2> – </h2> – হেডিং টু দিয়ে কনটেন্ট এর মধ্যে h1 থেকে একটু ছোট হেডিং নির্দেশ করা হয় |
- <h3> – </h3> – হেডিং 3 দিয়ে কনটেন্টের মধ্য h2 থেকে একটু ছোট হেডিং নির্দেশ করা হয় |
- <h4> – </h4> – হেডিং 4 দিয়ে কনটেন্ট এর মধ্যে h3 থেকে একটু ছোট হেডিং নির্দেশ করে |
- <h5> – </h5> – হেডিং থেকে একটি ছোট হেডিং নির্দেশ করতে হেডিং ফাইভ ব্যবহার করা হয় |
- <h6> – </h6> – হেডিং সিক্স এর মাধ্যমে হেডিং 5 থেকে ছোট হেডিং নির্দেশ করা হয় |
এখান থেকে আমরা বুঝলাম, এইচটিএমএল মার্কআপ ল্যাংগুয়েজ কতগুলো হেডিং রয়েছে এবং কি কি কাজে ব্যবহার করা হয় |
এইচটিএমএল ল্যাঙ্গুয়েজে হেডিং ট্যাগ এর প্রয়োজনীয়তা
একটি ওয়েব পেজকে সুন্দর ভাবে প্রদর্শন করার জন্য হেডিং ট্যাগ এর ব্যবহার খুবই গুরুত্বপূর্ণ | এছাড়া ওয়েবপেজের বিভিন্ন কনটেন্টকে সার্চ ইঞ্জিনে ইনডেক্স করার ক্ষেত্রে হেডিং ট্যাগ ব্যবহার করা হয় | যার ফলে যেকোন ওয়েবপেজ সার্চ ইঞ্জিনের রেঙ্কঙ্কিংয়ে চলে আসে যা একটি ওয়েবসাইটের জন্য খুবই গুরুত্বপূর্ণ |
এছাড়া ওয়েবপেজের কনটেন্টকে মার্জিত হবে প্রদর্শন করার ক্ষেত্রেও বিভিন্ন সময় হেডিং ট্যাগ ব্যবহার করা হয় | ওয়েবপেজের গঠনকে স্পষ্ট ভাবে প্রকাশ করতে হেডিং গুরুত্বপূর্ণ ভূমিকা পালন করে |
উপরের আলোচনা থেকে এটা ক্লিয়ার যে একটি এইচটিএমএল ল্যাঙ্গুয়েজ এর মাধ্যমে যখন ওয়েব পেজ তৈরি করা হয় তখন হেডিং এর গুরুত্ব কতখানি এবং এটি কিভাবে ব্যবহার করা হয় | এই টিউটোরিয়ালে সম্পূর্ণভাবে বর্ণনা করা হয়েছে |
আপনাদের যদি উপরের কোন বিষয়ে কোন ধরনের সমস্যা থাকে অথবা কোন প্রশ্ন থাকে অবশ্যই কমেন্টে জানাবেন আমাদের সাথে থাকার জন্য অসংখ্য ধন্যবাদ |