এইচটিএমএল৫ সিমান্টিকস - html5 semantic



সিমেন্টিক এলিমেন্টের নাম দেখেই এলিমেন্টের কন্টেন্টগুলো সম্পর্কে ধারনা করা যায়। এইচটিএমএল ৫ এর সিমেন্টিক এলিমেন্ট সকল আধুনিক ব্রাউজারে সাপোর্ট করে।


সিমেন্টিক এলিমেন্ট

নন-সিমেন্টিক এলিমেন্ট গুলো হল - <div> এবং <span> এলিমেন্ট তাদের কন্টেন্ট সম্পর্কে কিছুই বর্ণনা করে না।

সিমেন্টিক এলিমেন্ট গুলো হল - <form>, <table>, এবং <img>, তাই এই এলিমেন্ট গুলো দেখলেই বুঝতে পারি এর কন্টেন্টে কি থাকবে।


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

Yes Yes Yes Yes Yes

এইচটিএমএল ৫ এর সিমেন্টিক এলিমেন্ট সকল আধুনিক ব্রাউজারে সাপোর্ট করে। এছাড়াও পুরনো ব্রাউজারগুলোটে এই এলিমেন্ট গুলো কিভাবে ব্যবহার করতে হবে সেটা জানতে আমাদের এইচটিএমএল ৫ - ব্রাউজার সমর্থন বা support টিউটোরিয়াল দেখুন।


নতুন সিমেন্টিক এলিমেন্ট

নেভিগেশন, হেডার এবং ফুটার তৈরি করার জন্য অধিকাংশ ওয়েব সাইটে এইচটিএমএল কোড এইভাবে লেখা হয়ঃ <div id="nav">, <div class="header">, <div id="footer">

কোন ওয়েব পেজের বিভিন্ন অংশকে নির্ধারণ করার জন্য এইচটিএমএল ৫ এ নতুন সিমেন্টিক এলিমেন্টকে ব্যবহার করা হয়। নিচে একটি উদাহরন দেখুন।

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



html5 semantic

<section> এলিমেন্ট

ডকুমেন্টের কন্টেন্টকে আলাদা করার জন্য <section> এলিমেন্ট ব্যবহার করা হয়। W3C এর সংজ্ঞানুসারে section হল "A section is a thematic grouping of content, typically with a heading."

উদাহরণ

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




<article> এলিমেন্ট

<article> এলিমেন্ট কোন স্বাধীন কন্টেন্ট তৈরি করে। <article> এলিমেন্ট নিম্নোক্ত স্থানগুলোতে ব্যবহার করা ভাল -

Forum post
Blog post
Newspaper 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> অথবা বিপরীত?

<article> এলিমেন্ট কোন স্বাধীন কন্টেন্ট তৈরি করে। <section> এলিমেন্ট কোন এইচটিএমএল ডকুমেন্টে ভিন্ন ভিন্ন সেকশন তৈরি করে। আমরা কি এই এলিমেন্টগুলো কিভাবে নেস্ট করবো সেটা সিদ্ধান্ত নিতে পারি? না আমরা পারবো না!

ইন্টারনেটে, অনেক ওয়েব পেজে আপনি <section> এলিমেন্টের মাঝে <section> এলিমেন্ট খুজে পাবেন, আবার <section> এলিমেন্টের মাঝে <artical> এলিমেন্ট খুজে পাবেন।
আবার অনেক <artical> এলিমেন্টের মাঝে <artical> যেমন পাবেন, তেমনি অনেক <artical> এলিমেন্টের মাঝে <section> খুজে পাবেন।

উদাহরন সরুপ বলা যায়, কোন পত্রিকার জন্য sport সেকশনে <article> ব্যবহার করা একটি ভাল অভ্যাস।


<header> এলিমেন্ট

<header> এলিমেন্ট একটি ডকুমেন্ট বা সেকশনের জন্য একটি হেডার নির্ধারণ করে। একটি ডকুমেন্টে অনেকগুলো <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>




<footer> এলিমেন্ট

<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> এলিমেন্টের মধ্যে রাখতে হয় না। নিচে <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 কন্টেন্টগুলো তার পার্শ্ববর্তী কন্টেন্টগুলোর সাথে সম্পর্কযুক্ত থাকে। নিচে <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>




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

এইচটিএমএল ৫ এর <figure> এলিমেন্ট ব্যবহার করে ইমেজ এবং ইমেজের ক্যাপশন একসাথে দেখানো হয়। <img> এলিমেন্ট দ্বারা ইমেজকে নির্ধারণ করা হয় এবং <figcaption> ব্যবহার করে ইমেজের ক্যাপশনকে নির্ধারণ করা হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>




Semantic এলিমেন্ট কেন?

এইচটিএমএল ৪.০১ এ ওয়েব ডেভেলপাররা তাদের নিজেদের পছন্দমত আইডি বা ক্লাস এর নাম ব্যবহার করত, যেমন - header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav ইত্তাদি। এতে করে সার্চ ইঙ্গিন সথিক ভাবে কোন ওয়েব পেজের সথিক কন্টেন্ট গুলো চিনতে পারত না।

এইচটিএমএল ৫ এর এই নতুন এলিমেন্ট গুলো, যেমন - <header> <footer> <nav> <section> <article> ব্যবহারের ফলে এই সমস্যাটার সমাধান হয়েছে।

W3C এর সংজ্ঞানুসারে Semantic Web হল: "Allows data to be shared and reused across applications, enterprises, and communities."


এইচটিএমএল ৫ - সকল সিমেন্টিক এলিমেন্ট

নিচে এইচটিএমএল ৫ এর সকল নতুন সিমেন্টিক এলিমেন্টের একটি তালিকা দেওয়া হলো।

ট্যাগ বর্ণনা
<article> একটি আর্টিকেল বুঝায়
<aside> একটি পেজ কন্টেন্টের পাশের কন্টেন্টকে বুঝায়
<details> ইউজারকে দেখানোর জন্য অতিরিক্ত তথ্যকে বুঝায়
<figcaption> <figure> এলিমেন্টের জন্য একটি ক্যাপশন সেট করে
<figure> ক্যাপশনসহ একটি এলিমেন্টকে বুঝায়
<footer> ডকুমেন্ট অথবা সেকশনের ফুটার নির্দেশ করে
<header> ডকুমেন্ট অথবা সেকশনের হেডার নির্দেশ করে
<main> ডকুমেন্টের প্রধান কন্টেন্টকে বুঝায়
<mark> টেক্সটকে চিহ্নিত করার জন্য ব্যবহার হয়
<nav> নেভিগেশন লিংকের জন্য ব্যবহার হয়
<section> ডকুমেন্টে সেকশন তৈরি করে
<summary> <details> এলিমেন্টের জন্য একটি হেডিং ডিফাইন করে
<time> তারিখ/সময় নির্দেশ করে







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.