HTML5 语义元素

সেম্যান্টিকতা (প্রাচীন গ্রীক থেকে উৎপত্তি) হচ্ছে ভাষার অর্থ অধ্যয়ন

সেম্যান্টিক ইলিমেন্টগুলি হচ্ছে সেম্যান্টিক বিশিষ্ট ইলিমেন্ট

কী হচ্ছে সেম্যান্টিক ইলিমেন্ট?

সেম্যান্টিক ইলিমেন্টগুলি ব্রাউজার এবং ডেভেলপারকে তাদের অর্থ স্পষ্টভাবে বর্ণনা করে

নন-সেম্যান্টিকইলিমেন্টের উদাহরণ: <div> এবং <span> - তাদের কনটেন্টের বিষয়ে কোনও তথ্য প্রদান করা যায় না

সেম্যান্টিকইলিমেন্টের উদাহরণ: <form>、<table> এবং <img> - তাদের কনটেন্টকে স্পষ্টভাবে নির্দিষ্ট করা

ব্রাউজার সমর্থন

হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ

সমস্ত আধুনিক ব্রাউজারগুলি HTML5 সেম্যান্টিক ইলিমেন্টকে সমর্থন করে

এছাড়া, আপনি পুরনো ব্রাউজারগুলিকে "সহায়তা" করতে পারেন "অজানা ইলিমেন্ট"-কে。

এই চাপটি ব্যবহার করে HTML5 ব্রাউজারের মাধ্যমে আরও বিষয়বস্তু শিখুন。

HTML5-এর নতুন সেম্যান্টিক ইলিমেন্ট

অনেক সাইটগুলিতে পরিবহন নির্দেশ, হেডার এবং ফুটারের HTML কোড থাকে, যেমন এইসব: <div id="nav"> <div class="header"> <div id="footer">。

HTML5-এর মাধ্যমে পানের বিভিন্ন অংশকে নির্দিষ্ট করার নতুন সেম্যান্টিক ইলিমেন্ট প্রদান করা হয়:

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

HTML5 语义元素

HTML5 语义元素

HTML5 <section> ইলিমেন্ট

<section> ইলেকট্রনেট এলিমেন্ট ডকুমেন্টের সেকশনকে নির্দিষ্ট করে。

W3C-র এইচটিএমএল সংক্রান্ত লেখায় বলা হয়: "সেকশন (section) হচ্ছে একটি বিষয়ভিত্তিক কনটেন্ট গোষ্ঠী, যা সাধারণত একটি শিরোনাম সহ থাকে"。

ওয়েবসাইটের হোমপেজকে সংক্ষিপ্ত বিবরণ, কনটেন্ট, যোগাযোগ তথ্য ইত্যাদির সমূহ শাখায় ভাগ করা যেতে পারে。

উদাহরণ

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

স্বয়ং প্রয়াস করুন

HTML5 <article> elements

<article> elements define independent, self-contained content.

A document has its own meaning and can be read independently of other content on the website.

<article> element's application scenarios:

  • Forum
  • Blog
  • News

উদাহরণ

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,</p>
  and build a future in which humans live in harmony with nature.</p>
</article>

স্বয়ং প্রয়াস করুন

Nested semantic elements

In the HTML5 standard, the <article> element defines a complete, self-contained block of related elements.

<section> elements are defined as blocks of related elements.

Can we use this definition to decide how to nest elements? No, we can't!

On the internet, you will find HTML pages with <section> elements containing <article> elements, and pages with <article> elements containing <sections>.

You will also find <section> elements containing <section> elements, and <article> elements containing <article> elements.

HTML5 <header> elements

<header> elements define headers for documents or sections.

<header> elements should be used as containers for introductory content.

A document can have multiple <header> elements.

একটি উদাহরণ একটি আর্টিকেলের হেডার নির্ধারণ করে:</p>

উদাহরণ

<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,</p>
  and build a future in which humans live in harmony with nature.</p>
</article>

স্বয়ং প্রয়াস করুন

HTML5 <footer> উপাদান

<footer> উপাদানটি ডকুমেন্ট বা অধ্যায়কে পাদলিপি নির্ধারণ করে。

<footer> উপাদানটি তার ধারণকৃত উপাদানগুলির বিষয়ে তথ্য প্রদান করবে。

পাদলিপির মধ্যে সাধারণত ডকুমেন্টের লেখক, অধিকার, ব্যবহার শর্ত, যোগাযোগ তথ্য ইত্যাদি থাকে。

একটি ডকুমেন্টে একাধিক <footer> উপাদান ব্যবহার করা যেতে পারে。

উদাহরণ

