সিমান্টিকস (Semantics) হলো একটি ভাষায় শব্দ ও বাক্যাংশের অর্থ নিয়ে অধ্যয়ন।
সিমান্টিক এলিমেন্ট = অর্থপূর্ণ এলিমেন্ট।
একটি সিমান্টিক এলিমেন্ট ব্রাউজার এবং ডেভেলপার — উভয়ের কাছেই তার অর্থ স্পষ্টভাবে বর্ণনা করে।
নন-সিমান্টিক এলিমেন্টের উদাহরণ: <div> এবং <span> - এর কনটেন্ট সম্পর্কে কিছুই বলে না।
সিমান্টিক এলিমেন্টের উদাহরণ: <form>, <table>, এবং <article> - এর কনটেন্ট স্পষ্টভাবে নির্ধারণ করে।
অনেক ওয়েবসাইটে নেভিগেশন, হেডার এবং ফুটার বোঝাতে এই ধরনের HTML কোড থাকে: <div id="nav"> <div class="header"> <div id="footer">।
একটি ওয়েব পেজের বিভিন্ন অংশ নির্ধারণ করতে HTML5-এ নতুন সিমান্টিক এলিমেন্ট রয়েছে:
<section> এলিমেন্ট একটি ডকুমেন্টে একটি সেকশন নির্ধারণ করে।
W3C-এর HTML5 ডকুমেন্টেশন অনুযায়ী: "একটি সেকশন হলো কনটেন্টের একটি থিমভিত্তিক গ্রুপিং, সাধারণত একটি হেডিং সহ।"
একটি হোমপেজকে সাধারণত ভূমিকা, কনটেন্ট এবং যোগাযোগের তথ্যের জন্য আলাদা আলাদা সেকশনে ভাগ করা যেতে পারে।
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section><article> এলিমেন্ট স্বতন্ত্র, স্বয়ংসম্পূর্ণ কনটেন্ট নির্ধারণ করে।
একটি আর্টিকেল নিজে থেকেই অর্থবহ হওয়া উচিত, এবং ওয়েবসাইটের বাকি অংশ থেকে আলাদাভাবে পড়া সম্ভব হওয়া উচিত।
<article> এলিমেন্ট যেসব ক্ষেত্রে ব্যবহার করা যায় তার উদাহরণ:
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article><article> এলিমেন্ট স্বতন্ত্র, স্বয়ংসম্পূর্ণ কনটেন্ট নির্ধারণ করে।
<section> এলিমেন্ট একটি ডকুমেন্টে একটি সেকশন নির্ধারণ করে।
এই সংজ্ঞাগুলো দিয়ে কি আমরা ঠিক করতে পারি কীভাবে এই এলিমেন্টগুলো নেস্ট করতে হবে? না, পারি না!
তাই, ইন্টারনেটে আপনি এমন HTML পেজ পাবেন যেখানে <section> এলিমেন্টের ভেতরে <article> এলিমেন্ট আছে, আবার <article> এলিমেন্টের ভেতরে <section> এলিমেন্টও আছে।
এমনকি এমন পেজও পাবেন যেখানে <section>-এর ভেতরে <section>, এবং <article>-এর ভেতরে <article> আছে।
একটি সংবাদপত্রের উদাহরণ: স্পোর্টস সেকশনের স্পোর্টস <article>-এর মধ্যে প্রতিটি <article>-এ একটি টেকনিক্যাল সেকশন থাকতে পারে।
<header> এলিমেন্ট একটি ডকুমেন্ট বা সেকশনের হেডার নির্ধারণ করে।
<header> এলিমেন্ট ভূমিকামূলক কনটেন্টের একটি কন্টেইনার হিসেবে ব্যবহার করা উচিত।
একটি ডকুমেন্টে একাধিক <header> এলিমেন্ট থাকতে পারে।
নিচের উদাহরণে একটি আর্টিকেলের জন্য একটি হেডার নির্ধারণ করা হয়েছে:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article><footer> এলিমেন্ট একটি ডকুমেন্ট বা সেকশনের ফুটার নির্ধারণ করে।
একটি <footer> এলিমেন্টে তার প্যারেন্ট এলিমেন্ট সম্পর্কিত তথ্য থাকা উচিত।
একটি ফুটারে সাধারণত ডকুমেন্টের লেখক, কপিরাইট তথ্য, ব্যবহারের শর্তাবলীর লিঙ্ক, যোগাযোগের তথ্য ইত্যাদি থাকে।
একটি ডকুমেন্টে একাধিক <footer> এলিমেন্ট থাকতে পারে।
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer><nav> এলিমেন্ট নেভিগেশন লিঙ্কের একটি সেট নির্ধারণ করে।
লক্ষ্য করুন, একটি ডকুমেন্টের সব লিঙ্ক <nav> এলিমেন্টের ভেতরে থাকা উচিত নয়। <nav> এলিমেন্ট শুধুমাত্র প্রধান নেভিগেশন লিঙ্কের ব্লকের জন্য ব্যবহৃত হয়।
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav><aside> এলিমেন্ট এমন কিছু কনটেন্ট নির্ধারণ করে, যা যেই কনটেন্টের ভেতরে এটি রাখা হয়েছে তার থেকে আলাদা (যেমন একটি সাইডবার)।
<aside>-এর কনটেন্ট আশেপাশের কনটেন্টের সাথে সম্পর্কিত হওয়া উচিত।
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>একটি ফিগার ক্যাপশনের উদ্দেশ্য হলো একটি ইমেজে ভিজ্যুয়াল ব্যাখ্যা যোগ করা।
HTML5-এ, একটি ইমেজ এবং একটি ক্যাপশনকে একটি <figure> এলিমেন্টে একসাথে গ্রুপ করা যায়:
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure><img> এলিমেন্ট ইমেজ নির্ধারণ করে, <figcaption> এলিমেন্ট ক্যাপশন নির্ধারণ করে।
HTML4-এ, ডেভেলপাররা এলিমেন্ট স্টাইল করতে নিজেদের মতো id/class নাম ব্যবহার করতেন: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav ইত্যাদি।
এর ফলে সার্চ ইঞ্জিনের পক্ষে সঠিক ওয়েব পেজ কনটেন্ট শনাক্ত করা অসম্ভব হয়ে পড়ত।
নতুন HTML5 এলিমেন্ট (<header> <footer> <nav> <section> <article>) দিয়ে এটি সহজ হয়ে যাবে।
W3C অনুযায়ী, একটি সিমান্টিক ওয়েব: "অ্যাপ্লিকেশন, প্রতিষ্ঠান এবং কমিউনিটি জুড়ে ডেটা শেয়ার ও পুনর্ব্যবহার করার সুযোগ দেয়।"
নিচে HTML5-এর নতুন সিমান্টিক এলিমেন্টগুলোর একটি বর্ণানুক্রমিক তালিকা দেওয়া হলো।
লিঙ্কগুলো আমাদের সম্পূর্ণ HTML5 রেফারেন্সে নিয়ে যাবে।