<head> এলিমেন্ট মেটাডেটার (ডেটা সম্পর্কে ডেটা) একটি কন্টেইনার এবং এটি <html> ট্যাগ ও <body> ট্যাগের মধ্যে বসানো হয়।
HTML মেটাডেটা হলো HTML ডকুমেন্ট সম্পর্কিত ডেটা। মেটাডেটা প্রদর্শিত হয় না।
মেটাডেটা সাধারণত ডকুমেন্টের টাইটেল, ক্যারেক্টার সেট, স্টাইল, স্ক্রিপ্ট এবং অন্যান্য মেটা তথ্য নির্ধারণ করে।
নিচের ট্যাগগুলো মেটাডেটা বর্ণনা করে: <title>, <style>, <meta>, <link>, <script>, এবং <base>।
<title> এলিমেন্ট ডকুমেন্টের টাইটেল নির্ধারণ করে, এবং সব HTML ডকুমেন্টেই এটি বাধ্যতামূলক।
<title> এলিমেন্ট:
একটি সাধারণ HTML ডকুমেন্ট:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>একটি একক HTML পেজের জন্য স্টাইল তথ্য নির্ধারণ করতে <style> এলিমেন্ট ব্যবহার করা হয়:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>বাইরের স্টাইল শিটের সাথে লিঙ্ক করতে <link> এলিমেন্ট ব্যবহার করা হয়:
<link rel="stylesheet" href="mystyle.css">কোন ক্যারেক্টার সেট ব্যবহৃত হচ্ছে, পেজের বিবরণ, কীওয়ার্ড, লেখক এবং অন্যান্য মেটাডেটা উল্লেখ করতে <meta> এলিমেন্ট ব্যবহার করা হয়।
মেটাডেটা ব্রাউজার (কনটেন্ট কীভাবে প্রদর্শন করতে হবে), সার্চ ইঞ্জিন (কীওয়ার্ড), এবং অন্যান্য ওয়েব সার্ভিস ব্যবহার করে।
ব্যবহৃত ক্যারেক্টার সেট নির্ধারণ করুন:
<meta charset="UTF-8">আপনার ওয়েব পেজের একটি বিবরণ নির্ধারণ করুন:
<meta name="description" content="Free Web tutorials">সার্চ ইঞ্জিনের জন্য কীওয়ার্ড নির্ধারণ করুন:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">একটি পেজের লেখক নির্ধারণ করুন:
<meta name="author" content="John Doe">প্রতি 30 সেকেন্ডে ডকুমেন্ট রিফ্রেশ করুন:
<meta http-equiv="refresh" content="30"><meta> ট্যাগের উদাহরণ:
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">HTML5, <meta> ট্যাগের মাধ্যমে ওয়েব ডিজাইনারদের ভিউপোর্ট নিয়ন্ত্রণ করার একটি পদ্ধতি চালু করেছে।
ভিউপোর্ট হলো একটি ওয়েব পেজের ব্যবহারকারীর দৃশ্যমান এলাকা। এটি ডিভাইস ভেদে পরিবর্তিত হয়, এবং কম্পিউটার স্ক্রিনের চেয়ে মোবাইল ফোনে ছোট হবে।
আপনার সব ওয়েব পেজে নিচের <meta> ভিউপোর্ট এলিমেন্টটি রাখা উচিত:
<meta name="viewport" content="width=device-width, initial-scale=1.0">একটি <meta> ভিউপোর্ট এলিমেন্ট ব্রাউজারকে পেজের মাপ ও স্কেলিং নিয়ন্ত্রণ করার নির্দেশনা দেয়।
width=device-width অংশটি পেজের প্রস্থকে ডিভাইসের স্ক্রিন-প্রস্থ অনুসরণ করতে সেট করে (যা ডিভাইস ভেদে পরিবর্তিত হবে)।
initial-scale=1.0 অংশটি ব্রাউজার পেজটি প্রথমবার লোড করার সময় প্রাথমিক জুম লেভেল সেট করে।
এখানে ভিউপোর্ট মেটা ট্যাগ ছাড়া একটি ওয়েব পেজের উদাহরণ, এবং ভিউপোর্ট <meta> ট্যাগসহ একই ওয়েব পেজ দেওয়া হলো:
টিপস: আপনি যদি ফোন বা ট্যাবলেট দিয়ে এই পেজটি ব্রাউজ করেন, তাহলে পার্থক্য দেখতে নিচের দুটি লিঙ্কে ক্লিক করতে পারেন।
ক্লায়েন্ট-সাইড JavaScript নির্ধারণ করতে <script> এলিমেন্ট ব্যবহার করা হয়।
এই JavaScript id="demo" থাকা একটি HTML এলিমেন্টে "Hello JavaScript!" লিখে দেয়:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>টিপস: JavaScript সম্পর্কে সবকিছু জানতে, আমাদের JavaScript টিউটোরিয়াল দেখুন।
<base> এলিমেন্ট একটি পেজের সব রিলেটিভ URL-এর জন্য বেস URL এবং বেস টার্গেট নির্ধারণ করে:
<base href="https://www.learncomputer.in/images/" target="_blank">HTML5 স্ট্যান্ডার্ড অনুযায়ী; <html>, <body>, এবং <head> ট্যাগ বাদ দেওয়া যেতে পারে।
নিচের কোডটি HTML5 হিসেবে সঠিকভাবে যাচাই হবে:
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>মনে রাখবেন:
<html> এবং <body> ট্যাগ বাদ দেওয়ার পরামর্শ দেয় না। এই ট্যাগগুলো বাদ দিলে DOM বা XML সফটওয়্যার ক্র্যাশ করতে পারে এবং পুরনো ব্রাউজারে (IE9) ভুল দেখাতে পারে।<head> ট্যাগ বাদ দেওয়া বেশ কিছুদিন ধরেই একটি সাধারণ প্রচলন।| ট্যাগ | বিবরণ |
|---|---|
| <head> | একটি ডকুমেন্ট সম্পর্কে তথ্য নির্ধারণ করে |
| <title> | একটি ডকুমেন্টের টাইটেল নির্ধারণ করে |
| <base> | একটি পেজের সব লিঙ্কের জন্য একটি ডিফল্ট ঠিকানা বা ডিফল্ট টার্গেট নির্ধারণ করে |
| <link> | একটি ডকুমেন্ট এবং একটি বাইরের রিসোর্সের মধ্যে সম্পর্ক নির্ধারণ করে |
| <meta> | একটি HTML ডকুমেন্ট সম্পর্কে মেটাডেটা নির্ধারণ করে |
| <script> | একটি ক্লায়েন্ট-সাইড স্ক্রিপ্ট নির্ধারণ করে |
| <style> | একটি ডকুমেন্টের জন্য স্টাইল তথ্য নির্ধারণ করে |