HTML5 এর এলিমেন্ট এবং ট্যাগ

HTML5 হল HTML এর সর্বশেষ সংস্করণ যা ওয়েব ডেভেলপমেন্টকে আরও সহজ এবং আধুনিক করার জন্য বিভিন্ন নতুন এলিমেন্ট এবং ট্যাগ যুক্ত করেছে। HTML5 এর এলিমেন্ট এবং ট্যাগগুলো ওয়েব পেজের স্ট্রাকচার এবং কন্টেন্টকে সহজে ডিফাইন করতে সাহায্য করে। এখানে HTML5 এর কিছু গুরুত্বপূর্ণ এলিমেন্ট এবং তাদের ব্যাখ্যা দেওয়া হলো:

১. নতুন কন্টেন্ট এলিমেন্ট

HTML5 বিভিন্ন নতুন কন্টেন্ট এলিমেন্ট এনেছে যা ডকুমেন্টের স্ট্রাকচার পরিষ্কারভাবে ডিফাইন করতে সাহায্য করে:

<header>: ওয়েব পেজ বা একটি সেকশনের শিরোনাম অংশ নির্দেশ করে। সাধারণত এটি ন্যাভিগেশন লিঙ্ক বা শিরোনাম ধারণ করে।

<footer>: ওয়েব পেজ বা সেকশনের নিচের অংশ নির্দেশ করে, যেখানে কপিরাইট তথ্য, লিঙ্ক, এবং অন্যান্য তথ্য থাকতে পারে।

<nav>: নেভিগেশন লিঙ্কের একটি সেকশন নির্দেশ করে। এটি সাধারণত ওয়েবসাইটের মূল মেনু বা নেভিগেশন বার হিসেবে ব্যবহৃত হয়।

<section>: কন্টেন্টের একটি অংশ বা সেকশন নির্দেশ করে, যা লজিক্যাল বা থিম্যাটিক ইউনিট হতে পারে।

<article>: একটি স্বতন্ত্র কন্টেন্ট ব্লক নির্দেশ করে যা নিজের মধ্যে সম্পূর্ণ। যেমন ব্লগ পোস্ট, নিউজ আর্টিকেল, বা ফোরাম পোস্ট।

<aside>: মূল কন্টেন্টের সাথে সম্পর্কিত কিন্তু আলাদা কন্টেন্ট নির্দেশ করে। যেমন, সাইডবার বা রিলেটেড লিঙ্ক।

২. মিডিয়া এলিমেন্ট

HTML5 নতুন মিডিয়া এলিমেন্ট এনেছে যা ভিডিও এবং অডিও সহজে এম্বেড করতে সাহায্য করে:

<video>: ভিডিও কন্টেন্ট এম্বেড করতে ব্যবহৃত হয়। এটি কন্ট্রোল, প্লে, পজ, এবং অন্যান্য অ্যাট্রিবিউটের মাধ্যমে কাস্টমাইজ করা যায়।

<video controls>
   <source src="movie.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

<audio>: অডিও কন্টেন্ট এম্বেড করতে ব্যবহৃত হয়।

<audio controls>
   <source src="sound.mp3" type="audio/mpeg">
   Your browser does not support the audio tag.
</audio>

৩. ইমেজ ও ফিগার এলিমেন্ট

HTML5 ইমেজ এবং ক্যাপশনের জন্য নতুন এলিমেন্ট এনেছে:

<figure>: ফিগার কন্টেন্ট ধারণ করে, যেমন ছবি, চার্ট, ইলাস্ট্রেশন। এটি সাধারণত <figcaption> ট্যাগের সাথে ব্যবহার করা হয়, যা ফিগারের ক্যাপশন যোগ করতে সাহায্য করে।

<figure>
   <img src="image.jpg" alt="Sample Image">
   <figcaption>This is a sample image.</figcaption>
</figure>

৪. ইন্টারেক্টিভ এলিমেন্ট

