Semantic elements = elements with a meaning
সিমেন্টিক এলিমেন্ট = অর্থ সহ এলিমেন্ট
সিমেন্টিক এলিমেন্ট কি?
একটি সিমেন্টিক এলিমেন্ট ব্রাউজার এবং ডেভেলপার উভয়ের কাছে স্পষ্টভাবে এর অর্থ বর্ণনা করে।
সিমেন্টিক এলিমেন্ট নয় এমন কিছু এলিমেন্ট এর উদাহরণ: <div> এবং <span> এগুলো এদের ভেতরের কন্টেন্ট সম্পর্কে কোন ধারনাই দেয়না ।
কিছু সিমেন্টিক এলিমেন্ট এর উদাহরণ: <aside>, <form>, <table> এবং <article> এগুলো এদের ভেতরের কন্টেন্ট সম্পর্কে স্পষ্ট ধারণা দেয় ।
এইচটিএমএল এ সিমেন্টিক এলিমেন্ট
অনেক ওয়েবসাইট এ HTML Code গুলো এ রকম থাকে: <div id=”nav”> <div class=”header”> <div id=”footer”> যা নেভিগেশন, হেডার ও ফুটার বোঝানোর জন্য ব্যবহার করে (এটি পদ্ধতিটি HTML4 কিংবা আগের ভার্সন গুলোতে ব্যবহার করা হতো) ।
কিন্তু HTML5 এর পর থেকে কিছু সিমেন্টিক এলিমেন্ট এসেছে যেগুলো একটি ওয়েবপেজের বিভিন্ন অংশগুলো ডিফাইন করতে ব্যবহার করা হয়। নিচে এদের কিছু এলিমেন্ট দেয়া হলো :
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
সিমেন্টিক এলিমেন্ট এর উপারে আমাদের একটি ভিডিও টিউটোরিয়াল আছে । সেটি দেখে নিতে পারেন আপনি আর এর নিচে টেক্সট টিউটোরিয়াল ও দেয়া হলো।
এইচটিএমএল <section> এলিমেন্ট
<section> এলিমেন্ট টি একটি ডকুমেন্টের সেকশন ডিফাইন করে ।
W3C এর HTML Documentation অনুসারে
“A section is a thematic grouping of content, typically with a heading.”
অর্থাৎ section হল শিরোনাম সহ সামগ্রীর বিষয়বস্তুর গ্রুপিং
একটি ওয়েব পেজে সাধারনত কন্টেন্ট এর সুচনা, কন্টেন্ট এবং কন্টেন্টের থ্য গুলো আলাদা আলাদা ভাগে থাকে । এগুলোকে <section> tag এর মধ্যে আলাদা আলাদা করে রাখা হয় ।
উদাহরণ
<!DOCTYPE html> <html> <body> <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> <section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section> </body> </html>
এইচটিএমএল <article> এলিমেন্ট
<article> উপাদানটি স্বাধীন, স্ব-অন্তর্ভুক্ত সামগ্রী নির্দিষ্ট করে।
একটি <article> নিজস্বভাবে বোঝা উচিত, এবং এটি অন্য ওয়েব সাইটের কন্টেন্ট থেকে স্বাধীনভাবে বিতরণ করা উচিত। অর্থাৎ এর ভেতরের লেখাগুলো যেনো অন্য ওয়েবসাইটের লেখার বা কন্টেন্টের সাথে না মিলে যায় সেদিকে খেয়াল রাখা উচিত।
<article> যে যায়গায় ব্যবহার করা হয়
- Forum post
- Blog post
- Newspaper article
উদাহরন
<!DOCTYPE html> <html> <body> <h1>আর্টিকেল এলিমেন্ট </h1> <article> <h2>গুগল ক্রম </h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article> <h2>ফায়ারফক্স</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article> <h2>মাইক্রোসফ্ট এজ</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </body> </html>
<article> কে <section> এর নেস্টিং কিংবা উল্টোটা
<article> উপাদানটি স্বাধীন, স্ব-অন্তর্ভুক্ত সামগ্রী নির্দিষ্ট করে।
<section> উপাদানটি একটি ডকুমেন্টের সেকসন ডিফাইন করে।
এদের একটি আর একটির নেস্টিং হতে পারে কিন্তু এরা সরাসরি নিজেদের নেস্টেড হতে পারে না ।
আর তাই আপনি HTML পেজগুলো পাবেন <section> এর ভেতরে আছে <article> এলিমেন্ট টি কিংবা <article> এলিমেন্ট এর ভেতরে <section> ।
এইচটিএমএল <header> এলিমেন্ট
<header> উপাদান সূচনা বিষয়বস্তুর জন্য একটি ধারক বা নেভিগেশনাল লিঙ্কের সেট উপস্থাপন করে।
<header> এলিমেন্ট সাধারনত ধারন করে
- এক বা একাধিক হেডিং এলিমেন্ট এলিমেন্ট (<h1> – <h6>)
- সাইটের লোগো কিংবা আইকন
- আর্টিকেল এর লেখকের তথ্য
আপনি একটি ডকুমেন্টে অনেক বার <heading> এলিমেন্ট টি ব্যবহার করতে পারেন, তবে আপনি <footer>, <address> কিংবা অন্য আর একটি <header> এলিমেন্টের ভেতরে <heading> এলিমেন্ট নিতে পারবেন না ।
উদাহরন
<body>
<article>
<header>
<h1>What Does WHO Do?</h1>
<p>About WHO:</p>
</header>
<p>The World Health Organization is a specialized agency of the United Nations responsible
for international public health. The WHO Constitution, which establishes the agency's
governing structure and principles, states its main objective as "the attainment by all peoples of the
highest possible level of health"
</p>
</article>
</body>এইচটিএমএল <footer> এলিমেন্ট
<footer>উপাদান ডকুমেন্ট বা বিভাগের জন্য পাদলেখ বা ফুটার সংজ্ঞায়িত করে।
<footer> এলিমেন্ট সাধারনত ধারন করে
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
আপনি এক ডকুমেন্টের মধ্যে অনেক গুলো <footer> এলিমেন্ট ব্যবহার করতে পারেন প্রয়োজন অনুসারে ।
উদাহরন
<footer> <p>Author: Shariar Sarkar</p> <p><a href="mailto:[email protected]">[email protected]</a></p> </footer>
এইচটিএমএল <nav> এলিমেন্ট
<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> এলিমেন্টটি মুল লেখার বা কন্টেন্ট এর বাইরে কিছু সামগ্রীকে সংজ্ঞায়িত করে। যেমন সাইডবার
<aside> এলিমেন্টটি মুল কন্টেন্টের সাথে রিলেটেড কোন তথ্য ও প্রদান করে ।