Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

এইচটিএমএল হেড - HTML Head


এইচটিএমএল ডকুমেন্ট এর প্রধান দুটি অংশের প্রথমটি হল হেড সেকশন এবং অন্যটি <body> . . . </body> সেকশন। একটি ওয়েব পেজ এর সমস্ত অদৃশ্যমান কন্টেন্ট যেমন - style, script, meta data ইত্যাদি এই হেড সেকশন এ রাখা হয়।

এইচটিএমএল এর <head> . . . </head> এলিমেনটের মাঝে যে সকল ট্যাগ ব্যবহার করা যায় সেগুলো হল <title>, <base>, <link>, <meta>, <script> এবং <style>.


এইচটিএমএল title এলিমেনট

<title> এলিমেনট কোন এইচটিএমএল ডকুমেন্ট এর শিরোনাম বা title প্রদর্শন করে। প্রতিটি এইচটিএমএল বা এক্সএইচটিএমএল ডকুমেন্টেই ভিন্ন ভিন্ন শিরোনাম বা title দিতে হয়। ওয়েব পেজের বিষয়বস্তুর ওপর title ট্যাগের মধ্যস্থিত লেখা নির্ধারিত হয়।

নিচে একটি সাধারণ এইচটিএমএল ডকুমেন্টে title ট্যাগ এর অবস্থান দেখুন -

উদাহরণ


<html>
  <head>
    <title>Title of the document</title>
  </head>

  <body>

    The content of the document......

  </body>
</html>

কোড এডিটর



এইচটিএমএল base এলিমেনট

এইচটিএমএল base বা বেস ট্যাগ ব্যবহার করে কোন ওয়েব পেজের সমস্ত হাইপারলিংকগুলোর একটি স্বয়ংক্রিয় বা default লিংক নির্ধারণ করা হয়।

নিচে একটি সাধারণ উদাহরন দেখুন -

উদাহরণ


<head> 
  <base href="https://www.websschool.com/image/" />
  <base target="_blank" />
</head>

কোড এডিটর



এইচটিএমএল link এলিমেনট

একটি এইচটিএমএল ডকুমেন্ট এবং বহিঃস্থ কোন ফাইল যেমন - সিএসএস, জাভাস্ক্রিপ্ট ইত্যাদির মাঝে সম্পর্ক তৈরি করতে লিংক ট্যাগ ব্যবহার করা হয়।

নিচে একটি সাধারণ উদাহরন দেখুন -

উদাহরণ


<head>

  <link rel="stylesheet" type="text/css" href="style.css" />

</head>

কোড এডিটর



এইচটিএমএল meta এলিমেনট

ডকুমেন্ট সম্পর্কিত বিভিন্ন তথ্য সংযুক্ত করার জন্য <meta> ট্যাগ ব্যবহার করা হয়। সাধারনত মেটা এলিমেনট ওয়েব পেজের বিষয়বস্তু, কীওয়ার্ড, ওয়েব সাইটের স্বত্বাধিকারী, সর্বশেষ আপডেট, ওয়েব পেজটি যে তৈরি করেছে তার নাম, ঠিকানা, ওয়েব অ্যাড্রেস ইত্যাদি বিভিন্ন data বা তথ্য সংযুক্ত করার জন্য ব্যবহার করা হয়।

এইচটিএমএল meta ট্যাগ সম্পর্কে আরও জানতে এসইও এর meta ট্যাগ টিউটোরিয়াল পেজটি পড়ুন।


এইচটিএমএল script এলিমেনট

এইচটিএমএল ডকুমেন্ট এবং বিভিন্ন client-side স্ক্রিপ্ট ( যেমন - জাভাস্ক্রিপ্ট ) এর মাঝে সম্পর্ক তৈরি করতে script ট্যাগ ব্যবহার করা হয়।

এইচটিএমএল script ট্যাগ সম্পর্কে আরও জানতে এইচটিএমএল জাভাস্ক্রিপ্ট টিউটোরিয়াল পেজটি পড়ুন।


এইচটিএমএল style এলিমেনট

কোন এইচটিএমএল ডকুমেন্টের জন্য style নির্ধারণ করতে এইচটিএমএল style ট্যাগ ব্যবহার করা হয়।

এইচটিএমএল style ট্যাগ সম্পর্কে আরও জানতে এইচটিএমএল style টিউটোরিয়াল পেজটি পড়ুন।


<html>, <head> এবং <body> ট্যাগ বাদ দেয়া

এইচটিএমএল ৫ এর স্ট্যান্ডার্ড অনুসারে <html>, <head> এবং <body> ট্যাগগুলো বাদ দেয়া যায়।

নিচের কোডগুলো এইচটিএমএল ৫ হিসেবেই কাজ করবে।

উদাহরণ


<!DOCTYPE html>
  <title>Page Title</title>

  <h1>This is a heading</h1>

  <p>This is a paragraph.</p>

কোড এডিটর


<html> ও <body> ট্যাগ বাদ দেয়াকে Websschool সমর্থন করে না। এই ট্যাগগুলো বাদ দেয়া হলে DOM এবং XML সফটওয়ারগুলো ক্রাশ করতে পারে এবং পুরনো ভার্সনের ব্রাউজারগুলো সমস্যা তৈরি করতে পারে।


এইচটিএমএল এর সকল হেড এলিমেনট

ট্যাগ বিবরন
<head> ডকুমেন্ট সম্পর্কে সকল তথ্য প্রকাশ করে।
<title> ডকুমেন্ট এর শিরোনাম বা title প্রকাশ করে।
<base/> এইচটিএমএল base বা বেস ট্যাগ ব্যবহার করা হয় কোন ওয়েব পেজের সমস্ত লিংকগুলোর একটি স্বয়ংক্রিয় বা default লিংক নির্ধারণ করে।
<link/> ডকুমেন্ট এবং বহিঃস্থ কোন ফাইলের সাথে সম্পর্ক স্থাপন করে।
<meta/> এইচটিএমএল ডকুমেন্ট সম্পর্কে মেটা ডাটা প্রদর্শন করে।
<script> এইচটিএমএল ডকুমেন্ট এবং বিভিন্ন client-side স্ক্রিপ্ট ( যেমন - জাভাস্ক্রিপ্ট ) এর মাঝে সম্পর্ক তৈরি করে।
<style> কোন এইচটিএমএল ডকুমেন্টের জন্য style নির্ধারণ করতে এইচটিএমএল style ট্যাগ ব্যবহার করা হয়।