HTML5 ইউজার ইন্টারঅ্যাকশনের জন্য কিছু নতুন এলিমেন্ট এনেছে:

<details> এবং <summary>: কন্টেন্ট ভিজিবল বা হাইডেবল করতে ব্যবহৃত হয়।

<details>
   <summary>More Information</summary>
   <p>This is the hidden content that shows when you click 'More Information'.</p>
</details>

<dialog>: ডায়লগ বক্স বা পপআপ উইন্ডো তৈরি করতে ব্যবহৃত হয়।

<dialog open>
   This is a dialog box.
</dialog>

৫. ফর্ম সংশ্লিষ্ট এলিমেন্ট

HTML5 ফর্মের জন্যও নতুন ইনপুট টাইপ এবং অ্যাট্রিবিউট এনেছে:

• <input type="email">: ইমেইল ইনপুট নেওয়ার জন্য ব্যবহৃত হয়।
• <input type="date">: তারিখ ইনপুট নেওয়ার জন্য ব্যবহৃত হয়।
• <input type="range">: একটি স্কেল বা রেঞ্জ ইনপুট দেওয়ার জন্য ব্যবহৃত হয়।

HTML5 এর এই নতুন ট্যাগ এবং এলিমেন্টগুলো ওয়েব পেজের স্ট্রাকচার ও ফাংশনালিটি বাড়াতে অনেক সাহায্য করে।

HTML5 এ Elements এবং Tags এর ভূমিকা খুবই গুরুত্বপূর্ণ, কারণ এগুলোই একটি ওয়েব পেজের স্ট্রাকচার এবং কন্টেন্ট তৈরি ও প্রদর্শন করে। HTML5 এর লক্ষ্য হল ওয়েব পেজের কন্টেন্ট আরও অর্থপূর্ণ ও গঠনমূলকভাবে প্রদর্শন করা, যাতে ব্রাউজার, সার্চ ইঞ্জিন, এবং অ্যাসিস্টিভ টেকনোলজি (যেমন স্ক্রিন রিডার) এই কন্টেন্ট সহজে বুঝতে এবং ইন্টারপ্রেট করতে পারে। নিচে HTML5 এ Elements এবং Tags এর ভূমিকা ব্যাখ্যা করা হলো:

১. স্ট্রাকচার ডিফাইন করা

HTML5 এ এলিমেন্ট এবং ট্যাগগুলো একটি ওয়েব পেজের মূল স্ট্রাকচার বা ফ্রেমওয়ার্ক ডিফাইন করতে সাহায্য করে। এই স্ট্রাকচারাল এলিমেন্টগুলো যেমন <header>, <footer>, <nav>, <section>, এবং <article>, পেজের বিভিন্ন অংশকে পরিষ্কারভাবে পৃথক এবং অর্থপূর্ণ করে তোলে।

উদাহরণস্বরূপ:

• <header>: পেজের বা সেকশনের শিরোনাম নির্দেশ করে।
• <footer>: পেজের নিচের অংশ বা ফুটার নির্দেশ করে, যা সাধারণত কপিরাইট তথ্য ধারণ করে।
• <nav>: নেভিগেশন মেনু বা লিঙ্ক নির্দেশ করে।

২. কন্টেন্টের সেম্যান্টিক অর্থ প্রদান করা

HTML5 এর সেম্যান্টিক এলিমেন্টগুলো, যেমন <article>, <aside>, <figure>, ইত্যাদি, কন্টেন্টের অর্থ এবং প্রসঙ্গ পরিষ্কারভাবে বোঝায়। এর ফলে সার্চ ইঞ্জিন এবং স্ক্রিন রিডার সহজে বোঝে কন্টেন্টটি কী ধরণের, যেমন এটি একটি আর্টিকেল, সাইড কন্টেন্ট, বা একটি ফিগার।

