এইচটিএমএল(৫) সিমেন্টিক(Semantic) এলিমেন্ট

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

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

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

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

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

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

একটি ওয়েব পেজের বিভিন্ন অংশকে ডিফাইন করার জন্য এইচটিএমএল(৫) এ নতুন সিমেন্টিক এলিমেন্টকে ব্যবহার করা হয়ঃ

উপরের ছবিতে বর্তমান ওয়েব পেজে ব্যবহৃত সিমেন্টিক এলিমেন্ট সমূহ তুলে ধরা হয়েছে।

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

এইচটিএমএল(৫) এর <figure> এলিমেন্ট ব্যবহার করে ইমেজ এবং ইমেজের ক্যাপশন একসাথে দেখানো হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>
<p>প্যারিসের আইফেল টাওয়ার(ফরাসি ভাসায়: La Tour Eiffel লা তুর ইফেল) পৃথিবীর বিখ্যাত কাঠামোর একটি এবং ফ্রান্সের
অন্যতম একটি প্রতিক।গুস্তাভো আইফেলের নির্মিত ৩০০ মিটার(৯৮৬ ফুট) উচ্চতার এই টাওয়ার।১৯৩০ সালে নিউইয়র্কে ‘ক্রাইসলার
বিল্ডিং’ টির (Chrysler Building) নির্মাণকাজ শেষ হওয়ার আগে পর্যন্ত আইফেল টাওয়ারই ছিলো পৃথিবীর সর্বোচ্চ স্থাপনা।</p>

<figure>
  <img src="paris.jpg" alt="আইফেল টাওয়ার,প্যারিস।" width="304" height="228">
  <figcaption>আইফেল টাওয়ার,প্যারিস।</figcaption>
</figure>

</body>
</html>

ফলাফল

<img> এলিমেন্ট দ্বারা ইমেজকে বুঝায় এবং <figcaption> ইমেজের ক্যাপশনকে বুঝায়।

<section> এলিমেন্ট

ডকুমেন্টের কন্টেন্টকে আলাদা করার জন্য <section> এলিমেন্ট ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>বাফুফে পরিচ্ছেদ ১</h1>
  <p>বাংলাদেশ ফুটবল ফেডারেশন বাংলাদেশের ফুটবল খেলার প্রশাসনিক সংস্থা। ১৯৭২ সালে বাংলাদেশ ‍ফুটবল ফেডারেশন
  প্রতিষ্ঠিত হয়। দুই বছর পর ১৯৭৪ সাল থেকেই এটি পেয়ে যায় এএফসি ও ফিফার সদস্য পদ। বর্তমানে বাফুফে সভাপতি কাজী
  সালাউদ্দিন।[১]। এই সংস্থাই বাংলাদেশের পুরুষ ও মহিলা জাতীয় দল এবং যুব দল-এর দেখভাল এবং দেশের ফুটবলের যাবতীয়
  কার্যক্রম নিয়ন্ত্রন করে। বাংলাদেশ ফুটবল ফেডারেশনের, বাফুফে প্রধান কার্যালয় ঢাকার মতিঝিলে বঙ্গবন্ধু জাতীয় স্টেডিয়াম
  কাছে ‘বিএফএফ ভবন’-এ অবস্থিত।</p>
</section>

<section>
  <h1>বাফুফে পরিচ্ছেদ ২</h1>
  <p>প্রশিক্ষা, সংস্কৃতি ও ক্রীড়া বিষয়ক তৎকালিন মন্ত্রী অধ্যাপক ইউসুফ আলী ১৯৭২ সালের ১৫ জুলাই বাংলাদেশ ফুটবল
  ফেডারেশন, বাফুফে প্রতিষ্ঠা করেছিলেন। শুরুতে তিনিই ছিলেন বাফুফের প্রথম সভাপতি। আর ওয়ারী ক্লাব-এর আবুল হাসেম ছিলেন
  সংগঠনের প্রথম সাধারণ সম্পাদক। ১৯৭৩ সালে ফুটবলের আঞ্চলিক সংস্থা এএফসি এবং ১৯৭৪-এ আন্তর্জাতিক সংস্থা ফিফা-এর সদস্য পদ
  পায় বাংলাদেশ ফুটবলের ফেডারেশনের সর্বোচ্চ সংস্থা।</p>
 </section>

</body>
</html>

ফলাফল

সিমেন্টিক এলিমেন্টের নেস্টেড ব্যবহার

এইচটিএমএল(৫) এ, <article> এলিমেন্ট অন্যান্য এলিমেন্টের একটি স্বয়ংসম্পূর্ণ ব্লক হিসেবে ডিফাইন করা হয়। <section> এলিমেন্ট অন্যান্য এলিমেন্টের একটি ব্লক হিসেবে ডিফাইন করা হয়।

তার মানে, আমরা এদের একটির মধ্যে অন্যটিকে ব্যবহার করতে পারবো। আমরা <section> এলিমেন্টের মধ্যে <article> এলিমেন্ট ব্যবহার করতে পারি অথবা <article> এলিমেন্টের মধ্যে <section> এলিমেন্ট ব্যবহার করতে পারি। এটি একান্তই নিজের ইচ্ছার উপর নির্ভরশীল।

