সিমেন্টিক এলিমেন্টের নাম দেখেই এলিমেন্টের কন্টেন্টগুলো সম্পর্কে আমরা ধারনা পাবো। এইচটিএমএল(৫) এর সিমেন্টিক এলিমেন্ট সকল আধুনিক ব্রাউজারে সাপোর্ট করে।
সিমেন্টিক এলিমেন্ট
নন-সিমেন্টিক এলিমেন্টঃ < div > এবং < span > এলিমেন্ট তাদের কন্টেন্ট সম্পর্কে কিছুই বর্ণনা করে না।
সিমেন্টিক এলিমেন্টঃ < form >, < table >, এবং < img > এলিমেন্টগুলো দেখলেই বুঝতে পারি এর কন্টেন্টে কি থাকবে।
নতুন সিমেন্টিক এলিমেন্ট
নেভিগেশন, হেডার এবং ফুটার তৈরি করার জন্য অধিকাংশ ওয়েব সাইটে এইচটিএমএল কোড এইভাবে লেখা হয়ঃ < div id="nav" >, < div class="header" >, < div id="footer" >
একটি ওয়েব পেজের বিভিন্ন অংশকে ডিফাইন করার জন্য এইচটিএমএল(৫) এ নতুন সিমেন্টিক এলিমেন্টকে ব্যবহার করা হয়ঃ
উপরের ছবিতে বর্তমান ওয়েব পেজে ব্যবহৃত সিমেন্টিক এলিমেন্ট সমূহ তুলে ধরা হয়েছে।
< figure > এবং < figcaption > এলিমেন্ট
এইচটিএমএল(৫) এর < figure > এলিমেন্ট ব্যবহার করে ইমেজ এবং ইমেজের ক্যাপশন একসাথে দেখানো হয়।
kt_satt_skill_example_id=1755
< img > এলিমেন্ট দ্বারা ইমেজকে বুঝায় এবং < figcaption > ইমেজের ক্যাপশনকে বুঝায়।
< section > এলিমেন্ট
ডকুমেন্টের কন্টেন্টকে আলাদা করার জন্য < section > এলিমেন্ট ব্যবহার করা হয়।
kt_satt_skill_example_id=1756
সিমেন্টিক এলিমেন্টের নেস্টেড ব্যবহার
এইচটিএমএল(৫) এ, < article > এলিমেন্ট অন্যান্য এলিমেন্টের একটি স্বয়ংসম্পূর্ণ ব্লক হিসেবে ডিফাইন করা হয়। < section > এলিমেন্ট অন্যান্য এলিমেন্টের একটি ব্লক হিসেবে ডিফাইন করা হয়।
তার মানে, আমরা এদের একটির মধ্যে অন্যটিকে ব্যবহার করতে পারবো। আমরা < section > এলিমেন্টের মধ্যে < article > এলিমেন্ট ব্যবহার করতে পারি অথবা < article > এলিমেন্টের মধ্যে < section > এলিমেন্ট ব্যবহার করতে পারি। এটি একান্তই নিজের ইচ্ছার উপর নির্ভরশীল।
< header > এলিমেন্ট
< header > এলিমেন্ট একটি ডকুমেন্ট বা সেকশনের জন্য একটি হেডার নির্ধারণ করে। একটি ডকুমেন্টে অনেকগুলো < header > এলিমেন্ট থাকতে পারে।
নিচে < header > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=1777
<footer> এলিমেন্ট
< footer > এলিমেন্ট একটি ডকুমেন্ট অথবা একটি সেকশনের জন্য ফুটার নির্ধারণ করে। ফুটারে সাধারনত ডকুমেন্টের লেখক, কপিরাইট তথ্য, ব্যবহারের শর্তাবলীর জন্য লিঙ্ক, যোগাযোগের তথ্য ইত্যাদি দেওয়া থাকে। একটি ডকুমেন্টে একাধিক < footer > এলিমেন্ট থাকতে পারে। নিচে < footer > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=1778
< nav > এলিমেন্ট
< nav > এলিমেন্ট নেভিগেশন লিংকের সেট নির্ধারণ করে। < nav > এলিমেন্ট অধিক সংখ্যক নেভিগেশন লিংকের জন্য ব্যবহার করা হয়।
তবে একটি ডকুমেন্টের সকল লিংকে < nav > এলিমেন্টের মধ্যে রাখতে হয় না। নিচে < nav > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=1779
< aside > এলিমেন্ট
< aside > এলিমেন্ট তার পাশের কিছু কন্টেন্টকে নির্দেশ করে। aside কন্টেন্টগুলো তার পার্শ্ববর্তী কন্টেন্টগুলোর সাথে সম্পর্কযুক্ত থাকে।
নিচে < aside > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ
shortcode
এইচটিএমএল(৫) সিমেন্টিক এলিমেন্টের তালিকা
নিচে এইচটিএমএল(৫) এর নতুন সিমেন্টিক এলিমেন্টের একটি তালিকা দেওয়া হলোঃ
| ট্যাগ | বর্ণনা |
|---|---|
< article > | একটি আর্টিকেল বুঝায় |
< aside > | একটি পেজ কন্টেন্টের পাশের কন্টেন্টকে বুঝায় |
< details > | ইউজারকে দেখানোর জন্য অতিরিক্ত তথ্যকে বুঝায় |
< figcaption > | < figure > এলিমেন্টের জন্য একটি ক্যাপশন সেট করে |
< figure > | ক্যাপশনসহ একটি এলিমেন্টকে বুঝায় |
< footer > | ডকুমেন্ট অথবা সেকশনের ফুটার নির্দেশ করে |
< header > | ডকুমেন্ট অথবা সেকশনের হেডার নির্দেশ করে |
< main > | ডকুমেন্টের প্রধান কন্টেন্টকে বুঝায় |
< mark > | টেক্সটকে চিহ্নিত করার জন্য ব্যবহার হয় |
< nav > | নেভিগেশন লিংকের জন্য ব্যবহার হয় |
< section > | ডকুমেন্টে সেকশন তৈরি করে |
< summary > | < details > এলিমেন্টের জন্য একটি হেডিং ডিফাইন করে |
< time > | তারিখ/সময় নির্দেশ করে |
Read more