• <article>: মূল কন্টেন্ট যেমন ব্লগ পোস্ট বা নিউজ আর্টিকেল নির্দেশ করে, যা স্বতন্ত্রভাবে অর্থপূর্ণ।
• <aside>: মূল কন্টেন্টের সাথে সম্পর্কিত কিন্তু স্বতন্ত্র কন্টেন্ট নির্দেশ করে, যেমন সাইডবার বা রিলেটেড লিঙ্ক।
• <figure>: ইলাস্ট্রেশন, ছবি, বা চার্টের জন্য ব্যবহার করা হয়, যা ক্যাপশনসহ প্রদর্শিত হয়।

৩. ইন্টারঅ্যাকটিভিটি এবং মাল্টিমিডিয়া সাপোর্ট বৃদ্ধি করা

HTML5 এ নতুন ট্যাগ, যেমন <video>, <audio>, <canvas>, এবং <dialog>, ইউজার ইন্টারঅ্যাকশনের ক্ষেত্রে ভূমিকা রাখে। এগুলো ওয়েব পেজকে আরও ইন্টারঅ্যাকটিভ ও অ্যাট্রাক্টিভ করে তোলে এবং প্লাগইন ছাড়াই ভিডিও, অডিও, এবং অন্যান্য মাল্টিমিডিয়া কন্টেন্ট যোগ করার সুবিধা দেয়।

• <video> এবং <audio>: ব্রাউজারেই ভিডিও এবং অডিও ফাইল প্লে করার সুবিধা দেয়, যা পূর্বে প্লাগইন প্রয়োজন ছিল।
• <canvas>: গ্রাফিক্স এবং অ্যানিমেশন তৈরির জন্য ব্যবহার করা হয়, যা জাভাস্ক্রিপ্টের মাধ্যমে নিয়ন্ত্রিত হতে পারে।
• <dialog>: ডায়লগ বক্স বা মডাল উইন্ডো তৈরি করে, যা ইউজার ইন্টারঅ্যাকশনের অভিজ্ঞতা উন্নত করে।

৪. ফর্ম এবং ইনপুট ভ্যালিডেশনকে সহজ করা

HTML5 এ নতুন ইনপুট টাইপ এবং অ্যাট্রিবিউট যোগ করা হয়েছে যা ফর্ম তৈরিকে আরও সহজ করে তোলে এবং ইনপুট ভ্যালিডেশনকে ব্রাউজারেই ম্যানেজ করা যায়।

উদাহরণস্বরূপ:

• <input type="email"> এবং <input type="url">: নির্দিষ্ট ধরণের ইনপুট যেমন ইমেইল এবং URL সঠিকভাবে ভ্যালিডেট করতে সাহায্য করে।
• <input type="date">, <input type="range">: ইউজার ইন্টারফেসে সহজে ইনপুট দেওয়ার জন্য বিশেষভাবে তৈরি।

৫. অ্যাক্সেসিবিলিটি উন্নত করা

সেম্যান্টিক ট্যাগ এবং এলিমেন্টগুলো অ্যাক্সেসিবিলিটি বাড়ায়। স্ক্রিন রিডার বা অন্যান্য অ্যাসিস্টিভ টেকনোলজির জন্য সেম্যান্টিক ট্যাগগুলো কন্টেন্টকে আরও বুঝতে সহায়তা করে, যার ফলে দৃষ্টি প্রতিবন্ধী বা বিশেষ চাহিদাসম্পন্ন ইউজারদের ওয়েব পেজ ব্যবহার করা সহজ হয়।

HTML5 এর এলিমেন্ট এবং ট্যাগগুলো একটি ওয়েব পেজের গঠন, কন্টেন্ট, এবং ইন্টারঅ্যাকশনকে আরো আধুনিক, অর্থপূর্ণ এবং অ্যাক্সেসিবল করে তোলে। সেগুলো ব্রাউজার এবং সার্চ ইঞ্জিনের জন্য কন্টেন্ট সহজে ইন্টারপ্রেট করা এবং ব্যবহারকারীর জন্য একটি সুন্দর অভিজ্ঞতা তৈরি করার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।

