বেসিক স্ট্রাকচার ট্যাগস
<!DOCTYPE html>
ডকুমেন্টের ধরন নির্ধারণ করে। সবসময় প্রথমে থাকতে হয়।
<html>
সম্পূর্ণ HTML ডকুমেন্টের রুট এলিমেন্ট।
<head>
ডকুমেন্টের মেটাডেটা এবং তথ্য রাখে।
<title>
ব্রাউজার ট্যাবে দেখানো হয়। এসইও এর জন্য গুরুত্বপূর্ণ।
<meta>
ডকুমেন্টের বর্ণনা, কীওয়ার্ড ইত্যাদি তথ্য দেয়।
<link>
বাহ্যিক সম্পদ যেমন CSS লিংক করে।
<style>
HTML ডকুমেন্টে সরাসরি CSS কোড লেখা যায়।
<script>
JavaScript কোড যোগ করতে ব্যবহৃত হয়।
<body>
ওয়েব পেজের সমস্ত দৃশ্যমান কন্টেন্ট এখানে থাকে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>আমার ওয়েবসাইট</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>স্বাগতম!</h1>
</body>
</html>
টেক্সট ফরম্যাটিং ট্যাগস
<h1> থেকে <h6>
শিরোনাম এবং উপশিরোনাম। h1 সবচেয়ে গুরুত্বপূর্ণ।
<p>
অনুচ্ছেদ বা প্যারাগ্রাফ যোগ করে।
<br>
লাইন ব্রেক বা নতুন লাইন তৈরি করে।
<hr>
অনুভূমিক লাইন যোগ করে।
<b> এবং <strong>
বোল্ড টেক্সট। strong বেশি সিমান্টিক।
<i> এবং <em>
ইটালিক টেক্সট। em বেশি গুরুত্বপূর্ণ।
<u>
আন্ডারলাইন করা টেক্সট।
<small>
ছোট আকারের টেক্সট।
<mark>
হাইলাইট করা টেক্সট।
<del> এবং <ins>
মুছে ফেলা এবং যোগ করা টেক্সট।
<sub> এবং <sup>
সাবস্ক্রিপ্ট এবং সুপারস্ক্রিপ্ট।
<h1>এটি একটি শিরোনাম</h1>
<p>এটি একটি অনুচ্ছেদ। এতে <strong>গুরুত্বপূর্ণ</strong> এবং <em>জোর দেওয়া</em> টেক্সট থাকতে পারে।</p>
<p>H<sub>2</sub>O এবং E=mc<sup>2</sup></p>
ইমেজ এবং মাল্টিমিডিয়া ট্যাগস
<img>
ছবি ডিসপ্লে করে। src এবং alt অ্যাট্রিবিউট গুরুত্বপূর্ণ।
<audio>
অডিও ফাইল প্লে করে।
<video>
ভিডিও ফাইল প্লে করে।
<source>
অডিও এবং ভিডিওর উৎস নির্দিষ্ট করে।
<canvas>
JavaScript দিয়ে গ্রাফিক্স আঁকতে ব্যবহার করা হয়।
<picture>
বিভিন্ন ডিভাইসের জন্য বিভিন্ন ইমেজ সরবরাহ করে।
<img src="image.jpg" alt="ছবির বর্ণনা" width="300">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
আপনার ব্রাউজার ভিডিও সাপোর্ট করে না।
</video>
লিংক এবং নেভিগেশন ট্যাগস
<a>
হাইপারলিংক তৈরি করে। href অ্যাট্রিবিউট ব্যবহার করুন।
<nav>
নেভিগেশন লিংকের জন্য সেমান্টিক কন্টেইনার।
<nav>
<a href="index.html">হোম</a>
<a href="about.html">আমাদের সম্পর্কে</a>
<a href="contact.html">যোগাযোগ</a>
</nav>
<p><a href="https://robiulislam.org" target="_blank">আমাদের ওয়েবসাইট ভিজিট করুন</a></p>
লিস্ট ট্যাগস
<ul>
আনঅর্ডারড লিস্ট (বুলেট পয়েন্ট সহ)।
<ol>
অর্ডারড লিস্ট (নাম্বার সহ)।
<li>
লিস্ট আইটেম।
<dl>
ডেসক্রিপশন লিস্ট।
<dt>
ডেসক্রিপশন টার্ম।
<dd>
ডেসক্রিপশন।
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
</ul>
<ol>
<li>এক</li>
<li>দুই</li>
<li>তিন</li>
</ol>
টেবিল ট্যাগস
<table>
টেবিল কন্টেইনার।
<tr>
টেবিল রো (সারি)।
<th>
টেবিল হেডার সেল।
<td>
টেবিল ডেটা সেল।
<thead>
টেবিল হেডার গ্রুপ।
<tbody>
টেবিল বডি গ্রুপ।
<tfoot>
টেবিল ফুটার গ্রুপ।
<caption>
টেবিলের শিরোনাম।
<table>
<caption>শিক্ষার্থী নম্বর</caption>
<thead>
<tr>
<th>নাম</th>
<th>ক্লাস</th>
<th>নম্বর</th>
</tr>
</thead>
<tbody>
<tr>
<td>আহমেদ</td>
<td>নবম</td>
<td>৯৫</td>
</tr>
</tbody>
</table>
ফর্ম ট্যাগস
<form>
ফর্ম কন্টেইনার। action এবং method অত্যন্ত গুরুত্বপূর্ণ।
<input>
ইনপুট ফিল্ড। type অনুযায়ী বিভিন্ন ধরনের ইনপুট।
<textarea>
বহুলাইন টেক্সট ইনপুট।
<button>
ক্লিকযোগ্য বাটন।
<select>
ড্রপডাউন মেনু তৈরি করে।
<option>
Select এর অপশন।
<label>
ইনপুটের লেবেল তৈরি করে।
<fieldset>
ফর্ম এলিমেন্ট গ্রুপ করে।
<legend>
Fieldset এর শিরোনাম।
<form action="submit.php" method="POST">
<label for="name">নাম:</label>
<input type="text" id="name" name="name" required>
<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email">
<label for="message">বার্তা:</label>
<textarea id="message" name="message" rows="5"></textarea>
<button type="submit">পাঠান</button>
</form>
সেমান্টিক HTML5 ট্যাগস
<header>
পেজের শুরুর অংশ, লোগো এবং নেভিগেশনের জন্য।
<footer>
পেজের শেষের অংশ, কপিরাইট এবং যোগাযোগের জন্য।
<main>
পেজের প্রধান কন্টেন্ট এলাকা।
<section>
কন্টেন্টের একটি অংশ বা বিভাগ।
<article>
স্বাধীন কন্টেন্ট যেমন ব্লগ পোস্ট।
<aside>
সাইডবার বা পার্শ্বীয় কন্টেন্ট।
<figure>
ইলাস্ট্রেশন বা ছবির কন্টেইনার।
<figcaption>
Figure এর শিরোনাম বা ক্যাপশন।
<details>
লুকানো তথ্য যা ক্লিক করে খোলা যায়।
<summary>
Details এর শিরোনাম।
<time>
তারিখ এবং সময় উল্লেখ করে।
<header>
<h1>আমার ব্লগ</h1>
<nav><a href="#">হোম</a></nav>
</header>
<main>
<article>
<h2>আমার প্রথম পোস্ট</h2>
<time datetime="2024-10-20">২০ অক্টোবর ২০২৪</time>
<p>এটি একটি নতুন পোস্ট...</p>
</article>
<aside>
<h3>বিভাগ</h3>
<ul><li>প্রযুক্তি</li></ul>
</aside>
</main>
<footer>
<p>© ২০২৪ আমার ব্লগ। সর্বাধিকার সংরক্ষিত।</p>
</footer>
✨ শিক্ষার্থীদের জন্য টিপস
শুরুর দিকে: <html>, <head>, <body>, <h1> থেকে <p> পর্যন্ত ভালোভাবে বুঝে প্র্যাকটিস করুন। প্রতিটি ট্যাগ দিয়ে ছোট প্রজেক্ট তৈরি করুন।
মধ্যম স্তর: ধীরে ধীরে ফর্ম, টেবিল, ইমেজ, লিংক, এবং লেআউট ট্যাগ শিখুন। প্র্যাকটিক্যাল ওয়েবসাইট তৈরি করুন।
উন্নত স্তর: সেমান্টিক HTML5 ট্যাগ এবং এসইও অপটিমাইজেশন শিখুন। প্রকল্প-ভিত্তিক কাজ করুন।
💡 স্মার্ট টিপ: প্রতিটি ট্যাগের উদাহরণ এবং আউটপুট দেখে দেখে শিখলে মনে দীর্ঘদিন থাকবে। এই পেজটি বুকমার্ক করুন এবং নিয়মিত রেফার করুন!