X

X

X

HTML5 এ অর্থবহ ইলামেন্ট (Semantic Elements)


Semantic বলতে বোঝায় অর্থবহ ইলামেন্ট কে। যেমন, ধরুণ p দিয়ে প্যারাগ্রাফ বোঝায়, div বলতে ডিভিশন বোঝায়। HTML5 এ এরকম আরও কিছু নতুন ট্যাগ বা ইলামেন্ট যুক্ত করা হয়েছে, যেগুলো আরো অধিক অর্থবহ।

Semantic elements = অর্থসহ elements


Semantic Element বলতে কি বোঝায়?

সিমানটিক ইলামেন্ট ব্রাউজার, ব্যবহারকারী, ডেভেলপার এবং সার্চ ইঞ্জিন সবার জন্য অর্থবহ ট্যাগ ব্যবহার করে, ফলে এটি সবার জন্য সুবিধাজনক হয়।
non-semantic element এর উদাহরণ: <div> and <span> – এরা কি ধরণের কন্টেন্ট ব্যবহার করে সে সম্পর্কে কোনো ধারণা প্রদান করে না।

semantic element -এর উদাহরণ: <form>, <table>, and <article> – সঠিকভাবে ধারণা প্রদান করে যে এরা কি ধরণের কন্টেন্ট ধারণ করে।


Browser Support

Yes Yes Yes Yes Yes

HTML5 semantic element সমূহ সকল আধুনিক ব্রাউজারে সাপোর্ট করে।

যদি ব্রাউজার নতুন এবং অপরিচিত ইলামেন্ট সাপোর্ট না করে তবে ব্রাউজারকে নির্দেশনা দিয়ে বোঝানো যায়, কিভাবে এই ইলামেন্টগুলোকে সাপোর্ট করানো যায়।
আরও বিস্তারিত জানুন HTML5 Browser Support থেকে।


HTML5 এ নতুন Semantic Element সমূহ

অনেক ওয়েবসাইটে এরকম HTML code থাকে : <div id=”nav”> <div class=”header”> <div id=”footer”>
navigation, header, এবং footer নির্দেশ করার জন্য ব্যবহার করে।

একটি ওয়েব পেজের বিভিন্ন অংশকে সঠিকভাবে উপস্থাপণ করার জন্য HTML5 এসব নতুন ইলামেন্ট ব্যবহার করে।

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 Semantic Elements

HTML5 <section> Element

<section> element দ্বারা ওয়েব পেজের সেকশন বর্ণনা করা হয়।

W3C এর HTML5 documentation অনুসারে: “A section is a thematic grouping of content, typically with a heading.”

একটি হোমপেজ স্বাভাবিবকভাবে introduction, content, এবং contact information ইত্যাদি সেকশন বিভক্ত হতে পারে।

Code Example

<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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 <article> Element

<article> ইলামেন্ট দিয়ে আর্টিকেল কন্টেইনার ইলামেন্ট তৈরি করা হয়।

যেখানে <article> element-কে ব্যবহার করা যেতে পারে:

  • Forum post
  • Blog post
  • Newspaper article

Code Example

<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> element দিয়ে independent এবং self-contained content প্রকাশ করা হয়।

<section> element দিয়ে ডকুমেন্টের সেকশন বর্ণনা করা হয়।

ইন্টারনেটে অনেক ওয়েবপেজে দেখবেন সেকশনের ভেতরে আর্টিকেল অথবা আর্টিকেলের ভেতরে সেকশনের প্রচুর ব্যবহার রয়েছে। আবার সেকশনের ভেতরে সেকশন এবং আর্টিকেলের ভেতরে আর্টিকেলের প্রচুর ব্যবহার পাবেন।

সংবাদ পত্রিকার উদাহরণ: স্পোর্ট সেকশনে স্পোর্ট আর্টিকেল থাকতে পারে। আবার ওই আর্টিকেলে আরও অনেক উপ স্পোর্ট সেকশন থাকতে পারে।

HTML5 <header> Element

ডকুমেন্টে হেডার তৈরি করার জন্য <header> element ব্যবহার করা হয়। প্রারম্ভিক কন্টেন্ট উপস্থাপণ করার জন্য হেডার ইলামেন্ট ব্যবহার করা হয়।

একই ডকুমেন্টে একাধিক <header> element থাকতে পারে।

নিচে একটি আর্টিকেলের জন্য হেডার ইলামেন্টের ব্যবহার দেখানো হলো:

Code Example

<header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 <footer> Element

<footer> element দিয়ে ডকুমেন্টের ফুটার তৈরি করা হয়। ফুটার ইলামেন্টে সাধারণত যোগাযোগের ঠিকানা, কপিরাইট তথ্য, গুরুত্বপূর্ণ কোনো তথ্য সংক্ষেপে উপস্থাপণ করা হয়। একই পেজে একাধিক ফুটার ইলামেন্ট থাকতে পারে।

