HTML এর ট্যাগসমূহ: ওয়েব ডেভেলপমেন্টের মূল সরঞ্জাম

byMajhab Hasan • • 2 min read
0

পরিচিতি

HTML (HyperText Markup Language) হলো ওয়েব পেজ তৈরির জন্য ব্যবহৃত স্ট্যান্ডার্ড ভাষা। এটি ওয়েবের উপাদান এবং বিষয়বস্তু সংগঠিত করতে ট্যাগ এবং উপাদান ব্যবহার করে। এই ট্যাগগুলি কোণযুক্ত বন্ধনী (`< >`) এর ভিতরে থাকে এবং ব্রাউজারকে ওয়েব সামগ্রী কীভাবে প্রদর্শিত হবে তা নির্দেশ করে। বছরের পর বছর ধরে, HTML বিবর্তিত হয়েছে এবং আধুনিক ওয়েব ডেভেলপমেন্টের প্রয়োজনীয়তাগুলি পূরণের জন্য নতুন ট্যাগ এবং বৈশিষ্ট্য যোগ করা হয়েছে।

এই ব্লগ পোস্টে, আমরা HTML এর প্রধান ট্যাগগুলি, তাদের উদ্দেশ্য এবং তাদের ব্যবহারের উপর আলোকপাত করব।

একটি HTML ডকুমেন্টের মূল কাঠামো

প্রতিটি HTML ডকুমেন্ট একটি নির্দিষ্ট কাঠামো অনুসরণ করে, যা নিম্নলিখিত প্রধান ট্যাগগুলি নিয়ে গঠিত:
  •  `<!DOCTYPE html>`: এই ট্যাগটি ডকুমেন্টের ধরন এবং HTML-এর সংস্করণ সংজ্ঞায়িত করে, যা ব্রাউজারকে ডকুমেন্টটি সঠিকভাবে ব্যাখ্যা করতে সহায়তা করে।
  •  `<html>`: এটি HTML ডকুমেন্টের মূল ট্যাগ।
  • `<head>`: ডকুমেন্টের মেটাডেটা ধারণ করে, যেমন স্টাইলশিট, স্ক্রিপ্ট এবং শিরোনাম।
  •  `<title>`: ডকুমেন্টের শিরোনাম নির্দিষ্ট করে, যা ব্রাউজারের শিরোনাম বার বা ট্যাবে প্রদর্শিত হয়।
  •  `<body>`: এটি ওয়েবপেজের বিষয়বস্তু ধারণ করে, যেমন পাঠ্য, চিত্র এবং অন্যান্য উপাদান।

হেড উপাদানগুলি
  •  `<meta>`: ডকুমেন্টের মেটাডেটা যেমন ক্যারেক্টার এনকোডিং এবং ভিউপোর্ট সেটিং প্রদান করে।
  •  `<link>`: বাহ্যিক সংস্থানগুলির সাথে সংযোগ করে, যেমন স্টাইলশিট।
  • `<style>`: ডকুমেন্টে অভ্যন্তরীণ CSS অন্তর্ভুক্ত করতে ব্যবহৃত হয়।
  •  `<script>`: জাভাস্ক্রিপ্ট কোড অন্তর্ভুক্ত বা লিঙ্ক করতে ব্যবহৃত হয়।
  •  `<base>`: ডকুমেন্টের সমস্ত আপেক্ষিক লিঙ্কের জন্য একটি বেস URL সংজ্ঞায়িত করে।

টেক্সট ফরম্যাটিং ট্যাগ

টেক্সট ওয়েব কন্টেন্টের একটি গুরুত্বপূর্ণ অংশ, এবং HTML বিভিন্ন ট্যাগ সরবরাহ করে পাঠ্য ফরম্যাট করার জন্য:
  •  `<h1>` থেকে `<h6>`: শিরোনাম ট্যাগগুলি হেডিং সংজ্ঞায়িত করে, যেখানে `<h1>` সবচেয়ে বড় এবং `<h6>` সবচেয়ে ছোট।
  •  `<p>`: একটি প্যারাগ্রাফ সংজ্ঞায়িত করে।
  •  `<b>` এবং `<strong>`: টেক্সটকে বোল্ড করে তোলে। `<strong>` গুরুত্বপূর্ণ বিষয় নির্দেশ করে।
  •  `<i>` এবং `<em>`: টেক্সটকে ইটালিক করে। `<em>` জোর দেয়।
  •  `<u>`: টেক্সটের নিচে দাগ দেয়।
  •  `<br>`: একটি লাইন বিরতি যোগ করে।
  • `<hr>`: একটি অনুভূমিক লাইন যোগ করে।
  •  `<pre>`: টেক্সটের ফর্ম্যাটিং সংরক্ষণ করে এবং প্রিফরম্যাটেড হিসেবে প্রদর্শন করে।
  •  `<blockquote>`: টেক্সটকে ইনডেন্ট করে একটি উদ্ধৃতি হিসেবে ফরম্যাট করে।
  •  `<code>`: একটি মনোস্পেসড ফন্টে কোডের জন্য টেক্সট প্রদর্শন করে।