HTML5 এ Block-level এবং Inline এলিমেন্টগুলো হলো এমন দুটি প্রধান ক্যাটাগরি, যেগুলো ওয়েব পেজে এলিমেন্টের প্রদর্শন পদ্ধতি এবং লেআউট ডিফাইন করে। প্রতিটি এলিমেন্ট কিভাবে অন্য এলিমেন্টের সাথে ইন্টারঅ্যাক্ট করবে, কতটুকু জায়গা নেবে, এবং কন্টেন্ট কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে। নিচে এই দুটি এলিমেন্ট সম্পর্কে বিস্তারিত আলোচনা করা হলো:

Block-level Elements

বৈশিষ্ট্য

• সম্পূর্ণ প্রস্থ নেয়: Block-level এলিমেন্ট স্বয়ংক্রিয়ভাবে পুরো প্রস্থ (width) নেয়, অর্থাৎ তারা তাদের প্যারেন্ট এলিমেন্টের যতটুকু জায়গা আছে ততটুকু দখল করে।
• নতুন লাইন শুরু করে: একটি Block-level এলিমেন্ট যুক্ত করলে, এটি স্বয়ংক্রিয়ভাবে একটি নতুন লাইন শুরু করে এবং পরবর্তী কন্টেন্ট বা এলিমেন্টগুলোকে নিচে ঠেলে দেয়।
• নেস্টিং এবং অন্যান্য ব্লক এলিমেন্ট ধারণ করতে পারে: এগুলো অন্য Block-level অথবা Inline এলিমেন্ট ধারণ করতে পারে।

উদাহরণসমূহ

HTML5 এ সাধারণ কিছু Block-level এলিমেন্ট হলো:

• <div>: একটি সাধারণ কন্টেইনার এলিমেন্ট যা ওয়েব পেজের একটি অংশ তৈরি করতে ব্যবহৃত হয়।
• <header>, <footer>, <section>, <article>, <aside>: এই সেম্যান্টিক ট্যাগগুলো HTML5 এর নতুন Block-level এলিমেন্ট, যা পেজের নির্দিষ্ট অংশ বা সেকশনকে ডিফাইন করে।
• <p>: প্যারাগ্রাফ তৈরি করতে ব্যবহৃত হয় এবং এটি একটি নতুন লাইন শুরু করে।
• <ul>, <ol>: আনঅর্ডার্ড এবং অর্ডার্ড লিস্টের জন্য ব্যবহৃত হয়।
• <h1> থেকে <h6>: শিরোনাম তৈরি করার জন্য ব্যবহৃত হয়, এগুলোও একটি নতুন লাইন শুরু করে।

উদাহরণ:

<div>
   <h1>This is a heading</h1>
   <p>This is a paragraph inside a div.</p>
</div>

উপরের উদাহরণে, <div>, <h1>, এবং <p> সকলেই Block-level এলিমেন্ট, যা নতুন লাইন শুরু করে এবং পুরো প্রস্থ দখল করে।

Inline Elements

বৈশিষ্ট্য

• শুধু প্রয়োজনীয় প্রস্থ নেয়: Inline এলিমেন্টগুলো শুধুমাত্র তাদের কন্টেন্ট অনুযায়ী প্রস্থ (width) নেয়, অর্থাৎ তারা পুরো লাইন দখল করে না।
• একই লাইনে থাকে: Inline এলিমেন্টগুলো অন্য Inline এলিমেন্টের সাথে এক লাইনে থাকে, তারা নতুন লাইন শুরু করে না।
• Block-level এলিমেন্ট ধারণ করতে পারে না: Inline এলিমেন্টগুলোর ভেতরে অন্য Block-level এলিমেন্ট রাখা যায় না, তবে অন্যান্য Inline এলিমেন্ট বা টেক্সট রাখা যায়।

উদাহরণসমূহ

