এইচটিএমএল <meta> ট্যাগ
定义和用法
<meta>
标签定义关于 HTML 文档的元数据。元数据是关于数据的数据(信息)。
<meta>
标签始终位于 元素 内,通常用于指定字符集、页面描述、关键词、文档作者和视口设置:
元数据不会显示在页面上,但可以被机器解析。
ব্রাউজার (কিভাবে কনটেন্ট দেখা হবে বা পাতা পুনর্লোড করা হবে)、সার্চ ইঞ্জিন (কীওয়ার্ডস) এবং অন্যান্য নেটওয়ার্ক সার্ভিসগুলি মেটাডাটা ব্যবহার করে
সুঝাওয়া:meta এলিমেন্টগুলির বিভিন্ন প্রয়োগ আছে এবং একটি HTML ডকুমেন্টে একাধিক meta এলিমেন্ট থাকতে পারে
সুঝাওয়া:দ্বারা <meta>
ট্যাগ,ওয়েবসাইট ডিজাইনারকে ভিউপোর্ট (যা ব্যবহারকারী ওয়েবসাইটে দেখতে পাবে) নিয়ন্ত্রণ করার একটি পদ্ধতি আছে (নিচের "ভিউপোর্ট সেটিং" উদাহরণ দেখুন)。
মনতে করুন:প্রত্যেক meta এলিমেন্টকে একটি উদ্দেশ্যের জন্যই ব্যবহার করা হয়।যদি একইসঙ্গে একাধিক উদ্দেশ্য ব্যবহার করতে হয়,তবে head এলিমেন্টে একাধিক meta এলিমেন্ট যোগ করা হবে。
অন্যান্য পড়ার জন্য:
HTML টিউটোরিয়াল:HTML হেডার
HTML DOM রেফারেন্স ম্যানুয়াল:Meta অবজেক্ট
উদাহরণ
<head> <meta charset="UTF-8"> <meta name="description" content="মুক্ত ওয়েব টিউটোরিয়াল"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Bill Gates"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
প্রতিভূতি
প্রতিভূতি | মান | বর্ণনা |
---|---|---|
charset | অক্ষরসমষ্টি | HTML ডকুমেন্টের অক্ষর এনকোডিং নির্দিষ্ট করে |
content | লিখিত | দ্বারা সংযুক্ত হয় http-equiv বা name এটির মানকে নির্দিষ্ট করে |
http-equiv |
|
content প্রতিমাণ্ডলের তথ্য/মানকে HTTP হেডার হিসেবে প্রদান করুন |
name |
|
মেটাডাটার নাম নির্দিষ্ট করে |
সার্বভৌম বৈশিষ্ট্য
<meta>
ট্যাগটি সহ HTML-এর সার্বভৌম বৈশিষ্ট্য.
meta ইলেমেন্টটির তিনটি প্রধান ব্যবহার হল:
- নাম/মান মেটাডাটা যুক্ত করা
- চারিত্রিক এনকোডিং ঘোষণা
- সিমুলেশন হিসেবে HTTP হেডার ফিল্ড
1: বিভিন্ন নাম/মান মেটাডাটা যুক্ত করা
meta ইলেমেন্টটি নাম/মান যুক্ত মেটাডাটা নির্দিষ্ট করতে ব্যবহৃত হয়, তার জন্য name এবং content প্রতিমাণ্ডলগুলোকে ব্যবহৃত হবে。
সার্চ ইঞ্জিনের জন্য শব্দলিপি নির্দিষ্ট করুন:
<meta name="keywords" content="HTML, CSS, JavaScript">
ওয়েবসাইটটির সম্পর্কিত বর্ণনা নির্দিষ্ট করুন:
<meta name="description" content="Free Web tutorials for HTML and CSS">
পৃষ্ঠার লেখক নির্দিষ্ট করুন:
<meta name="author" content="John Doe">
ভিউপোর্ট সেট করে, ওয়েবসাইটটির বিভিন্ন ডিভাইসের উপর ভালো দেখাবে:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2: চারিত্রিক এনকোডিং ঘোষণা
charset প্রতিমাণ্ডল ব্যবহার করে, এই পৃষ্ঠা যুক্তরাষ্ট্রীয় চিহ্ন এনকোডিং UTF-8-এ দাঁড়াবে বলে ঘোষণা করুন:
<meta charset="UTF-8">
3: সিমুলেশন হিসেবে HTTP হেডার ফিল্ড
http-equiv প্রতিমাণ্ডল এবং content প্রতিমাণ্ডল ব্যবহার করে, পত্রটিকে 30 সেকেন্ড পর পুনরায় লোড করুন:
<meta http-equiv="refresh" content="30">
HTML5-এর পরিবর্তন
charset প্রতিমাণ্ডলটি HTML5-এ নতুনভাবে উপস্থাপন করা হয়েছে。
HTML4-এর http-equiv প্রতিমাণ্ডলটি কোনও অসীম সংখ্যক ভিন্ন মান নিতে পারে, কিন্তু HTML5-এ শুধুমাত্র এই পৃষ্ঠায় উল্লেখিত মানগুলোকেই ব্যবহৃত হবে。
HTML4-এর scheme প্রতিমাণ্ডলটি HTML5-এ আর ব্যবহৃত হয় না。
এছাড়া, এখন মেটা ইলেমেন্টটি ওয়েবসাইটটির জন্য ব্যবহৃত ভাষা নির্দিষ্ট করার জন্য ব্যবহৃত হয় না。
ভিউপোর্ট সেট করতে পারবেন
HTML5 একটি পদ্ধতি উপস্থাপন করেছে যাতে ওয়েব ডিজাইনাররা <meta>
ট্যাগকে অন্তর্ভুক্ত করবেন
আপনি সকল ওয়েবসাইটে নিচের <meta>
ভিউপোর্ট ইলেমেন্ট:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
এটি ব্রাউজারকে পৃষ্ঠা মাপ ও সমস্ত পরিমাপ নিয়ন্ত্রণ করার জন্য নির্দেশ প্রদান করে।
width=device-width
অংশ পৃষ্ঠার প্রস্থত্ব সেট করে, যা সংযুক্ত সংযোগের প্রস্থত্ব অনুযায়ী হবে (সংযুক্ত সংযোগ থেকে নির্ভরশীল)。
ব্রাউজার প্রথমবার পৃষ্ঠা লোড করার সময়initial-scale=1.0
অংশীদারিত্ব ইনিয়াল জামড় পরিমাণ সেট করা হয়েছে。
নিচে বিনা ভিউপয়েন্ট meta ট্যাগ সহ ওয়েবসাইট এবং সহ ভিউপয়েন্ট meta ট্যাগ সহ ওয়েবসাইটের উদাহরণ দেওয়া হয়েছে:
সুঝাওয়া:আপনি এই পৃষ্ঠা মোবাইল কিংবা ট্যাবলেট ব্যবহার করে ভ্রমণ করছেন তবে, তাহলে নিচের দুটো লিঙ্কটি ক্লিক করে ভিন্নতা দেখতে পারেন。
ডিফল্ট CSS সেটিং
কোনো সমর্থন নেই。
ব্রাউজার সমর্থন
চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
---|---|---|---|---|
চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
সমর্থন | সমর্থন | সমর্থন | সমর্থন | সমর্থন |