লিঙ্ক এবং তালিকা

ওয়েবে নেভিগেশন একটি গুরুত্বপূর্ণ দিক, এবং HTML নির্দিষ্ট ট্যাগ সরবরাহ করে লিঙ্ক এবং তালিকা পরিচালনার জন্য:
  • `<a>`: অ্যাঙ্কর ট্যাগটি হাইপারলিঙ্ক তৈরি করতে ব্যবহৃত হয়। `href` অ্যাট্রিবিউটটি গন্তব্য URL নির্দিষ্ট করে।
  • `<ul>`: একটি আন-অর্ডারড তালিকা তৈরি করে, যেখানে তালিকার আইটেমগুলি বুলেট দিয়ে চিহ্নিত থাকে।
  • `<ol>`: একটি অর্ডারড তালিকা তৈরি করে, যেখানে তালিকার আইটেমগুলি নম্বর দিয়ে চিহ্নিত থাকে।
  •  `<li>`: `<ul>` বা `<ol>` এর ভিতরে একটি পৃথক তালিকার আইটেম সংজ্ঞায়িত করে।
  •  `<dl>`, `<dt>`, এবং `<dd>`: একটি বর্ণনা তালিকা সংজ্ঞায়িত করে। `<dt>` হল টার্ম, এবং `<dd>` তার বর্ণনা।

মাল্টিমিডিয়া ট্যাগ

HTML বিভিন্ন মাল্টিমিডিয়া উপাদান সমর্থন করে:
  • `<img>`: একটি চিত্র এম্বেড করে। `src` অ্যাট্রিবিউটটি চিত্রের উৎস নির্দিষ্ট করে এবং `alt` অ্যাট্রিবিউটটি বিকল্প টেক্সট সরবরাহ করে।
  • `<audio>`: শব্দ বা সঙ্গীত ফাইল এম্বেড করে। যেমন `controls` অ্যাট্রিবিউট ব্যবহারকারীর নিয়ন্ত্রণ সরবরাহ করে।
  •  `<video>`: ভিডিও ফাইল এম্বেড করে, এবং এটিতে প্লেব্যাক নিয়ন্ত্রণগুলির জন্য অ্যাট্রিবিউট থাকতে পারে।
  •  `<source>`: `<audio>` বা `<video>` এর মধ্যে একাধিক মিডিয়া ফাইল নির্দিষ্ট করতে ব্যবহৃত হয়।
  • `<embed>`: বাহ্যিক রিসোর্স যেমন প্লাগইন বা অ্যাপ্লিকেশন এম্বেড করে।
  • `<iframe>`: আরেকটি HTML ডকুমেন্টকে বর্তমান ডকুমেন্টের ভিতরে এম্বেড করে।

টেবিল ট্যাগ

HTML-এ টেবিল ব্যবহার করে ট্যাবুলার ডেটা প্রদর্শন করা হয়:
  • `<table>`: একটি টেবিল সংজ্ঞায়িত করে।
  •  `<tr>`: একটি সারি সংজ্ঞায়িত করে।
  •  `<th>`: একটি টেবিলের হেডার সেল সংজ্ঞায়িত করে।
  •  `<td>`: একটি টেবিলের সাধারণ ডেটা সেল সংজ্ঞায়িত করে।
  •  `<caption>`: টেবিলের জন্য একটি ক্যাপশন প্রদান করে।
  •  `<thead>`, `<tbody>`, `<tfoot>`: টেবিলের হেডার, বডি এবং ফুটার বিষয়বস্তু সংগঠিত করে।

ফর্ম ট্যাগ

ফর্ম ব্যবহারকারীর ইনপুট গ্রহণ এবং ডেটা জমা দেওয়ার জন্য ব্যবহৃত হয়:
  • `<form>`: একটি ফর্মের এনক্লোজার। `action` অ্যাট্রিবিউটটি ফর্মের জমা দেওয়ার লক্ষ্যের URL নির্দিষ্ট করে এবং `method` HTTP মেথড সংজ্ঞায়িত করে।
  • `<input>`: বিভিন্ন ধরণের ফর্ম কন্ট্রোল প্রতিনিধিত্ব করে যেমন টেক্সট বক্স, রেডিও বোতাম, এবং চেকবক্স।
  •  `<textarea>`: বহু-লাইন টেক্সট ইনপুট এলাকা সংজ্ঞায়িত করে।
  •  `<select>` এবং `<option>`: ড্রপ-ডাউন মেনু তৈরি করে। `<select>` মেনুটি সংজ্ঞায়িত করে এবং `<option>` পৃথক আইটেমগুলি নির্দিষ্ট করে।
  •  `<button>`: একটি ক্লিকযোগ্য বোতাম সংজ্ঞায়িত করে, যা প্রায়শই ফর্ম জমা দেওয়ার জন্য ব্যবহৃত হয়।