HTML5 এ সাধারণ কিছু Inline এলিমেন্ট হলো:

• <span>: একটি সাধারণ Inline কন্টেইনার যা ছোট টুকরো টেক্সট বা অন্য Inline এলিমেন্টের স্টাইলিং বা গ্রুপিং করার জন্য ব্যবহৃত হয়।
• <a>: হাইপারলিঙ্ক তৈরি করার জন্য ব্যবহৃত হয়।
• <img>: ছবি এম্বেড করতে ব্যবহৃত হয়।
• <strong>, <em>, <b>, <i>: টেক্সটকে স্টাইল করতে ব্যবহৃত হয়, যেমন বোল্ড বা ইটালিক।
• <label>: ফর্ম ইনপুটের লেবেল হিসেবে ব্যবহৃত হয়।

উদাহরণ:

<p>This is a <a href="#">link</a> inside a paragraph.</p>

উপরের উদাহরণে, <a> একটি Inline এলিমেন্ট যা <p> এর মধ্যে রয়েছে। এটি একটি নতুন লাইন শুরু করে না, বরং প্যারাগ্রাফের বাকী টেক্সটের সাথে একই লাইনে থাকে।

Block-level এবং Inline Elements এর তুলনা

HTML5 এ Block-level এবং Inline এলিমেন্টগুলো পেজের স্ট্রাকচার এবং কন্টেন্টের প্রদর্শনের পদ্ধতি নির্ধারণে গুরুত্বপূর্ণ ভূমিকা পালন করে। এগুলোর সঠিক ব্যবহার ওয়েব পেজের লেআউট তৈরি, ডিজাইন করা, এবং রেস্পন্সিভিটি নিশ্চিত করতে সহায়ক।

HTML5 এ Semantic Elements এমন ট্যাগ বা এলিমেন্ট যা কন্টেন্টের উদ্দেশ্য এবং গঠন বোঝায়। এই এলিমেন্টগুলো ওয়েব পেজের স্ট্রাকচার পরিষ্কার করে এবং ব্রাউজার, সার্চ ইঞ্জিন, ও অ্যাসিস্টিভ টেকনোলজির (যেমন স্ক্রিন রিডার) জন্য পেজটি বোঝা সহজ করে। সেম্যান্টিক এলিমেন্টগুলো ওয়েব ডেভেলপারদের সাইটের কোডকে আরও অর্থপূর্ণ এবং অ্যাক্সেসিবল করতে সাহায্য করে। নিচে HTML5 এর কিছু গুরুত্বপূর্ণ সেম্যান্টিক এলিমেন্ট যেমন <header>, <footer>, <article>, <section>, <nav>, এবং <aside> সম্পর্কে আলোচনা করা হলো:

১. <header>

• বর্ণনা: একটি ওয়েব পেজ বা একটি সেকশনের শিরোনাম অংশ নির্দেশ করে।
• কন্টেন্ট: সাধারণত লোগো, শিরোনাম, নেভিগেশন মেনু বা সার্চ বারের মতো উপাদান থাকে।
• উপযোগিতা: একটি পেজের শুরুতে প্রয়োজনীয় তথ্য উপস্থাপন করে, যা ইউজারদের পেজ নেভিগেট করতে সাহায্য করে।

উদাহরণ:

<header>
   <h1>Website Title</h1>
   <nav>
       <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
       </ul>
   </nav>
</header>

২. <footer>

• বর্ণনা: পেজের বা একটি সেকশনের নিচের অংশ নির্দেশ করে, যেখানে সাধারণত কপিরাইট তথ্য, লিঙ্ক, এবং অন্যান্য সম্পর্কিত তথ্য থাকে।
• কন্টেন্ট: কপিরাইট নোটিশ, লিঙ্ক, এবং সামাজিক মিডিয়া আইকন থাকতে পারে।
• উপযোগিতা: একটি পেজের নিচের অংশে গুরুত্বপূর্ণ তথ্য ও নেভিগেশন সুবিধা দেয়।