<header> এলিমেন্ট

<header> এলিমেন্ট একটি ডকুমেন্ট বা সেকশনের জন্য একটি হেডার নির্ধারণ করে। একটি ডকুমেন্টে অনেকগুলো <header> এলিমেন্ট থাকতে পারে।

নিচে <header> এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>বাফুফে</h1>
    <p>শিক্ষা, সংস্কৃতি ও ক্রীড়া বিষয়ক তৎকালিন মন্ত্রী অধ্যাপক ইউসুফ আলী ১৯৭২ সালের ১৫ জুলাই বাংলাদেশ ফুটবল
    ফেডারেশন, বাফুফে প্রতিষ্ঠা করেছিলেন। শুরুতে তিনিই ছিলেন বাফুফের প্রথম সভাপতি। আর ওয়ারী ক্লাব-এর আবুল হাসেম ছিলেন
    সংগঠনের প্রথম সাধারণ সম্পাদক। ১৯৭৩ সালে ফুটবলের আঞ্চলিক সংস্থা এএফসি এবং ১৯৭৪-এ আন্তর্জাতিক সংস্থা ফিফা-এর সদস্য পদ
    পায় বাংলাদেশ ফুটবলের ফেডারেশনের সর্বোচ্চ সংস্থা। ১৯৮২-৮৬ ও ১৯৯৮-২০০২ সালে দু’দফায় বাংলাদেশ এএফসি’র কার্যনির্বাহী
    সদস্য নির্বাচিত হয়। অবসরপ্রাপ্ত মেজর হাফিজউদ্দিন আহমেদ ১৯৯০-৯৪ এর জন্য এএফসি’র সহ-সভাপতিও নির্বাচিত হন। ফুটবল
    ফেডারেশন সেই ১৯৪৮ সাল থেকে ঢাকা ফুটবল লীগ চালিয়ে আসছে। বাংলাদেশ স্বাধীন হওয়ার পরও সেই লীগ ধারাবাহিকতা ধরে রেখেছে।
    একটা সময় ঢাকার ফুটবল লীগগুলো সমর্থক ও জনপ্রিয়তা পায়। প্রিমিয়ার লীগ, প্রথম বিভাগ, দ্বিতীয় বিভাগ, এবং তৃতীয়
    বিভাগ নামে এই লীগগুলো এখনও প্রচলিত।</p>
  </header>
</article>

</body>
</html>

ফলাফল

<footer> এলিমেন্ট

<footer> এলিমেন্ট একটি ডকুমেন্ট অথবা একটি সেকশনের জন্য ফুটার নির্ধারণ করে। ফুটারে সাধারনত ডকুমেন্টের লেখক, কপিরাইট তথ্য, ব্যবহারের শর্তাবলীর জন্য লিঙ্ক, যোগাযোগের তথ্য ইত্যাদি দেওয়া থাকে। একটি ডকুমেন্টে একাধিক <footer> এলিমেন্ট থাকতে পারে। নিচে <footer> এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>পোস্ট করেছেন: কনিকা আলম চৌধুরী</p>
  <p>যোগাযোগের তথ্যঃ <a href="mailto:someone@example.com">someone@example.com</a></p>
</footer>

</body>
</html>

ফলাফল

<nav> এলিমেন্ট

<nav> এলিমেন্ট নেভিগেশন লিংকের সেট নির্ধারণ করে। <nav> এলিমেন্ট অধিক সংখ্যক নেভিগেশন লিংকের জন্য ব্যবহার করা হয়।

তবে একটি ডকুমেন্টের সকল লিংকে <nav> এলিমেন্টের মধ্যে রাখতে হয় না। নিচে <nav> এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল nav এলিমেন্ট</title>
</head>
<body>

<nav>
  <a href="../index.php">এইচটিএমএল</a> |
  <a href="../css/index.php">সিএসএস</a> |
  <a href="../js/index.php">জাভাস্ক্রিপ্ট</a> |
  <a href="../jquery/index.php">জেকুয়েরি</a>
</nav>

</body>
</html>

ফলাফল

<aside> এলিমেন্ট

<aside> এলিমেন্ট তার পাশের কিছু কন্টেন্টকে নির্দেশ করে। aside কন্টেন্টগুলো তার পার্শ্ববর্তী কন্টেন্টগুলোর সাথে সম্পর্কযুক্ত থাকে।

নিচে <aside> এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল aside এলিমেন্ট</title>
</head>
<body>

  <p>এই শীতে আমি এবং আমার পরিবার কক্সবাজারে বেড়াতে গিয়েছিলাম।</p>
  <aside>
    <h4>কক্সবাজার</h4>
    <p>কক্সবাজার পৃথিবীর বৃহত্তম সমুদ্র সৈকত।</p>
  </aside>

</body>
</html>

ফলাফল

এইচটিএমএল(৫) সিমেন্টিক এলিমেন্টের তালিকা

নিচে এইচটিএমএল(৫) এর নতুন সিমেন্টিক এলিমেন্টের একটি তালিকা দেওয়া হলোঃ

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

আমাদের এইচটিএমএল(৫) রেফারেন্স পড়ুন।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল ফর্ম