HTML Semantic Elements

শব্দার্থিক উপাদান = উপাদান যার অর্থ আছে।

শব্দার্থিক উপাদান কি?

একটি শব্দার্থিক উপাদান ব্রাউজার এবং বিকাশকারী উভয়ের কাছে এর অর্থ স্পষ্টভাবে বর্ণনা করে।

HTML-এ শব্দার্থিক উপাদান

অনেক ওয়েবসাইট নেভিগেশন, শিরোনাম এবং ফুটার উল্লেখ করে<div id="nav">, <div class="header">, <div id="footer">যেমন HTML কোড থাকে

এইচটিএমএল এর বেশ কিছু শব্দার্থিক উপাদান রয়েছে যা একটি ওয়েব পৃষ্ঠার বিভিন্ন অংশ সংজ্ঞায়িত করতে ব্যবহার করা যেতে পারে:

শব্দার্থিক উপাদান ব্যবহার

HTML <section>অঙ্গ

<section>একটি উপাদান একটি নথিতে একটি বিভাগ সংজ্ঞায়িত করে।

জাসিফ টিমের HTML ডকুমেন্টেশন অনুসারে: "একটি বিভাগ হল বিষয়বস্তুর একটি বিষয়ভিত্তিক সংগ্রহ, সাধারণত একটি শিরোনাম সহ।"

যেখানে<section>উপাদান ব্যবহার করা যেতে পারে:

• অধ্যায়
• ভূমিকা
• খবর আইটেম
• যোগাযোগের তথ্য

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>

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

HTML <article>অঙ্গ

<article>একটি উপাদান স্বাধীন, স্বয়ংসম্পূর্ণ বিষয়বস্তুর প্রতিনিধিত্ব করে।

একটি নিবন্ধের নিজস্ব অর্থবোধক হওয়া উচিত এবং এটি ওয়েবসাইটের অন্যান্য অংশ থেকে স্বাধীনভাবে বিতরণ করতে সক্ষম হওয়া উচিত।

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

• ফোরাম পোস্টები
• নিবন্ধন পোস্ট
• ব্যবহারকারী মন্তব্য
• পণ্য কার্ড
• সংবাদপত্রের নিবন্ধ

Example

স্বাধীন, স্বয়ংসম্পূর্ণ সামগ্রী সহ তিনটি নিবন্ধ:

HTML <header>অঙ্গ

<header>একটি উপাদান পরিচায়ক সামগ্রী বা নেভিগেশন লিঙ্কগুলির একটি সেটের জন্য একটি ধারক উপস্থাপন করে।

ক<header>উপাদান সাধারণত গঠিত হয়:

• এক বা একাধিক হেডার উপাদান (<h1> - <h6>)
• লোগো বা আইকন
• লেখক তথ্য

HTML <footer>অঙ্গ

<footer>উপাদান একটি নথি বা বিভাগের জন্য একটি পাদটীকা সংজ্ঞায়িত করে।

ক<footer>উপাদান সাধারণত গঠিত হয়:

• লেখক তথ্য
• কপিরাইট তথ্য
• যোগাযোগের তথ্য
• সাইট ম্যাপ
• শীর্ষে লিঙ্ক
• সম্পর্কিত নথি

এক নথিতে একাধিক<footer>উপাদান হতে পারে.

HTML <nav>অঙ্গ

<nav>একটি উপাদান নেভিগেশন লিঙ্কের একটি সেট সংজ্ঞায়িত করে।

একটি নথির সমস্ত সংযুক্তি<nav>এটি অঙ্গের ভিতরে থাকতে হবে না।<nav>উপাদান শুধুমাত্র প্রধান নেভিগেশন লিঙ্ক জন্য.

ব্রাউজার, যেমন অক্ষম ব্যবহারকারীদের জন্য স্ক্রিন রিডার, এই উপাদানটির প্রাথমিক রেন্ডারিং এড়িয়ে যাবে কিনা তা নির্ধারণ করতে এই উপাদানটি ব্যবহার করতে পারে।

HTML <aside>অঙ্গ

<aside>উপাদানটি এটি যে বিষয়বস্তুতে (একটি সাইডবারের মতো) স্থাপন করা হয়েছে তা থেকে কিছু বিষয়বস্তু নির্ধারণ করে।

<aside>বিষয়বস্তু আশেপাশের বিষয়বস্তুর সাথে পরোক্ষভাবে সম্পর্কিত হওয়া উচিত।

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

HTML <figure>এবং<figcaption>উপাদান

<figure>ট্যাগটি স্বয়ংসম্পূর্ণ বিষয়বস্তুকে বোঝায়, উদাহরণস্বরূপ চার্ট, গ্রাফ, ফটোগ্রাফ, সূচী ইত্যাদি।

<figcaption>ট্যাগ a<figure>উপাদানটির শিরোনাম সংজ্ঞায়িত করে।<figcaption>অঙ্গ<figure>উপাদানের প্রথম সন্তান বা শেষ সন্তান হিসাবে স্থাপন করা যেতে পারে।

Figure Example

Fig. 1 - Example image demonstrating the <figure> element

কেন শব্দার্থিক উপাদান?

জাসিফ টিমের মতে: "একটি শব্দার্থিক ওয়েব অ্যাপ্লিকেশনগুলিকে সংস্থা এবং সম্প্রদায়গুলিতে ডেটা ভাগ করতে এবং পুনঃব্যবহারের অনুমতি দেয়।"

Exercise

আপনার জ্ঞান পরীক্ষা করতে নিম্নলিখিত অনুশীলন চেষ্টা করুন:

সর্বোত্তম অনুশীলন