<footer>
   <p>পোস্ট করা হল: Hege Refsnes</p>
   <p>যোগাযোগ তথ্য: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

স্বয়ং প্রয়াস করুন

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

স্বয়ং প্রয়াস করুন

HTML5 <aside> ইলেমেন্ট

<aside> ইলেমেন্ট পেজের মূল কনটেন্টের বাইরের কোনও কনটেন্ট (যেমন সাইডবার) হয়

aside কনটেন্ট আশেপাশের কনটেন্টের সাথে সংযুক্ত হওয়া উচিত

উদাহরণ

<p>আমার পরিবার এবং আমি এই গরমকালে এপকট সেন্টার সফর করেছি</p>
<aside>
   <h4>এপকট সেন্টার</h4>
   <p>এপকট সেন্টার হল ফ্লোরিডার ডিজনি ওয়ারল্ডের একটি থিম পার্ক</p>
</aside>

স্বয়ং প্রয়াস করুন

HTML5 <figure> এবং <figcaption> ইলেমেন্ট

বই এবং সংবাদপত্রে, ছবিতে সাথে শিরোনাম সামান্যতম দেখা যায়

শিরোনাম (ক্যাপশন) এর কাজ হল ছবিতে দেখানো ব্যাখ্যা যোগানো

HTML5-র মাধ্যমে, ছবি এবং শিরোনামকে একসঙ্গে যুক্ত করা যায় <figure> ইলেমেন্টের মধ্যে:

উদাহরণ

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

স্বয়ং প্রয়াস করুন

<img> ইলেমেন্ট ছবি নির্ধারণ করে<figcaption> ইলেমেন্ট শিরোনাম নির্ধারণ করে

কেন HTML5 ইলেমেন্ট ব্যবহার করা হয়?

যদি আপনি HTML4 ব্যবহার করেন, তবে ডেভেলপাররা তাদের পছন্দ প্রসঙ্গের নাম ব্যবহার করে পেজ ইলেমেন্টের শৈলী নির্ধারণ করবেন:

হেডার, টপ, বটটম, ফুটার, মেনু, নেভিগেশন, মেইন, কনটেন্টার, কনটেন্ট, আর্টিকেল, সাইডবার, টপনেভ, ...

এভাবে, ব্রাউজারগুলি সঠিক ওয়েব কনটেন্টকে পরিচিত করতে পারে না।

এবং HTML5 এলিমেন্ট যেমন <header> <footer> <nav> <section> <article> দ্বারা, এই সমস্যা সমাধান করা যায়。

W3C-এর মতে, সেম্যান্টিক নেটওয়ার্ক:

“অ্যাপ্লিকেশন, সংস্থা এবং গোষ্ঠীর মধ্যে ডাটা ভাগ করা এবং পুনর্ব্যবহার করা অনুমতি দেওয়া হয়。”

HTML5-এর সেম্যান্টিক এলিমেন্ট

নিচে HTML5 নতুন সেম্যান্টিক এলিমেন্টগুলির অক্ষর বর্ণ অনুযায়ী তালিকা দেওয়া হলো。

এই লিঙ্কগুলি পূর্ণ HTML রেফারেন্স ম্যানুয়ালের দিকে নিয়ে যায়。

ট্যাগ বর্ণনা
<article> লেখা নির্দিষ্ট করুন。
<aside> পাতার বাইরের কনটেন্ট নির্দিষ্ট করুন。
<details> ব্যবহারকারীকে দেখা বা লুকানো যাওয়া অতিরিক্ত বিবরণ নির্দিষ্ট করুন。
<figcaption> <figure> এলিমেন্টের শীর্ষক নির্দিষ্ট করুন。
<figure> স্বল্পবর্ণ কনটেন্ট নির্দিষ্ট করুন, যেমন চিত্র, গ্রাফ, ছবি, কোড তালিকা ইত্যাদি。
<footer> ডকুমেন্ট বা সেকশনের ফুটার নির্দিষ্ট করুন。
<header> ডকুমেন্ট বা সেকশনের হেডার নির্দিষ্ট করুন。
<main> ডকুমেন্টের মূল কনটেন্ট নির্দিষ্ট করুন。
<mark> গুরুত্বপূর্ণ বা দৃষ্টান্তমূলক লেখা নির্দিষ্ট করুন。
<nav> নেভিগেশন লিঙ্ক নির্দিষ্ট করুন。
<section> ডকুমেন্টের সেকশন নির্দিষ্ট করুন。
<summary> ডকুমেন্টের স্বল্পবর্ণ শীর্ষক নির্দিষ্ট করুন。
<time> তারিখ/সময় নির্দিষ্ট করুন。