উদাহরণ:

<footer>
   <p>© 2024 Your Website Name</p>
   <nav>
       <a href="#">Privacy Policy</a> | 
       <a href="#">Terms of Service</a>
   </nav>
</footer>

৩. <article>

• বর্ণনা: একটি স্বতন্ত্র কন্টেন্ট ব্লক নির্দেশ করে, যা নিজের মধ্যে পূর্ণাঙ্গ এবং অন্য অংশ থেকে স্বতন্ত্রভাবে পড়া বা পুনরায় ব্যবহৃত হতে পারে।
• কন্টেন্ট: ব্লগ পোস্ট, নিউজ আর্টিকেল, ফোরাম পোস্ট, বা যেকোনো ধরনের কন্টেন্ট যা নিজের মধ্যে সম্পূর্ণ।
• উপযোগিতা: বড় সেকশন বা কন্টেন্ট ব্লকগুলোকে গঠনমূলকভাবে উপস্থাপন করতে সহায়ক।

উদাহরণ:

<article>
   <h2>HTML5 এর গুরুত্ব</h2>
   <p>HTML5 ওয়েব ডেভেলপমেন্টে বড় পরিবর্তন নিয়ে এসেছে...</p>
</article>

৪. <section>

• বর্ণনা: কন্টেন্টের একটি থিম্যাটিক বা লজিক্যাল অংশ নির্দেশ করে। এটি একটি পেজের বিভিন্ন অংশকে গঠনমূলকভাবে বিভক্ত করতে ব্যবহৃত হয়।
• কন্টেন্ট: একটি সেকশনে বিভিন্ন এলিমেন্ট যেমন হেডিং, প্যারাগ্রাফ, এবং অন্যান্য সেম্যান্টিক এলিমেন্ট থাকতে পারে।
• উপযোগিতা: কন্টেন্টকে গোষ্ঠীভুক্ত করে এবং সাইটের স্ট্রাকচারকে পরিষ্কারভাবে উপস্থাপন করে।

উদাহরণ:

<section>
   <h2>Our Services</h2>
   <p>We offer a variety of services to our clients...</p>
</section>

৫. <nav>

• বর্ণনা: নেভিগেশন লিঙ্কের একটি সেকশন নির্দেশ করে, যা সাধারণত একটি ওয়েবসাইটের মূল মেনু বা নেভিগেশন বার হিসেবে ব্যবহৃত হয়।
• কন্টেন্ট: নেভিগেশন লিঙ্কের তালিকা থাকে, যা ইউজারদের বিভিন্ন পেজ বা সেকশনে নেভিগেট করতে সাহায্য করে।
• উপযোগিতা: একটি ওয়েব পেজের নেভিগেশন সিস্টেমকে গঠনমূলক এবং অ্যাক্সেসিবল করে।

উদাহরণ:

<nav>
   <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About Us</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contact</a></li>
   </ul>
</nav>

৬. <aside>

• বর্ণনা: মূল কন্টেন্টের সাথে সম্পর্কিত কিন্তু স্বতন্ত্র কন্টেন্ট নির্দেশ করে, যা সাধারণত সাইডবারের তথ্য, রিলেটেড লিঙ্ক, বা বিজ্ঞাপন হতে পারে।
• কন্টেন্ট: যেকোনো ধরনের কন্টেন্ট থাকতে পারে যা মূল কন্টেন্টের পরিপূরক।
• উপযোগিতা: সহায়ক বা অতিরিক্ত তথ্য প্রদর্শনের জন্য একটি সাইড সেকশন প্রদান করে।

উদাহরণ:

<aside>
   <h3>Related Articles</h3>
   <ul>
       <li><a href="#">HTML Basics</a></li>
       <li><a href="#">CSS Flexbox Guide</a></li>
   </ul>
</aside>

