হেড সেকশনে ব্যবহৃত ট্যাগগুলি
এই প্রবন্ধটি হেড সেকশনে ব্যবহৃত ট্যাগগুলি ব্যাখ্যা করে।
এর মাধ্যমে হেড সেকশনে ব্যবহৃত ট্যাগসমূহ যেমন <link>, <script>, <style> ব্যাখ্যা করা হয়েছে।
YouTube Video
হেড সেকশনে ব্যবহৃত ট্যাগগুলি
<title> ট্যাগ
1<title>Document Title</title><title>ট্যাগ ডকুমেন্টের শিরোনাম সংজ্ঞায়িত করে। এই শিরোনামটি ব্রাউজারের ট্যাবে প্রদর্শিত হয় এবং বুকমার্ক ও অনুসন্ধানের ফলাফলে ব্যবহৃত হয়।
<link> ট্যাগ
<link>ট্যাগটি বাহ্যিক সম্পদগুলিকে বর্তমান ডকুমেন্টের সাথে সংযোগ করতে ব্যবহৃত হয়। এটি সাধারণত বাহ্যিক CSS ফাইল সংযোগ করতে ব্যবহৃত হয় তবে আইকন এবং অন্যান্য বাহ্যিক সম্পদের জন্যও ব্যবহৃত হতে পারে।
<link> ট্যাগের rel অ্যাট্রিবিউট
rel অ্যাট্রিবিউটটি <link> ট্যাগের মধ্যে লিঙ্ক করা সম্পদ এবং বর্তমান ডকুমেন্টের মধ্যে সম্পর্ক নির্দিষ্ট করতে ব্যবহৃত হয়। rel অ্যাট্রিবিউটের জন্য অনেক ধরনের মান রয়েছে, তবে এখানে আমরা বিশেষভাবে গুরুত্বপূর্ণ এবং ঘন ঘন ব্যবহৃতগুলোর ব্যাখ্যা করব।
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheetএকটি বাহ্যিক স্টাইলশিট সংযোগ করতে ব্যবহৃত হয়।
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"ব্রাউজারের ট্যাব বা বুকমার্কে প্রদর্শিত আইকনটি সংজ্ঞায়িত করে। সঠিক ফেভিকন নির্দিষ্ট করে, সাইটের ব্র্যান্ডিং এবং ভিজ্যুয়াল স্বীকৃতি উন্নত হয়।
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preloadপৃষ্ঠার রেন্ডারিং শুরু হওয়ার আগে সম্পদগুলি পূর্বে লোড করতে ব্যবহৃত হয়। এটি বিশেষভাবে কার্যকরী হয় যেখানে সময় গুরুত্বপূর্ণ যেমন ফন্ট বা বড় ইমেজ। এটি কর্মক্ষমতা উন্নত করে এবং ব্যবহারকারীর অভিজ্ঞতা সমৃদ্ধ করে।
canonical
1<link rel="canonical" href="https://example.com/page.html">canonicalএকটি পৃষ্ঠার মূল সংস্করণ সম্পর্কে সার্চ ইঞ্জিনকে জানাতে ব্যবহৃত হয়। ডুপ্লিকেট কন্টেন্টের ক্ষেত্রে, মূল URL নির্দেশ করা সার্চ ইঞ্জিন র্যাঙ্কিংকে SEO প্রেক্ষাপট থেকে দৃঢ় করতে সহায়তা করে এবং কন্টেন্ট ঠিক মতো সূচক করতে নিশ্চিত করে।
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternateআলাদা ভাষা বা ফরম্যাটের পৃষ্ঠা সার্চ ইঞ্জিন এবং ব্রাউজারকে নির্দেশ করতে ব্যবহৃত হয়। বহুভাষিক সাইটে, আপনি প্রতিটি ভাষা সংস্করণের জন্য URL নির্দিষ্ট করতেhreflangঅ্যাট্রিবিউটের সাথে ব্যবহার করে ব্যবহারকারীদের প্রাসঙ্গিক ভাষায় পৃষ্ঠা প্রদান করতে পারেন।
manifest
1<link rel="manifest" href="/manifest.json">manifestব্রাউজারকে একটি ম্যানিফেস্ট ফাইল সরবরাহ করে যা একটি PWA (প্রোগ্রেসিভ ওয়েব অ্যাপ) এর কনফিগারেশন তথ্য ধারণ করে। এই ফাইলে অ্যাপ আইকন, থিম রঙ এবং প্রদর্শন মোডের মতো তথ্য রয়েছে, যা মোবাইল ডিভাইসে PWA ইনস্টল এবং চালাতে সাহায্য করে।
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- বাহ্যিক রিসোর্স উল্লেখ করার সময়, পূর্বে ডোমেইনের DNS রেজোলিউশন সম্পন্ন করলে পৃষ্ঠার লোডের গতি বাড়তে পারে। যেসব পৃষ্ঠায় অনেক বাহ্যিক রিসোর্স থাকে বা যেখানে দ্রুত ইউজার অভিজ্ঞতা চাওয়া হয় সেখানে এটি বিশেষভাবে কার্যকর।
<style> ট্যাগ
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style><style>ট্যাগটি অভ্যন্তরীণ স্টাইল শীট সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটি পৃষ্ঠার উপাদানগুলিতে CSS শৈলী প্রয়োগ করতে ব্যবহৃত হয়, বাহ্যিক ফাইল ব্যবহার না করেও CSS লিখতে সক্ষম করে।
<script> ট্যাগ
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script><script>ট্যাগটি HTML ডকুমেন্টে জাভাস্ক্রিপ্ট কোড এম্বেড করতে ব্যবহৃত হয়। আপনি বাহ্যিক জাভাস্ক্রিপ্ট ফাইলও সংযুক্ত করতে পারেন, যা পৃষ্ঠার গতিশীল আচরণ নিয়ন্ত্রণ করে।srcঅ্যাট্রিবিউট ব্যবহার করে স্ক্রিপ্ট ফাইল নির্ধারণ করুন।
async এবং defer অ্যাট্রিবিউটগুলি
<script> ট্যাগ দুটি অ্যাট্রিবিউট সমর্থন করে, async এবং defer, যা স্ক্রিপ্ট লোডিং ও এক্সিকিউশনের সময়কালকে প্রভাবিত করে। সাধারণত, স্ক্রিপ্টগুলি ব্রাউজার দ্বারা ক্রমানুসারে প্রক্রিয়াকৃত হয়, কিন্তু এই অ্যাট্রিবিউটগুলি ব্যবহার করলে পৃষ্ঠার কার্যক্ষমতা এবং লোডিং অভিজ্ঞতা উন্নত হতে পারে।
async অ্যাট্রিবিউট
1<script src="script.js" async></script>asyncঅ্যাট্রিবিউট ব্যবহারের মাধ্যমে স্ক্রিপ্ট অ্যাসিঙ্ক্রোনাস ভাবে লোড করা যায়। ব্রাউজার অন্যান্য রিসোর্সের সাথে সমান্তরালে স্ক্রিপ্ট লোড করে এবং লোডিং সম্পন্ন হওয়া মাত্র এটি কার্যকর করে।asyncপ্রধানত স্বতন্ত্র স্ক্রিপ্টগুলির জন্য উপযুক্ত এবং ব্যবহার করা হয় যখন স্ক্রিপ্ট অন্যান্য স্ক্রিপ্ট বা DOM লোডিংয়ের উপর নির্ভর করে না।
defer অ্যাট্রিবিউট
1<script src="script.js" defer></script>deferঅ্যাট্রিবিউট ব্যবহারের মাধ্যমে স্ক্রিপ্ট অ্যাসিঙ্ক্রোনাস ভাবে লোড করা যায় তবে HTML পার্সিং সম্পন্ন হওয়ার পরে কার্যকর করা হয়। স্ক্রিপ্ট কার্যকর হওয়া পৃষ্ঠার প্রদর্শনকে বাধাগ্রস্ত করে না, ফলে এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।deferকার্যকর হয় যখন স্ক্রিপ্টগুলি DOM পুরোপুরি লোড হওয়ার পরে কার্যকর হওয়া প্রয়োজন। উদাহরণস্বরূপ, এটি যথাযথ যখন আপনি চান পুরো লেআউট এবং পৃষ্ঠার উপাদানগুলি লোড হওয়ার পরে স্ক্রিপ্ট কার্যকর হবে।
CORS নীতি এবং crossorigin অ্যাট্রিবিউট
বাহ্যিক স্ক্রিপ্ট লোড করার সময়, Same-Origin নীতির উপর ভিত্তি করে সুরক্ষা সীমাবদ্ধতা আরোপিত হতে পারে। এজাতীয় ক্ষেত্রে, রিসোর্স শেয়ারিং সক্ষম করার জন্য crossorigin অ্যাট্রিবিউট ব্যবহার করা যেতে পারে।
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>crossorigin অ্যাট্রিবিউটটি নিম্নলিখিত দুটি মান ধারণ করতে পারে:।
anonymous: পরিচয়পত্র অন্তর্ভুক্ত না করে রিকোয়েস্ট পাঠায়।use-credentials: পরিচয়পত্র অন্তর্ভুক্ত করে রিকোয়েস্ট পাঠায়।
type অ্যাট্রিবিউট
<script> ট্যাগ স্ক্রিপ্টের ধরন নির্ধারণ করতে type অ্যাট্রিবিউট ব্যবহার করতে পারে। ডিফল্টভাবে, জাভাস্ক্রিপ্ট ব্যবহার করা হয়, কিন্তু আপনি নির্দিষ্ট কিছু স্ক্রিপ্টের ধরনও নির্ধারণ করতে পারেন (যেমন, মডিউল টাইপ জাভাস্ক্রিপ্ট বা টেমপ্লেট ভাষা)।
জাভাস্ক্রিপ্ট মডিউল
1<script type="module" src="module.js"></script>-
ECMAScript 2015 (ES6) থেকে শুরু করে, জাভাস্ক্রিপ্ট মডিউলগুলি প্রবর্তিত হয়েছে, যা কোডকে মডিউলগুলিতে ভাগ করার অনুমতি দেয় এবং পুনরায় ব্যবহারযোগ্যতা বাড়ায়।
type="module"নির্ধারণ করে, আপনি স্ক্রিপ্টকে একটি মডিউল হিসেবে বিবেচনা করতে পারেন। -
importএবংexportব্যবহার করে মডিউলগুলো অন্য মডিউলে বিভক্ত করা যেতে পারে।
অজাভাস্ক্রিপ্ট স্ক্রিপ্ট
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- জাভাস্ক্রিপ্ট ছাড়া অন্যান্য স্ক্রিপ্টগুলিকেও
<script>ট্যাগের মধ্যে নির্দিষ্ট করা যেতে পারে। উদাহরণস্বরূপ, JSON-LD এর মত গঠিত ডেটা বর্ণনা করার সময়type="application/ld+json"ব্যবহার করুন। এখানে, JSON-LD একটি ফরম্যাট যা একটি ওয়েব পৃষ্ঠায় ডেটা গঠন করে, যা সার্চ ইঞ্জিন এবং অন্যান্য অ্যাপ্লিকেশনগুলি ডেটা আরও গভীরভাবে বুঝতে সক্ষম করে।
<script> ট্যাগ ব্যবহারের নোট
- স্ক্রিপ্টের ক্রম: স্ক্রিপ্টগুলি যেসব লাইব্রেরির উপর নির্ভর করে, তাদের নির্ভরশীল স্ক্রিপ্টগুলির আগে লোড করতে হবে। উদাহরণস্বরূপ, jQuery ব্যবহারের স্ক্রিপ্টগুলি jQuery নিজেই লোড হওয়ার পরে লোড করতে হবে।
- পারফরম্যান্স অপ্টিমাইজেশন: পৃষ্ঠার লোড গতি প্রভাবিত করা এড়াতে, প্রয়োজনের সময়েই কেবল স্ক্রিপ্ট লোড করুন এবং অপ্রয়োজনীয় স্ক্রিপ্ট চালানো এড়িয়ে চলুন।
- নিরাপত্তা ব্যবস্থা: বাহ্যিক স্ক্রিপ্টগুলি ব্যবহারের সময়, তারা যাতে বিশ্বাসযোগ্য উৎসগুলো থেকে লোড হয় তা নিশ্চিত করুন যাতে দূষিত স্ক্রিপ্ট এম্বেড করা না যায়।
<base> ট্যাগ
1<base href="https://example.com/"><base>ট্যাগটি নথির সকল আপেক্ষিক URL এর জন্য বেস URL নির্ধারণ করে।hrefঅ্যাট্রিবিউটে নির্দিষ্ট URL লিঙ্ক এবং চিত্রের আপেক্ষিক পথের জন্য বেস হয়ে ওঠে। এটি সাধারণত প্রতি পৃষ্ঠায় শুধুমাত্র একবার ব্যবহৃত হয়।
<noscript> ট্যাগ
1<noscript>Your browser does not support JavaScript!</noscript><noscript>ট্যাগটি সেই বিষয়বস্তুটি সংজ্ঞায়িত করে যা ব্রাউজারে জাভাস্ক্রিপ্ট অক্ষম থাকলে প্রদর্শিত হয়। এটি এমন পরিবেশে বিকল্প বিষয়বস্তু প্রদানের জন্য ব্যবহৃত হয় যেখানে জাভাস্ক্রিপ্ট সমর্থিত নয়।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।