সেমান্টিক HTML5 ট্যাগ

HTML5 এর সাথে, ওয়েব কন্টেন্টে অর্থ এবং কাঠামো যোগ করতে নতুন ট্যাগগুলি প্রবর্তিত হয়েছে:
  • `<header>`: ভূমিকা বিষয়বস্তু বা নেভিগেশন লিঙ্কগুলির একটি ধারক প্রতিনিধিত্ব করে।
  • `<nav>`: নেভিগেশন লিঙ্কগুলির একটি বিভাগ সংজ্ঞায়িত করে।
  •  `<main>`: ডকুমেন্টের মূল বিষয়বস্তু নির্দিষ্ট করে।
  •  `<article>`: একটি স্বতন্ত্র বিষয়বস্তু, যেমন একটি ব্লগ পোস্ট বা সংবাদ নিবন্ধ প্রতিনিধিত্ব করে।
  •  `<section>`: একটি বিষয়ভিত্তিক গোষ্ঠী সংজ্ঞায়িত করে।
  •  `<aside>`: মূল বিষয়বস্তুর সাথে পরোক্ষভাবে সম্পর্কিত বিষয়বস্তু উপস্থাপন করে, প্রায়শই সাইডবারে ব্যবহৃত হয়।
  •  `<footer>`: ডকুমেন্ট বা বিভাগের ফুটার প্রতিনিধিত্ব করে।
  •  `<figure>` এবং `<figcaption>`: চিত্র বা ডায়াগ্রাম এবং তার ক্যাপশন অন্তর্ভুক্ত করে।

অন্যান্য ট্যাগ

কিছু অন্যান্য গুরুত্বপূর্ণ ট্যাগের মধ্যে রয়েছে:
  •  `<div>`: স্টাইলিং বা বিষয়বস্তু গোষ্ঠী করতে ব্যবহৃত একটি সাধারণ ধারক।
  •  `<span>`: ইনলাইন বিষয়বস্তু জন্য ব্যবহৃত, `<div>` এর অনুরূপ।
  • `<details>` এবং `<summary>`: একটি ইন্টারেক্টিভ উইজেট প্রদান করে যেখানে ব্যবহারকারী বিষয়বস্তু খুলতে এবং বন্ধ করতে পারে।
  • `<mark>`: টেক্সট হাইলাইট করে।
  • `<progress>`: একটি কাজের অগ্রগতি প্রদর্শন করতে ব্যবহৃত হয়, যেমন একটি ফাইল ডাউনলোডের অগ্রগতি।
  • `<time>`: একটি নির্দিষ্ট সময় বা তারিখ নির্দেশ করতে ব্যবহৃত হয়।
  •  `<output>`: গণনা বা প্রক্রিয়াকৃত ফলাফল প্রদর্শনের জন্য ব্যবহৃত হয়, বিশেষত ফর্ম উপাদানগুলির সাথে।

উপসংহার

HTML ওয়েব ডেভেলপমেন্টের মূল ভিত্তি এবং এটি ইন্টারনেটের যে কোনও ওয়েবসাইট তৈরির জন্য অপরিহার্য। HTML এর প্রতিটি ট্যাগ একটি নির্দিষ্ট উদ্দেশ্য পূরণ করে এবং ওয়েব কন্টেন্টকে স্ট্রাকচার, শৈলী এবং কার্যকারিতা প্রদান করে। আজকের আধুনিক ওয়েবসাইটগুলোতে HTML ট্যাগগুলি জাভাস্ক্রিপ্ট এবং CSS এর সাথে মিলিত হয়ে ইন্টারেক্টিভ এবং আকর্ষণীয় ওয়েবসাইট তৈরি করতে ব্যবহৃত হয়। প্রতিটি ট্যাগের সঠিক ব্যবহার ও এর উপযোগিতা বুঝতে পারলে, একজন ডেভেলপার আরও কার্যকর ও দক্ষভাবে ওয়েব ডেভেলপমেন্ট করতে পারবেন। 

 
4.94 / 169 rates

Post a Comment

Previous Post Next Post