আপনার ওয়েবসাইটে HTML <head> এলিমেন্ট ব্যবহার শিখুন।
HTML <head> এলিমেন্ট আপনার ওয়েব পেজের মেটাডেটা (তথ্য) এর জন্য একটি কন্টেইনার, যেমন পেজ টাইটেল, স্টাইলস, এবং স্ক্রিপ্টস।
<head> এলিমেন্টের ভিতরের কন্টেন্ট প্রায়শই মেশিনগুলো (যেমন ব্রাউজার) দ্বারা পড়া ও প্রসেস করা হয়, আপনার সাইট ভিজিটররা দ্বারা নয়।
<head> এলিমেন্টকে <header> এলিমেন্টের সাথে গুলিয়ে ফেলবেন না, যা ভিন্ন উদ্দেশ্যে সার্ভ করে।
<head> এলিমেন্ট ওপেনিং <html> ট্যাগের ঠিক নিচে, এবং ওপেনিং <body> ট্যাগের ঠিক আগে রাখা হয়:
<!DOCTYPE html>
<html>
<head>
<!-- Contains Metadata primarily for machine processing -->
</head>
<body></body>
</html>
নিচের HTML এলিমেন্টগুলো <head> এলিমেন্টের ভিতরে রাখা যায়:
- <title>
- <link>
- <style>
<meta>- <script>
<base>- <noscript>
উদাহরণ
আসুন <head> এলিমেন্টের সাথে কিছু সাধারণত ব্যবহৃত মেটাডেটা এলিমেন্টের ব্যবহার দেখি।
এলিমেন্ট</h3>
<p><code class="language-text"><title></code> এলিমেন্ট আপনার HTML ডকুমেন্টের টাইটেল ডিফাইন করে, যা ব্রাউজারের পেজ ট্যাবে প্রদর্শিত হয়:</p>
<pre class="language-html"><code class="language-html"><!DOCTYPE html>
<html>
<head>
<title>Document title</title>
</head>
<body></body>
</html></code></pre>
<p>আপনি যেকোনো ওয়েবসাইটের পেজ ট্যাবে মাউস হোভার করে কিছু সেকেন্ড ধরে রাখলে, পুরো পেজ টাইটেল সহ একটি ছোট পপ-আপ দেখবেন।</p>
<h3 id="the-style-element" style="position:relative;"><style> এলিমেন্ট</h3>
<p><code class="language-text"><style></code> এলিমেন্ট আপনার HTML ডকুমেন্টের স্টাইলিং ইনফরমেশন ধারণ করে (টাইপোগ্রাফি, স্পেসিং, কালার, অ্যানিমেশন, ইত্যাদি) CSS-এ লিখিত:</p>
<pre class="language-html"><code class="language-html"><!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<style type="text/css">
body { background-color: red; }
p { font-size: 18px; line-height: 1.5; }
</style>
</head>
<body></body>
</html></code></pre>
<h3 id="the-link-element" style="position:relative;"><link> এলিমেন্ট</h3>
<p>HTML ডকুমেন্টে স্টাইল প্রয়োগ করার আধুনিক পদ্ধতি হলো এক্সটার্নাল CSS স্টাইলশিট ইম্পোর্ট করা, <code class="language-text"><link></code> এলিমেন্ট দিয়ে:</p>
<pre class="language-html"><code class="language-html"><!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<link href="/styles/main.css" rel="stylesheet" />
</head>
<body></body>
</html></code></pre>
<p>জানা ভালো: আপনি যদি একই ডকুমেন্টে <code class="language-text"><style></code> এবং <code class="language-text"><link></code> উভয়ই ব্যবহার করেন, তবে স্টাইলগুলো আপনি ডকুমেন্টে যে ক্রমে ইনক্লুড করেছেন সেটি অনুযায়ী প্রয়োগ হবে। CSS ক্যাসকেড করে, তাই যেটি সবচেয়ে নিচে আছে (উপরে থেকে নিচে) সেটি আগের স্টাইলগুলো ওভাররাইড করবে, যদি সেগুলো একই HTML এলিমেন্টকে অ্যাড্রেস করে।</p>
<h3 id="the-script-element" style="position:relative;"><script> এলিমেন্ট</h3>
<p><code class="language-text"><script></code> এলিমেন্ট দুটি ভিন্ন পদ্ধতিতে JavaScript এক্সিকিউট করতে ব্যবহৃত হয়:</p>
<ol>
<li>JavaScript কোড সরাসরি আপনার ডকুমেন্টে এম্বেড করে (যেমন <code class="language-text"><style></code> এলিমেন্টে দেখেছেন)।</li>
<li><code class="language-text">src</code> অ্যাট্রিবিউট দিয়ে এক্সটার্নাল JavaScript স্ক্রিপ্ট ফাইল ইম্পোর্ট করে।</li>
</ol>
<p>JavaScript কোড সরাসরি ডকুমেন্টে এম্বেড করা:</p>
<pre class="language-html"><code class="language-html"><!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<script>
// Make background color red
document.body.style.backgroundColor = "red"
</script>
</head>
<body></body>
</html></code></pre>
<p>এক্সটার্নাল JavaScript ফাইল ইম্পোর্ট করা:</p>
<pre class="language-html"><code class="language-html"><!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<script src="/scripts/main.js"></script>
</head>
<body></body>
</html></code></pre>
</article>
<div class="ad5">
<script language='javascript' src='/ad/w.js'></script>
</div>
<section id="turn-page" class="t-over">
<div class="f-start f-align">
<i><img loading='lazy' src="https://bd.wsxdn.com/css/img/sanjiao.svg" alt="ত্রিভুজ"></i>
<a class='LinkPrevArticle' href='https://bd.wsxdn.com/ge064y/hf651z/202203/1006054549.html' >HTML ক্যারেক্টার এস্কেপিং: রিজার্ভড ক্যারেক্টার সঠিকভাবে দেখানোর পদ্ধতি</a>
</div>
<div class="f-start f-align">
<i><img loading='lazy' src="https://bd.wsxdn.com/css/img/sanjiao.svg" alt="ত্রিভুজ"></i>
<a class='LinkNextArticle' href='https://bd.wsxdn.com/ge064y/hf651z/202203/1006054551.html' >HTML <script> এলিমেন্ট ব্যবহার: ইনলাইন vs এক্সটার্নাল JavaScript, defer অপ্টিমাইজেশন</a>
</div>
</section>
</div>
<aside class="box-r">
<section class="box42">
<ol>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054537.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML <figcaption> এলিমেন্ট ব্যবহার করার পদ্ধতি">HTML <figcaption> এলিমেন্ট ব্যবহার করার পদ্ধতি</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054539.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML Defer Attribute ব্যবহার: স্ক্রিপ্ট লোডিং অপ্টিমাইজেশন">HTML Defer Attribute ব্যবহার: স্ক্রিপ্ট লোডিং অপ্টিমাইজেশন</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054540.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML Target Attribute ব্যবহার: লিংক নতুন ট্যাবে খোলার পদ্ধতি">HTML Target Attribute ব্যবহার: লিংক নতুন ট্যাবে খোলার পদ্ধতি</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054542.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML <meta> এলিমেন্ট ব্যবহার: SEO, Viewport, Robots ট্যাগ গাইড">HTML <meta> এলিমেন্ট ব্যবহার: SEO, Viewport, Robots ট্যাগ গাইড</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054545.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML Lists (<ul>, <ol>, <dl>) ব্যবহার করার পূর্ণ গাইড">HTML Lists (<ul>, <ol>, <dl>) ব্যবহার করার পূর্ণ গাইড</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054546.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML <br> এলিমেন্ট ব্যবহার: লাইন ব্রেক যোগ করার সঠিক পদ্ধতি">HTML <br> এলিমেন্ট ব্যবহার: লাইন ব্রেক যোগ করার সঠিক পদ্ধতি</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054551.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML <script> এলিমেন্ট ব্যবহার: ইনলাইন vs এক্সটার্নাল JavaScript, defer অপ্টিমাইজেশন">HTML <script> এলিমেন্ট ব্যবহার: ইনলাইন vs এক্সটার্নাল JavaScript, defer অপ্টিমাইজেশন</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054552.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML <style> এলিমেন্টের ব্যবহার পদ্ধতি">HTML <style> এলিমেন্টের ব্যবহার পদ্ধতি</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054554.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML <link> এলিমেন্টের ব্যবহার পদ্ধতি">HTML <link> এলিমেন্টের ব্যবহার পদ্ধতি</p>
</a>
</li>
<li>
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054555.html" class="f-start">
<span></span>
<p class="r-over r-over-2" title="HTML <span> এলিমেন্টের ব্যবহার পদ্ধতি">HTML <span> এলিমেন্টের ব্যবহার পদ্ধতি</p>
</a>
</li>
</ol>
</section>
</aside>
</section>
<section class="box13 content box44">
<ol class="f-between">
<li class="ibox">
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054544.html" class="i-text">
<p class="r-over r-over-2">HTML <noscript> এলিমেন্ট ব্যবহার: JavaScript ডিজেবল থাকলে কন্টেন্ট দেখানো</p>
</a>
</li>
<li class="ibox">
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006054553.html" class="i-text">
<p class="r-over r-over-2">HTML <title> এলিমেন্টের ব্যবহার পদ্ধতি</p>
</a>
</li>
<li class="ibox">
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006063875.html" class="i-text">
<p class="r-over r-over-2">HTML-এ required অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন?</p>
</a>
</li>
<li class="ibox">
<a href="https://bd.wsxdn.com/ge064y/hf651z/202203/1006064182.html" class="i-text">
<p class="r-over r-over-2">HTML-এ এলিমেন্টের মান কীভাবে যোগ করবেন?</p>
</a>
</li>
</ol>
</section>
<ul class="types box23 content f-start">
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/ca644u/' target="_self">C প্রোগ্রামিং</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mk645f/' target="_self">C++</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/hf646z/' target="_self">Redis</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/fd647x/' target="_self">Bash প্রোগ্রামিং</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/db648w/' target="_self">Python</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/vs649n/' target="_self">Java</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/tr650l/' target="_self">তথ্যশালা</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/hf651z/' target="_self">HTML</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mj652e/' target="_self">JavaScript</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/ki653c/' target="_self">প্রোগ্রামিং</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/bz654t/' target="_self">CSS</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/zx655s/' target="_self">Ruby</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/nl656f/' target="_self">SQL</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/sq657k/' target="_self">iOS</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/qo658j/' target="_self">Android</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/vt659n/' target="_self">MongoDB</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/us660m/' target="_self">MySQL</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/by661t/' target="_self">C#</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/mk665e/' target="_self">PHP</a></li>
<li><a class='childclass' href='https://bd.wsxdn.com/ge064y/he671z/' target="_self">SQL Server</a></li>
</ul>
<footer>
<section class="msg f-center content">
<span class="f-start">
কপিরাইট ©
<a href="https://bd.wsxdn.com">https://bd.wsxdn.com</a>
সমস্ত অধিকার সংরক্ষিত
</span>
</section>
</footer>
</body>
</html>