HTML5 এর সেম্যান্টিক এলিমেন্টগুলো ওয়েব পেজের স্ট্রাকচার, কন্টেন্ট এবং নেভিগেশন পরিষ্কারভাবে ডিফাইন করতে সাহায্য করে। এই এলিমেন্টগুলো শুধু পেজকে আরও গঠনমূলক করে না, বরং অ্যাক্সেসিবিলিটি উন্নত করে এবং সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) উন্নত করে, ফলে ওয়েব পেজগুলো আরও কার্যকরী এবং ইউজার ফ্রেন্ডলি হয়।

HTML5 এ Global Attributes এবং Custom Data Attributes ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে। এগুলো এলিমেন্টগুলোর আচরণ, স্টাইলিং এবং ডাটা সংরক্ষণ ও ব্যবস্থাপনার ক্ষেত্রে সহায়ক। এখানে প্রতিটির ভূমিকা ও ব্যবহারের বিষয়ে বিস্তারিত আলোচনা করা হলো:

Global Attributes

Global Attributes হলো এমন অ্যাট্রিবিউট যা HTML এর প্রায় সব এলিমেন্টের সাথে প্রযোজ্য। এগুলো প্রতিটি এলিমেন্টের জন্য অতিরিক্ত স্টাইলিং, আচরণ এবং ব্যবহারযোগ্যতার নিয়ন্ত্রণ প্রদান করে। HTML5 এর Global Attributes নিচে উল্লেখ করা হলো:

সাধারণ Global Attributes এবং তাদের ভূমিকা:

class

• ব্যবহার: একটি বা একাধিক CSS ক্লাস নির্ধারণ করতে ব্যবহৃত হয়, যা এলিমেন্টের স্টাইলিং বা জাভাস্ক্রিপ্ট দ্বারা কন্ট্রোল করতে সহায়ক।
• উদাহরণ:

<p class="text-large">This is a paragraph.</p>

id

• ব্যবহার: একটি ইউনিক আইডি সেট করতে ব্যবহৃত হয়, যা সঠিকভাবে এলিমেন্টকে চিহ্নিত করতে এবং CSS অথবা জাভাস্ক্রিপ্টের মাধ্যমে নিয়ন্ত্রণ করতে সাহায্য করে।
• উদাহরণ:

<div id="header">Header content goes here</div>

style

• ব্যবহার: ইনলাইন স্টাইলিং যোগ করতে ব্যবহৃত হয়, যা এলিমেন্টের জন্য CSS কাস্টমাইজেশনের সুযোগ দেয়।
• উদাহরণ:

<h1 style="color: red;">This is a heading.</h1>

title

• ব্যবহার: একটি টুলটিপ বা বর্ণনা যোগ করতে ব্যবহৃত হয়, যা মাউস হোভার করলে প্রদর্শিত হয়।
• উদাহরণ:

<a href="#" title="Click to visit the homepage">Home</a>

lang

• ব্যবহার: এলিমেন্টের ভাষা নির্ধারণ করতে ব্যবহৃত হয়। এটি ব্রাউজার এবং স্ক্রিন রিডারগুলোর জন্য সাহায্যকারী।
• উদাহরণ:

<p lang="en">This is an English paragraph.</p>

hidden

• ব্যবহার: এলিমেন্টটিকে লুকানো রাখতে ব্যবহৃত হয়, যাতে এটি পেজে প্রদর্শিত না হয়।
• উদাহরণ:

<div hidden>This content is hidden.</div>

tabindex

• ব্যবহার: এলিমেন্টের ট্যাব নেভিগেশনের অর্ডার নির্ধারণ করতে ব্যবহৃত হয়।
• উদাহরণ:

<button tabindex="1">First Button</button>
<button tabindex="2">Second Button</button>

draggable

• ব্যবহার: এলিমেন্টটি ড্র্যাগযোগ্য কি না তা নির্ধারণ করতে ব্যবহৃত হয়।
• উদাহরণ:

<img src="image.jpg" draggable="true">