Code Example

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 <nav> Element

নেভিগেশন লিংক তৈরি করার জন্য <nav> element ব্যবহার করা হয়। নেভিগেশন লিংক বলতে বোঝায়, যে লিংকগুলোতে ক্লিক করলে এক পেজ থেকে আরেক পেজে যাওয়া যায়। অথবা একই পেজের অন্য অংশে ফোকাস করা যায়।

তবে মনে রাখবেন, একটি পেজের সব লিংক <nav> element এর ভিতরে রাখা উচিৎ নয়। কেবলমাত্র ওয়েবসাইটের মূল লিংকগুলোকে নেভিগেশন ব্লক এর মধ্যে রাখা উচিৎ। এটিকে সবসময় এমনভাবে ডিজাইন করা উচিৎ যাতে ব্যবহারকারী খুব সহজে আপনার অন্যান্য পেজগুলোকে খুজে পায়।

Code Example

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 <aside> Element

মূল কন্টেন্ট এর পাশে আরও কিছু কন্টেন্ট উপস্থাপণের জন্য <aside> element ব্যবহার করা হয়। এটি দিয়ে অনেকক্ষেত্রে সাইডবার তৈরি করা হয়। এর কন্টেন্টগুলো মূল কন্টেন্ট এর সাথে সম্পর্কিত হওয়া উচিৎ।

Code Example

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML5 <figure> এবং <figcaption> Element

কোনো ছবিতে দৃশ্যমান ব্যাখ্যা প্রদান করার জন্য figure caption ব্যবহার করা হয়। HTML5 এ কোনো ছবি এবং তার ক্যাপশনা বা শিরোনামকে একই সাথে গ্রুপ আকারে উপস্থাপণ করা যায়।

Code Example

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<img> element দিয়ে ছবি উপস্থাপণ করা হয়। এবং,  <figcaption> element দিয়ে তার ক্যাপশন উপস্থাপণ করা হয়।


Semantic Element ব্যবহার করা উচিৎ?

HTML4-এ ডেভেলপাররা তাদের নিজস্ব id/class নামের সাথে স্টাইল যুক্ত করে header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav ইত্যাদি ব্যবহার করতো।

এগুলো ব্যবহার করে সার্চ ইঞ্জিনগুলো খুব সহজে ওয়েব পেজ থেকে কন্টেন্ট খুজে পেতো।

HTML5 এর এসব নতুন element গুলো (<header> <footer> <nav> <section> <article>) ব্যবহার করার ফলে এই কাজটি আরও সহজ হয়েছে।

W3C এর বক্তব্য অনুসারে Semantic Web : “Allows data to be shared and reused across applications, enterprises, and communities.”


HTML5 এ Semantic Element সমূহ

নিচে HTML5 এ যুক্ত নতুন Semantic ইলামেন্টগুলোকে উপস্থাপণ করা হলো।

HTML5 Reference এ আপনি সকল সিমানটিক ইলামেন্টের যথাযথ বর্ণনা পাবেন।   বিস্তারিত জানতে চাইলে অবশ্যই ভিজিট করবেন।

ট্যাগ বর্ণনা
<article> এটি দ্বারা আর্টিকেল বর্ণনা করা হয়।
<aside> মূল কন্টেন্ট এর পার্শ্ববর্তী কন্টেন্ট প্রকাশ করার জন্য ব্যবহৃত হয়।
<details> অতিরিক্ত কন্টেন্ট উপস্থাপণের জন্য ব্যবহৃত হয়, যেটিকে ব্যবহারকারী দেখতে পারে আবার লুকিয়ে রাখতে পারে।
<figcaption> <figure> element এর ক্যাপশন তৈরিতে ব্যবহৃত হয়।
<figure> self-contained content উপস্থাপণে ব্যবহৃত হয়। যেমন, illustrations, diagrams, photos, code listings ইত্যাদি।
<footer> কোনো document বা section এর ফুটার তৈরিতে ব্যবহৃত হয়।
<header> কোনো document বা section এর হেডার তৈরিতে ব্যবহৃত হয়।
<main> কোনো document এর মূল কন্টেন্ট উপস্থাপণে ব্যবহৃত হয়।
<mark> marked/highlighted text উপস্থাপণে ব্যবহৃত হয়।
<nav> navigation link তৈরিতে ব্যবহৃত হয়।
<section> কোনো document এর সেকশন তৈরিতে ব্যবহৃত হয়।
<summary> <details> element এর দৃশ্যমান শিরোনাম বা হেডিং তৈরিতে ব্যবহৃত হয়।
<time> date/time উপস্থাপণে ব্যবহৃত হয়।