এইচটিএমএল id অ্যাট্রিবিউট টি এইচটিএমএল এলিমেন্ট এর ইউনিক id প্রকাশ করে ।
আপনি একই id একাধিক এইচটিএমএল এলিমেন্ট এ ব্যবহার করতে পারবেন না ।
HTML id Attribute
id অ্যাট্রিবিউট টি একটি ইউনিক বা অনন্য আইডি নির্দিষ্ট করে। আর id attribute এর ভেলু একটি HTML Document এ অবশ্যই ইউনিক হবে । অর্থাৎ একই ডকুমেন্টে আইডির ভেলু একটাই হবে ।
<p id="london">London is the capital of England.</p>
class attribute এর মতো id attribute ও সিএসএস স্টাইল ও জাভাস্ক্রিপ্ট এর সিলেক্টর হিসেবে ব্যবহার হয়। প্রধান পার্থক্য হলো id unique হয় আর class multi-time ব্যবহার করা যায় ।
class এর style লেখার জন্য যেমন .(Dot) ব্যবহার করে class name দিয়ে সিএসএস লেখা হতো, তেমনি id এর জন্য #(hash character) এর পর id name ব্যবহার করে সিএসএস লেখা হয় ।
নিচের উদাহরণ এ আমরা একটি <p> element এর id নেম দিয়েছি “longon” এবং এর জন্য আমরা #logdon ধরে সিএসএস স্টাইল লিখেছি ।
<!DOCTYPE html>
<html>
<head>
<style>
#london {
background-color: lightGreen;
padding: 10px;
}
</style>
</head>
<body>
<h3> HTML id Attribute Style </h3>
<h2 class="city">London</h2>
<p id="london">London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
</body>
</html>id name (id attribute এর ভেলু) case sensitive!
id name এ অবশ্যই কমপক্ষে একটি character থাকবে এবং এর মধ্যে কোন white-spaces (ফাকা স্পেস) থাকবেনা ।
id ও class এর মধ্যে পার্থক্য
class name একটি এইচটিএমএল ডকুমেন্টে একাধিক বার ব্যবহার হতে পারে এবং পাশাপাশি একাধিক ক্লাস নেম ব্যবহার করা যায় । কিন্তু id name সব সময় ইউনিক হয় এবং পাশাপাশি একাধিক আইডি নেম ব্যবহার ও করা যায়না ।
ID name ধরে CSS লিখার সময় # (hash character ) ব্যবহার করা হয় ।
Class name ধরে CSS লিখার সময় . ( Dot) ব্যবহার করা হয় ।
<!DOCTYPE html>
<html>
<head>
<style>
#london {
background-color: lightGreen;
padding: 10px;
}
.city {
color:Orange;
}
</style>
</head>
<body>
<h3> HTML id and class Attribute Style </h3>
<p>.(dot) is used to select class name as silector line .city {} and # *(hash) is used to slelect id like #london {} </p>
<h2 class="city london">London</h2>
<p id="london">London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
</body>
</html>আমরা সিএসএস শেখার সময় আরো ক্লিয়ার হবো বিষয় টি
HTML Bookmark তৈরিতে ID র ব্যবহার
আমরা এর আগে লিংক বুকমার্ক এর টিউটোরিয়াল এ দেখেছিলাম
<a href="#C3">Jump to Chapter 3</a>
যেখাননে href এর ভেলু “#C3” যা আসলে একটি id name ছিলো এবং সেইটিতে পয়েন্ট করছিলো । বিষয় আর একবার দেখে নিতে পারেন লিংক বুকমার্ক থেকে ।
জাভাস্ক্রিপ্ট এ id এর ব্যবহার
id attribute এর ভেলু কে সিলেক্টর হিসেবে ব্যবহার করার জন্য getElementById() method টি ব্যবহার করা হয় ।
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>অধ্যায় সামারী
- একটি HTML Elements কে ইউনিক আকারে প্রকাশ করতে id attribute ব্যবহার হয়।
- id attribute এর ভেলু সব সময় ইউনিক হয়
- id attribute ব্যবহার হয় CSS ও JavaScript এ স্টাইল করার জন্য ও সিলেক্ট করার জন্য
- id attribute এর ভেলু কেস সেনসেটিভ
- HTML Bookmark তৈরিতেও id ব্যবহার হয়