contenteditable

• ব্যবহার: একটি এলিমেন্ট এডিটেবল হবে কি না তা নির্ধারণ করতে ব্যবহৃত হয়।
• উদাহরণ:

<div contenteditable="true">You can edit this text.</div>

Custom Data Attributes

Custom Data Attributes বা data-* Attributes হলো HTML5 এর একটি বিশেষ ফিচার, যা এলিমেন্টে কাস্টম ডাটা সংরক্ষণ করার সুযোগ দেয়। এগুলো ব্যবহার করে ডেভেলপাররা এলিমেন্টে অতিরিক্ত তথ্য সংরক্ষণ করতে পারেন, যা জাভাস্ক্রিপ্টের মাধ্যমে সহজে অ্যাক্সেস ও ব্যবস্থাপনা করা যায়।

বৈশিষ্ট্য:

• প্রতিটি Custom Data Attribute এর নামের শুরুতে data- থাকে এবং এর পর একটি কাস্টম নাম যোগ করা হয়।
• এগুলো এলিমেন্টে এমন তথ্য সংরক্ষণ করতে ব্যবহৃত হয় যা ইউজার ইন্টারফেসের অংশ নয়, কিন্তু জাভাস্ক্রিপ্টের মাধ্যমে প্রোগ্রাম্যাটিকালি ব্যবহৃত হয়।

উদাহরণ:

<div data-product-id="12345" data-category="electronics">
    Product Information
</div>

জাভাস্ক্রিপ্টের মাধ্যমে এই ডাটা অ্যাক্সেস করার উপায়:

const productDiv = document.querySelector('[data-product-id]');
const productId = productDiv.getAttribute('data-product-id');
console.log(productId); // Output: 12345

Custom Data Attributes এর সুবিধা:

1. কাস্টম ডাটা স্টোর করা: এগুলোর মাধ্যমে HTML এ ডাটা যুক্ত করা যায়, যা জাভাস্ক্রিপ্টের মাধ্যমে ব্যবহৃত বা ম্যানিপুলেট করা যায়।
2. কোডের গঠন ও পাঠযোগ্যতা উন্নত করা: ডাটা অ্যাট্রিবিউট ব্যবহার করে কোডে ডেটা সংরক্ষণ এবং অ্যাক্সেসের একটি গঠনমূলক এবং পরিষ্কার উপায় পাওয়া যায়।
3. ব্রাউজার ও ফ্রন্টএন্ড ফ্রেমওয়ার্কে সমর্থন: বেশিরভাগ ব্রাউজার এবং ফ্রন্টএন্ড লাইব্রেরি (যেমন React, Angular) Custom Data Attributes ভালোভাবে সমর্থন করে, যা ফ্রন্টএন্ড ডেভেলপমেন্টে সহায়ক।

উদাহরণ:

<button data-action="delete" data-item-id="5678">Delete Item</button>

জাভাস্ক্রিপ্টে:

const button = document.querySelector('button');
const action = button.dataset.action;
const itemId = button.dataset.itemId;
console.log(`Action: ${action}, Item ID: ${itemId}`);
// Output: Action: delete, Item ID: 5678

সারসংক্ষেপ

• Global Attributes HTML এলিমেন্টগুলোর আচরণ, স্টাইল, এবং ফাংশন কাস্টমাইজ করতে সহায়ক।
• Custom Data Attributes ডেভেলপারদের HTML এলিমেন্টে অতিরিক্ত তথ্য সংরক্ষণ এবং সেই তথ্য সহজে অ্যাক্সেস করতে জাভাস্ক্রিপ্ট ব্যবহার করতে দেয়।

এই অ্যাট্রিবিউটগুলো HTML5 কে আরও গঠনমূলক, কার্যকরী, এবং অ্যাক্সেসিবল করতে সাহায্য করে, যা ওয়েব ডেভেলপমেন্টের প্রক্রিয়াকে সহজ করে।