🌐 ইন্টারনেট কীভাবে কাজ করে — সম্পূর্ণ নোট

এই সেকশনে ইন্টারনেটের মূল ধারণা, কীভাবে ডেটা যায় আসে এবং এর পেছনের প্রযুক্তি সহজ ভাষায় বোঝানো হয়েছে।

🔷 ইন্টারনেট কী?

ইন্টারনেট হলো বিশ্বের কোটি কোটি কম্পিউটার, ফোন এবং ডিভাইসের একটি বিশাল নেটওয়ার্ক — যেগুলো একে অপরের সাথে যুক্ত এবং তথ্য আদান-প্রদান করতে পারে।

সহজ ভাষায় বলতে গেলে — ইন্টারনেট হলো একটা বিশ্বব্যাপী মহাসড়ক, আর ডেটা হলো সেই রাস্তায় চলা গাড়ি।

⚠️ ইন্টারনেট ≠ ওয়েব (WWW): ইন্টারনেট হলো পুরো নেটওয়ার্ক পরিকাঠামো। আর World Wide Web (WWW) হলো সেই নেটওয়ার্কের উপর চলা একটি সার্ভিস — শুধু ওয়েবসাইট দেখার অংশটুকু।

🔷 ইন্টারনেট কীভাবে কাজ করে?

তুমি যখন ব্রাউজারে google.com লিখে Enter চাপো, তখন পেছনে অনেক কিছু ঘটে। ধাপগুলো দেখো:

ধাপ ১ — তুমি Request পাঠাও Client

তোমার কম্পিউটার বা ফোন হলো Client। তুমি ব্রাউজারে google.com লিখলে তোমার ডিভাইস গুগলের সার্ভারের কাছে বলে — "আমাকে google.com পেজটা দাও।"

ধাপ ২ — DNS ঠিকানা খুঁজে বের করে DNS Lookup

কম্পিউটার google.com নাম চেনে না — সে চেনে IP Address (যেমন: 142.250.190.46)। তাই প্রথমে DNS সার্ভার-এর কাছে জিজ্ঞেস করে — "google.com মানে কোন IP?"

✅ DNS মনে রাখার উপায়: DNS হলো ইন্টারনেটের ফোনবুক — নাম দিলে নম্বর বের করে দেয়।

ধাপ ৩ — Server Response দেয় Server

IP পাওয়ার পর তোমার ডিভাইস সরাসরি গুগলের সার্ভারে request পাঠায়। সার্ভার তখন HTML, CSS, JavaScript ফাইল পাঠিয়ে দেয় — এটাই Response।

ধাপ ৪ — ব্রাউজার পেজ দেখায় Render

সার্ভার থেকে পাওয়া ফাইলগুলো ব্রাউজার পড়ে এবং তোমার সামনে সুন্দর পেজ হিসেবে দেখায়। এই পুরো প্রক্রিয়া সাধারণত ১ সেকেন্ডেরও কম সময়ে হয়।

🔷 গুরুত্বপূর্ণ ধারণাগুলো

1. IP Address কী? IP Address

ইন্টারনেটে প্রতিটি ডিভাইসের একটি unique ঠিকানা থাকে — এটাই IP Address। ঠিক যেমন বাড়ির ডাক ঠিকানা থাকলে চিঠি পাঠানো যায়।

IPv4 উদাহরণ : 192.168.1.1 IPv6 উদাহরণ : 2001:0db8:85a3:0000:0000:8a2e:0370:7334

2. DNS কী? DNS

DNS (Domain Name System) হলো ইন্টারনেটের ফোনবুক। মানুষ facebook.com মনে রাখতে পারে, কিন্তু 157.240.221.35 মনে রাখা কঠিন — DNS এই কাজটা করে দেয়।

তুমি লিখো : google.com DNS বলে : 142.250.190.46 সার্ভার : ঐ IP-তে request যায়

3. HTTP ও HTTPS কী? Protocol

HTTP হলো Client ও Server-এর মধ্যে কথা বলার নিয়ম। HTTPS হলো সেই নিয়মের সুরক্ষিত সংস্করণ — ডেটা এনক্রিপ্টেড থাকে, তাই কেউ মাঝখান থেকে পড়তে পারে না।

❌ http://example.com → নিরাপদ নয় ✅ https://example.com → নিরাপদ (এনক্রিপ্টেড)

⚠️ সতর্কতা: যে সাইটে https:// নেই সেখানে পাসওয়ার্ড বা ব্যাংক তথ্য দিও না — ডেটা চুরি হতে পারে।

4. Packet কী? Packet

ইন্টারনেটে ডেটা একসাথে পাঠানো হয় না। বরং ছোট ছোট টুকরায় ভেঙে পাঠানো হয় — এগুলোকে Packet বলে। গন্তব্যে পৌঁছে সব Packet আবার জোড়া লেগে পুরো ডেটা তৈরি হয়।

✅ Packet মনে রাখার উপায়: একটা বড় চিঠিকে অনেক ছোট ছোট খামে ভরে পাঠানো হলো — সব খাম পৌঁছালে পুরো চিঠি পাওয়া যায়।

🔷 Client-Server মডেল

ইন্টারনেটের পুরো কাজ মূলত দুই পক্ষের মধ্যে:

পক্ষ	কে?	কাজ	উদাহরণ
Client	তোমার ডিভাইস	Request পাঠায়, Response দেখায়	Chrome, Firefox, Safari
Server	ওয়েবসাইটের কম্পিউটার	Request নেয়, ফাইল পাঠায়	Google, Facebook-এর সার্ভার

তুমি (Client) → "google.com দাও" → Google Server তুমি (Client) ← HTML/CSS/JS ফাইল ← Google Server ব্রাউজার পেজ দেখায় ✅

🔷 ইন্টারনেট কীসের উপর দিয়ে চলে?

ইন্টারনেট মূলত তিনটি মাধ্যমে চলে:

1. Fiber Optic Cable তার

সমুদ্রের তলা দিয়ে বিছানো হাজার হাজার কিলোমিটার লম্বা আলোর তার। এই তারেই বিশ্বের এক দেশ থেকে আরেক দেশে ডেটা যায় — আলোর গতিতে।

2. WiFi বেতার

Router থেকে বেতার তরঙ্গের মাধ্যমে ডিভাইসে ইন্টারনেট পৌঁছায়। তার ছাড়াই কাজ করে — তবে দূরত্ব বাড়লে গতি কমে।

3. Mobile Data (4G / 5G) মোবাইল

মোবাইল টাওয়ার থেকে রেডিও তরঙ্গে সরাসরি ফোনে ইন্টারনেট আসে। বাংলাদেশে বর্তমানে 4G সবচেয়ে বেশি ব্যবহৃত।

🔷 দ্রুত রেফারেন্স — গুরুত্বপূর্ণ শব্দগুলো

শব্দ	পুরো নাম	সহজ মানে
Internet	Interconnected Network	বিশ্বের সব ডিভাইসের নেটওয়ার্ক
WWW	World Wide Web	ইন্টারনেটের ওয়েবসাইটের অংশ
IP	Internet Protocol	ডিভাইসের ইন্টারনেট ঠিকানা
DNS	Domain Name System	নামকে IP-তে রূপান্তর করে
HTTP	HyperText Transfer Protocol	Client-Server কথা বলার নিয়ম
HTTPS	HTTP Secure	নিরাপদ এনক্রিপ্টেড সংস্করণ
Client	—	যে request করে (ব্রাউজার)
Server	—	যে response দেয় (ওয়েবসাইটের কম্পিউটার)
Packet	—	ডেটার ছোট টুকরা
Bandwidth	—	একবারে কতটুকু ডেটা যেতে পারে

🎨 Frontend Development — Markup Languages

এই সেকশনে Frontend Development কী, Markup Language কী এবং কীভাবে একটি ওয়েবপেজ তৈরি হয় তা বিস্তারিত বোঝানো হয়েছে।

🔷 Frontend Development কী?

Frontend Development হলো ওয়েবসাইটের যে অংশ ব্যবহারকারী সরাসরি দেখতে এবং ব্যবহার করতে পারে — সেটি তৈরি করার কাজ। বোতাম, মেনু, রঙ, ছবি, লেখা — সব কিছুই Frontend।

✅ মনে রাখার উপায়: একটি রেস্তোরাঁর কথা ভাবো — Frontend হলো ডাইনিং রুম যা তুমি দেখো, আর Backend হলো রান্নাঘর যা তুমি দেখো না।

Frontend-এর তিনটি মূল ভাষা:

ভাষা	পুরো নাম	কাজ	উদাহরণ
HTML	HyperText Markup Language	পেজের কাঠামো তৈরি	শিরোনাম, প্যারাগ্রাফ, বোতাম
CSS	Cascading Style Sheets	পেজের ডিজাইন ও রঙ	রঙ, ফন্ট, সাইজ, লেআউট
JavaScript	JavaScript	পেজকে interactive করা	বোতাম চাপলে কিছু হওয়া

বাড়ির সাথে তুলনা: HTML → বাড়ির কাঠামো (দেয়াল, দরজা, জানালা) CSS → বাড়ির সাজসজ্জা (রঙ, আসবাবপত্র) JavaScript → বাড়ির বৈদ্যুতিক ব্যবস্থা (লাইট জ্বালানো, দরজা খোলা)

🔷 Markup Language কী?

Markup Language হলো এমন একটি ভাষা যেখানে বিশেষ চিহ্ন বা ট্যাগ ব্যবহার করে কম্পিউটারকে বলা হয় — "এই লেখাটা শিরোনাম", "এটা প্যারাগ্রাফ", "এটা ছবি"।

Markup Language কোনো Programming Language নয় — এখানে কোনো গণনা, লজিক বা সিদ্ধান্ত নেওয়া হয় না। শুধু কনটেন্টের গঠন ও অর্থ বোঝানো হয়।

⚠️ সাধারণ ভুল ধারণা: HTML একটি Programming Language — এটা ভুল। HTML হলো Markup Language। এটা দিয়ে প্রোগ্রাম লেখা যায় না, শুধু পেজের কাঠামো তৈরি করা যায়।

Markup কীভাবে কাজ করে:

বাংলাদেশ একটি সুন্দর দেশ  <h1>বাংলাদেশ</h1> ← এটা শিরোনাম <p>একটি সুন্দর দেশ।</p> ← এটা প্যারাগ্রাফ <a>আরও পড়ুন</a> ← এটা লিংক

🔷 HTML — Web-এর মূল Markup Language

HTML নামের অর্থ:

H → HyperText → লিংক করা লেখা (ক্লিক করলে অন্য পেজে যায়) T → Text → লেখা M → Markup → ট্যাগ দিয়ে চিহ্নিত করা L → Language → কম্পিউটারের সাথে কথা বলার নিয়ম

একটি HTML ফাইলের মূল কাঠামো:

<!DOCTYPE html>  <html lang="bn">  <head>  <meta charset="UTF-8">  <title>আমার পেজ</title>  </head> <body>  <h1>স্বাগতম!</h1> <p>এটি আমার প্রথম ওয়েবপেজ।</p> </body> </html>

✅ মনে রাখার উপায়: <head> = বইয়ের প্রচ্ছদ (তথ্য আছে কিন্তু গল্প নেই) | <body> = বইয়ের ভেতরের পাতা (আসল কনটেন্ট)

🔷 HTML ট্যাগের গঠন

সাধারণ ট্যাগ (Opening + Closing): Regular Tag

<h1> বাংলাদেশ </h1> ↑ ↑ ↑ Opening Tag Content Closing Tag

Self-Closing ট্যাগ (নিজেই বন্ধ হয়): Self-Closing

Attribute — ট্যাগের অতিরিক্ত তথ্য: Attribute

<a href="https://google.com">গুগলে যাও</a> ↑ ↑ Attribute Value (মান) <img src="photo.jpg" alt="আমার ছবি"> ↑ ↑ Attribute Attribute

✅ Attribute মনে রাখার উপায়: ট্যাগ হলো মানুষ, Attribute হলো তার বৈশিষ্ট্য — নাম, বয়স, পেশা। যেমন: <a href="..."> → 'a' ট্যাগের href বৈশিষ্ট্য।

🔷 অন্যান্য Markup Language

HTML ছাড়াও আরও কিছু পরিচিত Markup Language আছে:

ভাষা	কোথায় ব্যবহার হয়	উদাহরণ
HTML	ওয়েবপেজ তৈরি	সব ওয়েবসাইট
XML	ডেটা আদান-প্রদান	API, কনফিগ ফাইল
Markdown	সহজে ডকুমেন্ট লেখা	GitHub README, Notion
SVG	ভেক্টর গ্রাফিক্স	লোগো, আইকন

⚠️ মনে রেখো: Web Development শিখতে হলে প্রথমে HTML ভালোভাবে শেখো — এটাই সব কিছুর ভিত্তি। তারপর CSS, তারপর JavaScript।

🔷 দ্রুত রেফারেন্স — সব ধারণা এক নজরে

ধারণা	মানে	সহজ উদাহরণ
Frontend	ব্যবহারকারী যা দেখে	ওয়েবসাইটের বোতাম, মেনু, রঙ
Backend	পেছনের কাজ	ডেটাবেজ, সার্ভার লজিক
Markup Language	ট্যাগ দিয়ে কনটেন্ট চিহ্নিত করা	HTML, XML, Markdown
HTML	ওয়েবপেজের কাঠামো	শিরোনাম, প্যারাগ্রাফ, ছবি
Tag	HTML-এর চিহ্ন	`<h1>`, `<p>`, `<img>`
Attribute	ট্যাগের অতিরিক্ত তথ্য	`href`, `src`, `alt`
<head>	পেজের তথ্য (দেখা যায় না)	title, charset, meta
<body>	পেজের মূল কনটেন্ট	সব লেখা, ছবি, বোতাম

🛠️ তোমার প্রথম HTML ফাইল

এই সেকশনে VSCode সেটআপ, প্রথম HTML ফাইল তৈরি এবং Basic ট্যাগগুলো কমেন্টসহ বোঝানো হয়েছে।

🔷 VSCode কী?

VSCode (Visual Studio Code) হলো Microsoft-এর তৈরি একটি ফ্রি Code Editor — যেখানে তুমি HTML, CSS, JavaScript সহ যেকোনো ভাষায় কোড লিখতে পারবে।

✅ কেন VSCode? ফ্রি, হালকা, বাংলাদেশসহ সারাবিশ্বে সবচেয়ে বেশি ব্যবহৃত। অনেক Extension পাওয়া যায় যা কাজ সহজ করে।

🔷 VSCode সেটআপ — ধাপে ধাপে

ধাপ ১ — ডাউনলোড করো Download

ব্রাউজারে যাও এবং ডাউনলোড করো:

🌐 ওয়েবসাইট : https://code.visualstudio.com 1. সাইটে গিয়ে "Download for Windows" বোতামে ক্লিক করো 2. .exe ফাইল ডাউনলোড হবে

ধাপ ২ — ইনস্টল করো Install

ডাউনলোড হওয়া ফাইলে ডাবল ক্লিক করো এবং ইনস্টল করো। ইনস্টলের সময় এই দুটো অপশন অবশ্যই চেক করো:

✅ "Add to PATH" ✅ "Open with Code" (right-click menu-তে যোগ হবে)

ধাপ ৩ — Prettier Extension ইনস্টল করো Extension

VSCode খুলে বাম পাশের Extensions আইকনে ক্লিক করো এবং সার্চ করো:

1. Prettier - Code formatter → ইনস্টল করো ✅ 2. Live Server → ইনস্টল করো ✅

✅ Live Server কেন? HTML ফাইলে কিছু পরিবর্তন করলে ব্রাউজার নিজে নিজে রিফ্রেশ হয় — বারবার F5 চাপতে হয় না।

🔷 প্রথম HTML ফাইল তৈরি করো

ধাপ ১ — Project ফোল্ডার তৈরি করো Folder

Desktop → Right Click → New Folder নাম দাও: my-first-website ⚠️ ফোল্ডারের নামে স্পেস দিও না → my first website ❌ ✅ হাইফেন ব্যবহার করো → my-first-website ✅

ধাপ ২ — VSCode-এ ফোল্ডার খোলো Open Folder

VSCode খোলো → File → Open Folder → my-first-website ফোল্ডার সিলেক্ট করো

ধাপ ৩ — HTML ফাইল তৈরি করো New File

VSCode-এর বাম পাশে Explorer-এ New File আইকনে ক্লিক করো নাম দাও: index.html ✅ মেইন পেজের নাম সবসময় index.html রাখো কারণ: ব্রাউজার সবার আগে index.html খোঁজে

ধাপ ৪ — HTML Boilerplate তৈরি করো Boilerplate

index.html ফাইল খুলে ! টাইপ করো, তারপর Enter চাপো — VSCode স্বয়ংক্রিয়ভাবে পুরো কাঠামো তৈরি করে দেবে।

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

⚠️ lang="en" পরিবর্তন করো: বাংলা পেজ হলে lang="en" পরিবর্তন করে lang="bn" লিখো। এটা স্ক্রিন রিডার ও Search Engine-কে সঠিক তথ্য দেয়।

ধাপ ৫ — ব্রাউজারে দেখো Live Server

উপায় ১: HTML ফাইলে Right Click → "Open with Live Server" উপায় ২: VSCode-এর নিচের বারে "Go Live" লেখায় ক্লিক করো ✅ ব্রাউজারে http://127.0.0.1:5500/index.html খুলবে

🔷 Boilerplate-এর প্রতিটি লাইন বোঝো

লাইন	কাজ	দরকার কি?
`<!DOCTYPE html>`	ব্রাউজারকে বলে "এটি HTML5 ফাইল"	✅ অবশ্যই
`<html lang="bn">`	পুরো পেজের ভাষা বাংলা বলে জানায়	✅ অবশ্যই
`<meta charset="UTF-8">`	বাংলাসহ সব ভাষার অক্ষর সাপোর্ট করে	✅ অবশ্যই
`<meta name="viewport"...>`	মোবাইলে সঠিকভাবে দেখানোর জন্য	✅ অবশ্যই
`<title>`	ব্রাউজারের ট্যাবে যে নাম দেখায়	✅ অবশ্যই
`<head>`	পেজের তথ্য রাখার জায়গা (দেখা যায় না)	✅ অবশ্যই
`<body>`	পেজের মূল কনটেন্ট (এটাই দেখা যায়)	✅ অবশ্যই

🔷 Basic HTML ট্যাগগুলো

এগুলো HTML-এর সবচেয়ে বেশি ব্যবহৃত ট্যাগ — প্রতিটি ওয়েবপেজেই থাকে।

1. Heading ট্যাগ — শিরোনাম h1 – h6

<h1>সবচেয়ে বড় শিরোনাম</h1>  <h2>সেকশনের শিরোনাম</h2> <h3>উপসেকশনের শিরোনাম</h3> <h4>ছোট বিষয়</h4> <h5>আরও ছোট</h5> <h6>সবচেয়ে ছোট শিরোনাম</h6>

2. Paragraph ট্যাগ — অনুচ্ছেদ <p>

<p>এটি একটি অনুচ্ছেদ। এখানে সাধারণ লেখা থাকে।</p> <p>এটি দ্বিতীয় অনুচ্ছেদ। প্রতিটি p আলাদা লাইনে শুরু হয়।</p>

3. Link ট্যাগ — লিংক <a>

<a href="https://google.com">গুগলে যাও</a>  <a href="https://google.com" target="_blank">নতুন ট্যাবে খোলো</a>  <a href="#contact">যোগাযোগ</a>

4. Image ট্যাগ — ছবি <img>

<img src="photo.jpg" alt="আমার ছবি">  <img src="photo.jpg" alt="আমার ছবি" width="300" height="200">  <img src="https://example.com/photo.jpg" alt="অনলাইন ছবি">

⚠️ alt অবশ্যই দিতে হবে: alt ছাড়া ছবি দিলে স্ক্রিন রিডার ও Google বুঝতে পারে না। ছবির বিষয়বস্তু সংক্ষেপে লিখো।

5. List ট্যাগ — তালিকা <ul> <ol>

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>  <ol> <li>প্রথমে HTML শিখবো</li> <li>তারপর CSS শিখবো</li> <li>তারপর JavaScript</li> </ol>

6. div ও span — কনটেন্ট গ্রুপিং করা <div> <span>

<div> <h2>আমার সেকশন</h2> <p>এই সেকশনের লেখা।</p> </div>  <p>আমার প্রিয় রঙ <span>নীল</span>।</p>

✅ div vs span: <div> নতুন লাইনে শুরু হয় (block), <span> একই লাইনে থাকে (inline)।

🔷 সম্পূর্ণ প্রথম HTML পেজের কোড

এখন সব Basic ট্যাগ একসাথে ব্যবহার করে একটি পূর্ণ পেজ বানাই:

<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>আমার প্রথম ওয়েবসাইট</title> </head> <body>  <h1>আমার প্রথম ওয়েবসাইটে স্বাগতম!</h1>  <h2>আমার পরিচয়</h2> <p>আমার নাম <strong>তানভীর</strong>। আমি Web Development শিখছি।</p>  <img src="photo.jpg" alt="তানভীরের ছবি" width="200">  <h2>আমি যা শিখছি</h2> <ul> <li>HTML — ওয়েবপেজের কাঠামো</li> <li>CSS — ডিজাইন ও রঙ</li> <li>JavaScript — ইন্টারেকটিভিটি</li> </ul>  <h2>দরকারি লিংক</h2> <p> <a href="https://google.com" target="_blank">গুগলে যাও</a> </p>  <hr>  <p><small>© ২০২৬ আমার প্রথম ওয়েবসাইট</small></p> </body> </html>

🔷 দ্রুত রেফারেন্স — Basic ট্যাগ এক নজরে

ট্যাগ	কাজ	Closing ট্যাগ?	কোথায় ব্যবহার
`<h1>–<h6>`	শিরোনাম	✅ হ্যাঁ	টাইটেল, সেকশন নাম
`<p>`	অনুচ্ছেদ	✅ হ্যাঁ	সাধারণ লেখা
`<a>`	লিংক	✅ হ্যাঁ	অন্য পেজে যেতে
`<img>`	ছবি	❌ না	ছবি দেখাতে
`<ul>`	বুলেট তালিকা	✅ হ্যাঁ	নম্বর ছাড়া তালিকা
`<ol>`	নম্বরওয়ালা তালিকা	✅ হ্যাঁ	ধাপ বা ক্রম বোঝাতে
`<li>`	তালিকার আইটেম	✅ হ্যাঁ	ul বা ol এর ভেতরে
`<div>`	ব্লক কনটেইনার	✅ হ্যাঁ	সেকশন তৈরিতে
`<span>`	ইনলাইন কনটেইনার	✅ হ্যাঁ	লেখার মধ্যে অংশ আলাদা করতে
`<br>`	লাইন ব্রেক	❌ না	নতুন লাইনে যেতে
`<hr>`	বিভাজক রেখা	❌ না	দুই অংশ আলাদা করতে

📜 HTML লেখার নিয়মকানুন

ট্যাগ, অ্যাট্রিবিউট, কেস ইনসেনসিটিভিটি, HTML Entities, কমেন্ট এবং Whitespace — HTML-এর ভেতরের জরুরি সব নিয়ম একসাথে।

🔷 Tag এবং Attribute

ট্যাগের দুটি ধরন Tag Types

<h1>এটি শিরোনাম</h1> <p>এটি অনুচ্ছেদ</p> <a href="#">এটি লিংক</a>  <br>  <hr>  <img src="">  <input>  <meta>  <link>

Attribute — ট্যাগের অতিরিক্ত তথ্য Attribute

<tagname attribute="value">কনটেন্ট</tagname>  <a href="https://google.com">গুগল</a>  <a href="https://google.com" target="_blank" title="গুগলে যাও">গুগল</a>  <img src="photo.jpg" alt="আমার ছবি" width="300" height="200">

✅ Attribute-এর নিয়ম: সবসময় Opening Tag-এ লিখতে হয়, Value সবসময় " " Double Quote-এর ভেতরে রাখতে হয়।

সবচেয়ে বেশি ব্যবহৃত Attribute:

Attribute	কোন ট্যাগে	কাজ
`href`	`<a>`	লিংকের ঠিকানা
`src`	`<img>`, `<script>`	ফাইলের ঠিকানা
`alt`	`<img>`	ছবির বিকল্প লেখা
`id`	যেকোনো ট্যাগে	Unique পরিচয় (পেজে একটাই)
`class`	যেকোনো ট্যাগে	গ্রুপ পরিচয় (একাধিকবার)
`style`	যেকোনো ট্যাগে	সরাসরি CSS দিতে
`title`	যেকোনো ট্যাগে	Hover করলে tooltip দেখায়
`target`	`<a>`	লিংক কোথায় খুলবে

🔷 Case Insensitivity — বড় হাতের/ছোট হাতের লেখা

HTML Case Insensitive — মানে ট্যাগ বড় হাতের/ছোট হাতের যে কোনো ভাবে লিখলে ব্রাউজার বুঝতে পারে।

<H1>বড় হাতের লেখা</H1> <h1>ছোট হাতের লেখা</h1> <H1>মিশিয়ে লেখা</h1>  <img SRC="photo.jpg" ALT="ছবি">  <img src="photo.jpg" alt="ছবি">

⚠️ বড় হাতের যদিও কাজ করে, তবুও সবসময় ছোট হাতের লিখবে: HTML5-এর অফিশিয়াল নিয়ম হলো ছোট হাতের লেখা। বড় হাতের লিখলে কাজ করলেও এটা প্রফেশনাল প্র্যাকটিস নয়।

লেখার ধরন	উদাহরণ	কাজ করে?	ব্যবহার করবো?
ছোট হাতের (lowercase)	`<h1>`	✅ হ্যাঁ	✅ সবসময়
বড় হাতের (uppercase)	`<H1>`	✅ হ্যাঁ	❌ না
মিশ্র (mixed)	`<H1>`	✅ হ্যাঁ	❌ না

🔷 HTML Entities — বিশেষ চিহ্ন লেখার উপায়

HTML-এ কিছু চিহ্ন সরাসরি লেখা যায় না — কারণ ব্রাউজার সেগুলোকে ট্যাগ বা বিশেষ কোড মনে করে। তখন HTML Entity ব্যবহার করতে হয়।

Entity-এর গঠন:

&entity-name;  &#entity-number;   < অথবা < → দেখায়: < > অথবা > → দেখায়: > & অথবা & → দেখায়: &

সবচেয়ে বেশি ব্যবহৃত Entities:

চিহ্ন	Entity কোড	নম্বর কোড	কখন দরকার
< (less than)	`<`	`<`	HTML কোড লেখার সময়
> (greater than)	`>`	`>`	HTML কোড লেখার সময়
& (ampersand)	`&`	`&`	"এবং" চিহ্ন লিখতে
(space)	` `	` `	বাড়তি ফাঁকা জায়গা দিতে
" (double quote)	`"`	`"`	Attribute-এর ভেতরে quote লিখতে
' (apostrophe)	`'`	`'`	Single quote লিখতে
© (copyright)	`©`	`©`	কপিরাইট চিহ্ন
® (registered)	`®`	`®`	Registered trademark
→ (arrow)	`→`	`→`	ডানে তীর চিহ্ন
★ (star)	`★`	`★`	তারার চিহ্ন

রিয়েল উদাহরণ:

<p>HTML-এ <h1> দিয়ে শিরোনাম লেখা হয়।</p>  <p>HTML-এ <h1> দিয়ে শিরোনাম লেখা হয়।</p>  <p>নাম:   তানভীর</p>  <p>© ২০২৬ DevShikhi</p>

✅ মনে রাখো: Entity সবসময় & দিয়ে শুরু হয় এবং ; (সেমিকোলন) দিয়ে শেষ হয়। সেমিকোলন ভুলে গেলে Entity কাজ করবে না।

🔷 HTML Comments — কমেন্ট লেখার নিয়ম

Comment হলো কোডের ভেতরে নোট লেখার জায়গা। ব্রাউজার Comment পড়ে না — পেজে দেখায় না। শুধু কোড দেখার সময় তুমি দেখতে পাবে।

Comment-এর গঠন:

-->

Comment-এর বিভিন্ন ব্যবহার:

<nav>...</nav>    <img src="logo.png" alt="লোগো">

⚠️ সতর্কতা: Comment পেজে দেখা না গেলেও Browser-এ "View Source" করলে যে কেউ Comment পড়তে পারে। তাই Comment-এ পাসওয়ার্ড বা গোপন তথ্য লিখবে না।

✅ Shortcut: VSCode-এ যেকোনো লাইন সিলেক্ট করে Ctrl + / চাপলে স্বয়ংক্রিয়ভাবে Comment হয়ে যাবে।

🔷 Whitespace — HTML-এ ফাঁকা জায়গার নিয়ম

HTML-এ Whitespace মানে Space, Tab এবং নতুন লাইন। তুমি কোডে যতই ফাঁকা জায়গা দাও না কেন, ব্রাউজার সবসময় শুধু একটাই Space দেখায়।

Whitespace কীভাবে কাজ করে: দেখো

<p>বাংলাদেশ একটি সুন্দর দেশ।</p>   <p>প্রথম কথা। দ্বিতীয় কথা।</p>   <p>আবিদুর রহমান</p>

Whitespace সমস্যার সমাধান: Solution

<p>আবিদুর   রহমান</p>   <p>প্রথম লাইন।<br>দ্বিতীয় লাইন।</p>  <p>প্রথম অনুচ্ছেদ।</p> <p>দ্বিতীয় অনুচ্ছেদ।</p>  <pre> নাম : আবিদুর রহমান। বয়স : ২৫। ঠিকানা : ঢাকা, বাংলাদেশ। </pre>

Whitespace তুলনার চার্ট:

কোডে যা লিখলে	ব্রাউজারে যা দেখায়	সমাধান
অনেক Space	একটাই Space	` ` ব্যবহার করো
কোডে নতুন লাইন	Space হিসেবে দেখায়	`<br>` ব্যবহার করো
Tab চাপা	একটাই Space	` ` ব্যবহার করো
নতুন অনুচ্ছেদ	Space হিসেবে দেখায়	নতুন `<p>` ব্যবহার করো
হুবহু ফরম্যাট চাই	—	`<pre>` ব্যবহার করো

✅ টিপস: কোডে Whitespace দিয়ে সুন্দর ইন্ডেন্ট করো — এটা পেজে দেখায় না কিন্তু কোড পড়তে সহজ হয়। Professional Developer-রা সবসময় কোড ইন্ডেন্ট করে লেখেন।

🔷 দ্রুত রেফারেন্স — সব নিয়ম এক নজরে

বিষয়	নিয়ম	উদাহরণ
Tag	সবসময় ছোট হাতের লিখবে	`<h1>` ✅ `<H1>` ❌
Attribute	Opening Tag-এ, Value " "-এ	`<a href="...">`
Case	Case Insensitive, তবে lowercase লিখবে	`<p>` = `<P>`
Entity	`&` দিয়ে শুরু, `;` দিয়ে শেষ	`<` → <
Comment	`<!--` দিয়ে শুরু, `-->` দিয়ে শেষ	`<!-- নোট -->`
Whitespace	যতই দাও, একটাই Space দেখায়	বাড়তি Space চাইলে ` `

📚 HTML Headings — সম্পূর্ণ নোট

এই ফাইলে HTML-এর সব হেডিং ট্যাগ (h1 থেকে h6) উদাহরণসহ বোঝানো হয়েছে।

🔷 HTML Heading কী?

HTML-এ Heading মানে শিরোনাম। বইয়ে যেমন অধ্যায়ের নাম থাকে, ওয়েবপেজেও বিভিন্ন অংশের নাম বোঝাতে Heading ব্যবহার হয়।

মোট ৬টি হেডিং ট্যাগ আছে:

<h1> — সবচেয়ে বড় ও গুরুত্বপূর্ণ
<h2> — দ্বিতীয় গুরুত্বপূর্ণ
<h3> — তৃতীয়
<h4> — চতুর্থ
<h5> — পঞ্চম
<h6> — সবচেয়ে ছোট

🔷 প্রতিটি Heading দেখতে কেমন

এটি h1 ট্যাগ h1 — মেইন টাইটেল

এটি h2 ট্যাগ h2 — সেকশন

এটি h3 ট্যাগ h3 — উপসেকশন

এটি h4 ট্যাগ h4 — বিষয়

এটি h5 ট্যাগ h5 — ছোট লেবেল

এটি h6 ট্যাগ h6 — সাইডনোট

🔷 সাইজ তুলনার চার্ট

ট্যাগ	ডিফল্ট সাইজ	কোথায় ব্যবহার	পেজে কতবার?
`<h1>`	~32px	পেজের মেইন টাইটেল	শুধু ১ বার
`<h2>`	~24px	বড় সেকশন	যত দরকার
`<h3>`	~19px	সেকশনের উপবিভাগ	যত দরকার
`<h4>`	~16px	ছোট বিষয় বা পয়েন্ট	যত দরকার
`<h5>`	~13px	লেবেল, ক্যাটাগরি	কম
`<h6>`	~11px	সূত্র, নোট	খুব কম

🔷 গুরুত্বপূর্ণ নিয়ম ও সতর্কতা

⚠️ h1 একটাই থাকবে: পুরো পেজে শুধুমাত্র একটি <h1> ট্যাগ ব্যবহার করো।

⚠️ ক্রম মানো: h1 → h2 → h3 এভাবে ধাপে ধাপে যাও। মাঝখানের ধাপ বাদ দিও না।

⚠️ শুধু সাইজের জন্য heading ব্যবহার করো না। বড় লেখা চাইলে CSS-এ font-size দাও।

✅ টিপস: Heading ট্যাগ ব্যবহার করলে স্ক্রিন রিডার এবং Google সার্চ পেজটা সঠিকভাবে বুঝতে পারে।

✅ SEO টিপস: h1 এবং h2-তে গুরুত্বপূর্ণ কীওয়ার্ড রাখলে Google সার্চে পেজ উপরে আসে।

🔷 বইয়ের সাথে তুলনা

HTML Heading	বইয়ের মতো করলে
`<h1>`	📗 বইয়ের নাম
`<h2>`	📑 অধ্যায়ের নাম
`<h3>`	📄 অনুচ্ছেদের শিরোনাম
`<h4>`	🔹 ছোট পয়েন্টের শিরোনাম
`<h5>`	🔸 উপ-পয়েন্ট
`<h6>`	📌 পাদটীকা

📚 HTML Paragraph — সম্পূর্ণ নোট

এই ফাইলে HTML-এর Paragraph ট্যাগ এবং সংশ্লিষ্ট ট্যাগগুলো উদাহরণসহ বোঝানো হয়েছে।

🔷 HTML Paragraph কী?

HTML-এ <p> ট্যাগ দিয়ে অনুচ্ছেদ (paragraph) লেখা হয়। ওয়েবপেজের যেকোনো সাধারণ লেখা <p> ট্যাগের ভেতরে রাখতে হয়।

ব্রাউজার প্রতিটি <p> ট্যাগের পরে স্বয়ংক্রিয়ভাবে একটু ফাঁকা জায়গা (margin) তৈরি করে — আলাদা করে <br> দিতে হয় না।

সিনট্যাক্স (লেখার নিয়ম):

<p>এখানে তোমার লেখা থাকবে</p>

🔷 সহজ উদাহরণ

একটি Paragraph:

<p>বাংলাদেশ একটি সুন্দর দেশ।</p>

একাধিক Paragraph:

<p>এটি প্রথম অনুচ্ছেদ।</p> <p>এটি দ্বিতীয় অনুচ্ছেদ। ব্রাউজার নিজেই দুটোর মাঝে ফাঁকা দেবে।</p> <p>এটি তৃতীয় অনুচ্ছেদ। প্রতিটি <p> আলাদা লাইনে শুরু হয়।</p>

🔷 Paragraph-এর সাথে যে ট্যাগগুলো ব্যবহার হয়

1. <br> ট্যাগ — লাইন ব্রেক Line Break

একই <p>-এর ভেতরে নতুন লাইনে যেতে চাইলে <br> ব্যবহার করো।

<p> প্রথম লাইন।<br> দ্বিতীয় লাইন একই paragraph-এ।<br> তৃতীয় লাইন। </p>

2. <hr> ট্যাগ — বিভাজক রেখা Horizontal Rule

দুটো অংশের মাঝে একটা আড়াআড়ি রেখা দেখাতে <hr> ব্যবহার করো।

<p>প্রথম অংশের লেখা।</p> <hr> <p>দ্বিতীয় অংশের লেখা।</p>

3. <pre> ট্যাগ — হুবহু ফরম্যাট ধরে রাখে Preformatted

<pre> ট্যাগে লেখা হুবহু যেভাবে টাইপ করবে সেভাবে দেখাবে — স্পেস ও নতুন লাইনসহ।

<pre> নাম : তানভীর বিষয় : Web Development ব্যাচ : ২০২৬ </pre>

🔷 Paragraph-এর ভেতরে Text Formatting ট্যাগ

<p> ট্যাগের ভেতরে লেখার ধরন পরিবর্তন করতে নিচের ট্যাগগুলো ব্যবহার করা যায়:

ট্যাগ	কাজ	উদাহরণ কোড	আউটপুট
`<strong>`	গুরুত্বপূর্ণ / Bold	`<strong>গুরুত্বপূর্ণ</strong>`	গুরুত্বপূর্ণ
`<em>`	জোর দেওয়া / Italic	`<em>বিশেষ লেখা</em>`	বিশেষ লেখা
`<b>`	শুধু Bold দেখাতে	`<b>মোটা লেখা</b>`	মোটা লেখা
`<i>`	শুধু Italic দেখাতে	`<i>বাঁকা লেখা</i>`	বাঁকা লেখা
`<u>`	আন্ডারলাইন	`<u>দাগানো লেখা</u>`	দাগানো লেখা
`<mark>`	হাইলাইট করা	`<mark>হাইলাইট</mark>`	হাইলাইট
`<small>`	ছোট লেখা	`<small>ছোট লেখা</small>`	ছোট লেখা
`<del>`	মুছে ফেলা লেখা	`<del>পুরনো দাম</del>`	~~পুরনো দাম~~
`<ins>`	নতুন যোগ করা	`<ins>নতুন দাম</ins>`	নতুন দাম
`<sup>`	উপরে ছোট লেখা	`x<sup>2</sup>`	x²
`<sub>`	নিচে ছোট লেখা	`H<sub>2</sub>O`	H₂O

🔷 রিয়েল উদাহরণ — একটি ব্লগ পোস্ট

নিচে একটা ব্লগ আর্টিকেলের কাঠামো দেখানো হলো যেখানে সব ট্যাগ একসাথে ব্যবহার হয়েছে:

<h1>বাংলাদেশের সেরা পাঁচটি খাবার</h1>  <p><small>লেখক: তাহমিনা | তারিখ: ১৮ মে, ২০২৬</small></p> <hr>  <p> বাংলাদেশের খাবারের ঐতিহ্য অনেক <strong>সমৃদ্ধ</strong>। এখানে <em>ভাত, মাছ এবং মসলা</em> দিয়ে তৈরি খাবারই বেশি জনপ্রিয়। </p>  <p> আগে ইলিশের দাম ছিল <del>৮০০ টাকা</del>, এখন <ins>১২০০ টাকা</ins>। </p>  <p>রান্নার তাপমাত্রা হওয়া উচিত ১০০<sup>°</sup>C।</p>  <p> মনে রাখো: <mark>তাজা উপকরণ ব্যবহার করলে রান্না সুস্বাদু হয়।</mark> </p>

🔷 গুরুত্বপূর্ণ নিয়ম ও সতর্কতা

⚠️ HTML-এ Extra Space কাজ করে না: কোডে যতই স্পেস দাও না কেন, ব্রাউজার শুধু একটাই স্পেস দেখাবে। বেশি ফাঁকা দরকার হলে CSS বা   ব্যবহার করো।

⚠️ লাইন ব্রেকের জন্য <br><br> দিও না: নতুন অনুচ্ছেদের জন্য নতুন <p> ট্যাগ ব্যবহার করো — এটি সঠিক পদ্ধতি।

⚠️ Closing ট্যাগ ভুলো না: <p> শুরু করলে </p> দিয়ে বন্ধ করতে হবে। তবে <br> এবং <hr> self-closing — এদের closing ট্যাগ লাগে না।

✅ টিপস: <strong> এবং <b> দুটোই Bold দেখায়, কিন্তু <strong> বেশি ভালো — কারণ এটি স্ক্রিন রিডারকে বলে "এটি গুরুত্বপূর্ণ লেখা"।

✅ টিপস: <em> এবং <i> দুটোই Italic দেখায়, কিন্তু <em> বেশি ভালো — কারণ এটি মানে বোঝায় "এই লেখায় জোর দাও"।

✅ টিপস: কবিতা বা এলাইন করা লেখার জন্য <pre> ব্যবহার করো — এটি তোমার স্পেস ও লাইন হুবহু ধরে রাখে।

🔷 দ্রুত রেফারেন্স — সব ট্যাগ এক নজরে

ট্যাগ	পুরো নাম	কাজ	Closing ট্যাগ?
`<p>`	Paragraph	অনুচ্ছেদ লেখা	✅ হ্যাঁ
`<br>`	Line Break	নতুন লাইন	❌ না
`<hr>`	Horizontal Rule	বিভাজক রেখা	❌ না
`<pre>`	Preformatted	হুবহু ফরম্যাট ধরে রাখা	✅ হ্যাঁ
`<strong>`	Strong	গুরুত্বপূর্ণ / Bold	✅ হ্যাঁ
`<em>`	Emphasis	জোর দেওয়া / Italic	✅ হ্যাঁ
`<b>`	Bold	শুধু মোটা দেখানো	✅ হ্যাঁ
`<i>`	Italic	শুধু বাঁকা দেখানো	✅ হ্যাঁ
`<u>`	Underline	আন্ডারলাইন	✅ হ্যাঁ
`<mark>`	Mark	হাইলাইট করা	✅ হ্যাঁ
`<small>`	Small	ছোট লেখা	✅ হ্যাঁ
`<del>`	Delete	মুছে ফেলা (দাগ)	✅ হ্যাঁ
`<ins>`	Insert	নতুন যোগ করা	✅ হ্যাঁ
`<sup>`	Superscript	উপরে ছোট লেখা (x²)	✅ হ্যাঁ
`<sub>`	Subscript	নিচে ছোট লেখা (H₂O)	✅ হ্যাঁ

🔗 Links এবং Text Formatting

এই সেকশনে HTML-এর Link ট্যাগ ও Text Formatting ট্যাগগুলো বিস্তারিত কমেন্টসহ বোঝানো হয়েছে।

🔷 HTML Links — লিংক কী?

HTML-এ <a> (Anchor) ট্যাগ দিয়ে লিংক তৈরি করা হয়। লিংকে ক্লিক করলে অন্য পেজ, সেকশন বা ফাইলে যাওয়া যায়।

Link-এর মূল গঠন:

<a href="গন্তব্যের ঠিকানা">লিংকের লেখা</a> ↑ ↑ Anchor ট্যাগ href Attribute

🔷 Link-এর বিভিন্ন ধরন

1. External Link — বাইরের ওয়েবসাইটে যাওয়া External

<a href="https://google.com">গুগলে যাও</a>  <a href="https://google.com" target="_blank">নতুন ট্যাবে খোলো</a>  <a href="https://google.com" target="_blank" rel="noopener noreferrer"> গুগল </a>

⚠️ target="_blank" ব্যবহার করলে: সবসময় rel="noopener noreferrer" যোগ করো। না দিলে খোলা সাইট তোমার পেজের তথ্য অ্যাক্সেস করতে পারে।

2. Internal Link — একই সাইটের অন্য পেজে যাওয়া Internal

<a href="about.html">আমাদের সম্পর্কে</a> <a href="contact.html">যোগাযোগ</a>  <a href="pages/blog.html">ব্লগ</a>  <a href="../index.html">হোমপেজ</a>

3. Anchor Link — একই পেজের অন্য সেকশনে যাওয়া Anchor

<nav> <a href="#about">পরিচয়</a> <a href="#skills">দক্ষতা</a> <a href="#contact">যোগাযোগ</a> </nav>  <section id="about"> <h2>পরিচয়</h2> <p>আমার নাম তানভীর।</p> </section> <section id="contact"> <h2>যোগাযোগ</h2> </section>

4. Email ও Phone Link — সরাসরি ইমেইল বা কল Mail & Tel

<a href="mailto:tanvir@example.com">ইমেইল পাঠাও</a>  <a href="mailto:tanvir@example.com?subject=হ্যালো&body=আমি যোগাযোগ করতে চাই"> ইমেইল পাঠাও </a>  <a href="tel:+8801700000000">কল করো</a>

5. Download Link — ফাইল ডাউনলোড করা Download

<a href="resume.pdf" download>আমার CV ডাউনলোড করো</a>  <a href="resume.pdf" download="tanvir-cv-2026.pdf"> CV ডাউনলোড (tanvir-cv-2026.pdf) </a>

🔷 Link-এর সব গুরুত্বপূর্ণ Attribute

Attribute	কাজ	উদাহরণ
`href`	গন্তব্যের ঠিকানা	`href="https://google.com"`
`target="_blank"`	নতুন ট্যাবে খোলে	`target="_blank"`
`target="_self"`	একই ট্যাবে খোলে (ডিফল্ট)	`target="_self"`
`rel`	নিরাপত্তা ও SEO সম্পর্ক	`rel="noopener noreferrer"`
`title`	Hover করলে tooltip	`title="গুগলে যাও"`
`download`	ফাইল ডাউনলোড করে	`download="file.pdf"`

🔷 Text Formatting — লেখার ধরন পরিবর্তন

Text Formatting ট্যাগ দিয়ে লেখাকে Bold, Italic, Underline বা Highlighted করা যায়।

⚠️ Semantic vs Presentational: <strong> মানে "গুরুত্বপূর্ণ" — স্ক্রিন রিডার জোরে পড়ে। <b> মানে শুধু "মোটা দেখাও" — কোনো বিশেষ অর্থ নেই। সম্ভব হলে সবসময় Semantic ট্যাগ ব্যবহার করো।

🔷 Semantic Formatting ট্যাগ — অর্থ বহন করে

1. <strong> — গুরুত্বপূর্ণ লেখা Semantic Bold

<p><strong>সতর্কতা:</strong> পাসওয়ার্ড কাউকে দেবেন না।</p> <p>HTML শিখতে হলে <strong>প্রতিদিন চর্চা</strong> করতে হবে।</p>

আউটপুট: সতর্কতা: পাসওয়ার্ড কাউকে দেবেন না।

2. <em> — জোর দেওয়া লেখা Semantic Italic

<p>তুমি <em>অবশ্যই</em> আজকের কাজ শেষ করবে।</p> <p>HTML <em>প্রথমে</em> শেখো, তারপর CSS।</p>

আউটপুট: তুমি অবশ্যই আজকের কাজ শেষ করবে।

3. <mark> — হাইলাইট করা Highlight

<p>পরীক্ষায় <mark>সৃজনশীল প্রশ্ন</mark> থেকে বেশি আসে।</p> <p>মনে রাখো: <mark>HTML শেখার সেরা উপায় হলো বানিয়ে দেখা।</mark></p>

আউটপুট: পরীক্ষায় সৃজনশীল প্রশ্ন থেকে বেশি আসে।

4. <del> এবং <ins> — সম্পাদনা দেখানো Edit

<p>মূল্য: <del>১,০০০ টাকা</del> <ins>৮০০ টাকা</ins></p>  <p>বাংলাদেশ <del>১৯৭২</del> <ins>১৯৭১</ins> সালে স্বাধীন হয়।</p>

আউটপুট: মূল্য: ~~১,০০০ টাকা~~ ৮০০ টাকা

5. <small> — ছোট লেখা Small

<p>আমাদের পণ্য কিনুন।</p> <p><small>* শর্ত প্রযোজ্য। অফার সীমিত সময়ের জন্য।</small></p> <footer> <small>© ২০২৬ DevShikhi। সর্বস্বত্ব সংরক্ষিত।</small> </footer>

আউটপুট: আমাদের পণ্য কিনুন। * শর্ত প্রযোজ্য।

6. <sub> এবং <sup> — নিচে ও উপরে ছোট লেখা Sub & Sup

<p>পানির সংকেত: H<sub>2</sub>O</p> <p>কার্বন ডাই অক্সাইড: CO<sub>2</sub></p>  <p>পিথাগোরাসের সূত্র: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p> <p>আইনস্টাইনের সূত্র: E = mc<sup>2</sup></p>

আউটপুট: H₂O | a² + b² = c²

🔷 Presentational Formatting ট্যাগ — শুধু দেখতে পরিবর্তন

<p><b>মোটা লেখা</b> — শুধু দেখতে bold।</p>  <p><i>বাঁকা লেখা</i> — বই/চলচ্চিত্রের নাম লিখতে ব্যবহার হয়।</p>  <p><u>দাগানো লেখা</u> — বানান ভুল বোঝাতেও ব্যবহার হয়।</p>

Semantic ট্যাগ	Presentational ট্যাগ	দেখতে	কোনটা ব্যবহার করবো?
`<strong>`	`<b>`	মোটা	✅ `<strong>`
`<em>`	`<i>`	বাঁকা	✅ `<em>`
`<del>`	`<s>`	~~দাগানো~~	✅ `<del>`

🔷 রিয়েল উদাহরণ — ব্লগ কার্ড

Links ও Text Formatting একসাথে ব্যবহার করে একটি ব্লগ কার্ড বানাই:

<div class="blog-card">  <h2> <a href="post.html">HTML শেখার সেরা ৫টি উপায়</a> </h2>  <p> <small>লেখক: <strong>তানভীর</strong> | তারিখ: ১৮ মে, ২০২৬</small> </p>  <p> HTML শিখতে হলে <em>প্রতিদিন চর্চা</em> করতে হবে। মনে রাখো: <mark>বানিয়ে দেখলেই শেখা হয়।</mark> </p>  <p> কোর্স মূল্য: <del>২,০০০ টাকা</del> <ins>৯৯৯ টাকা</ins> </p>  <a href="post.html" target="_blank" rel="noopener noreferrer"> আরও পড়ুন → </a> </div>

🔷 দ্রুত রেফারেন্স — সব ট্যাগ এক নজরে

ট্যাগ	কাজ	আউটপুট	কোথায় ব্যবহার
`<a href="...">`	লিংক তৈরি	লিংক	নেভিগেশন, বোতাম
`<strong>`	গুরুত্বপূর্ণ / Bold	গুরুত্বপূর্ণ	সতর্কতা, জরুরি তথ্য
`<em>`	জোর দেওয়া / Italic	জোর দেওয়া	বিশেষ শব্দ, উদ্ধৃতি
`<mark>`	হাইলাইট	হাইলাইট	গুরুত্বপূর্ণ অংশ
`<del>`	মুছে ফেলা লেখা	~~মুছে ফেলা~~	পুরনো দাম, সংশোধন
`<ins>`	নতুন যোগ করা	নতুন	নতুন দাম, সংযোজন
`<small>`	ছোট লেখা	ছোট লেখা	ফুটনোট, কপিরাইট
`<sub>`	নিচে ছোট	H₂O	রসায়ন সূত্র
`<sup>`	উপরে ছোট	x²	গণিত সূত্র
`<b>`	শুধু Bold	মোটা	পণ্যের নাম (অর্থ নেই)
`<i>`	শুধু Italic	বাঁকা	বইয়ের নাম (অর্থ নেই)
`<u>`	আন্ডারলাইন	দাগানো	বানান ত্রুটি

🗂️ HTML Grouping Text — কনটেন্ট গোষ্ঠীবদ্ধ করা

এই সেকশনে HTML-এর Grouping ট্যাগগুলো — div, span, p, blockquote, figure, details সহ আরও অনেক কিছু কমেন্টসহ বোঝানো হয়েছে।

🔷 Grouping কী এবং কেন দরকার?

Grouping মানে একাধিক এলিমেন্টকে একটি কনটেইনারের ভেতরে রাখা, যাতে তাদের একসাথে স্টাইল বা নিয়ন্ত্রণ করা যায়।

✅ কেন Grouping করবো? ধরো একটি কার্ডে ছবি, শিরোনাম ও লেখা আছে — তিনটিকে একটি <div>-এ রাখলে CSS দিয়ে পুরো কার্ডকে একসাথে সাজানো যায়।

Grouping ট্যাগগুলো দুই ধরনের:

ধরন	মানে	উদাহরণ ট্যাগ	আচরণ
Block-level	পুরো লাইন নেয়, নতুন লাইনে শুরু	`<div>`, `<p>`, `<blockquote>`	উপর-নিচে সাজে
Inline	শুধু নিজের জায়গা নেয়	`<span>`, `<a>`, `<strong>`	পাশাপাশি সাজে

🔷 <div> — Block Grouping

<div> হলো HTML-এর সবচেয়ে বেশি ব্যবহৃত Grouping ট্যাগ। এটি Block-level — পুরো লাইন দখল করে এবং নতুন লাইনে শুরু হয়। নিজের কোনো চেহারা নেই, CSS দিয়ে সাজাতে হয়।

<div> <h2>আমার কার্ড</h2> <p>এটি একটি কার্ডের বিবরণ।</p> </div>  <div class="card"> <h2>পণ্যের নাম</h2> <p>মূল্য: ৫০০ টাকা</p> </div>  <div class="container">  <div class="header">  <h1>শিরোনাম</h1> </div> <div class="content">  <p>মূল কনটেন্ট</p> </div> </div>

⚠️ Div Soup থেকে সাবধান: অনেক বেশি <div> ব্যবহার করলে কোড জটিল হয়ে যায়। সম্ভব হলে Semantic ট্যাগ (<header>, <section> ইত্যাদি) ব্যবহার করো।

🔷 <span> — Inline Grouping

<span> হলো Inline Grouping ট্যাগ। লেখার ভেতরে কোনো নির্দিষ্ট অংশকে আলাদা করে CSS বা JavaScript দিয়ে নিয়ন্ত্রণ করতে ব্যবহার হয়।

<p>আমার প্রিয় রঙ <span style="color: blue;">নীল</span>।</p>  <p>মূল্য: <span class="price">৫০০ টাকা</span></p>  <p> HTML শিখতে হলে প্রথমে <span class="highlight">ট্যাগের গঠন</span> বুঝতে হবে। </p>

✅ div vs span মনে রাখো:
<div> → বড় সেকশন গোষ্ঠীবদ্ধ করতে (block)
<span> → লেখার ভেতরে ছোট অংশ আলাদা করতে (inline)

🔷 <blockquote> এবং <q> — উদ্ধৃতি

1. <blockquote> — বড় উদ্ধৃতি (Block) Block Quote

অন্য কোনো উৎস বা বইয়ের বড় উদ্ধৃতি নেওয়ার সময় <blockquote> ব্যবহার করো।

<blockquote> <p>শিক্ষাই জাতির মেরুদণ্ড।</p> </blockquote>  <blockquote cite="https://example.com/article"> <p>কোড লেখা হলো চিন্তা করার একটি নতুন উপায়।</p> <footer>— বিল গেটস</footer> </blockquote>

2. <q> — ছোট উদ্ধৃতি (Inline) Inline Quote

লেখার ভেতরে ছোট উদ্ধৃতির জন্য <q> ব্যবহার করো। ব্রাউজার নিজেই " " চিহ্ন যোগ করে দেয়।

<p>স্টিভ জবস বলেছিলেন, <q>Stay hungry, stay foolish.</q></p>

🔷 <figure> এবং <figcaption> — ছবি ও ক্যাপশন

<figure> দিয়ে ছবি এবং তার ক্যাপশন একসাথে গোষ্ঠীবদ্ধ করা হয়। <figcaption> হলো সেই ছবির বিবরণ।

<figure> <img src="bangladesh.jpg" alt="বাংলাদেশের মানচিত্র"> <figcaption>চিত্র ১: বাংলাদেশের মানচিত্র</figcaption> </figure>  <figure> <figcaption>সূর্যাস্তের দৃশ্য — কক্সবাজার, ২০২৬</figcaption> <img src="sunset.jpg" alt="কক্সবাজারের সূর্যাস্ত"> </figure>  <figure> <pre><code>console.log("Hello World");</code></pre> <figcaption>কোড ১: JavaScript Hello World</figcaption> </figure>

✅ কেন figure ব্যবহার করবো? শুধু <img> দিলে Google বুঝতে পারে না ছবিটা কীসের। <figure> ও <figcaption> ব্যবহার করলে Google এবং স্ক্রিন রিডার ছবির বিষয়বস্তু বুঝতে পারে।

🔷 <details> এবং <summary> — ক্লিক করে দেখাও

<details> ট্যাগ দিয়ে কনটেন্ট লুকিয়ে রাখা যায় এবং ক্লিক করলে দেখা যায়। এটি JavaScript ছাড়াই কাজ করে।

<details> <summary>HTML কী? (ক্লিক করো)</summary> <p>HTML হলো HyperText Markup Language। এটি ওয়েবপেজের কাঠামো তৈরি করে।</p> </details>  <details> <summary>Web Development শিখতে কতদিন লাগে?</summary> <p>নিয়মিত চর্চা করলে HTML ও CSS ১-২ মাসে, JavaScript ৩-৬ মাসে শেখা যায়।</p> </details> <details> <summary>কোথা থেকে শিখবো?</summary> <p>DevShikhi, MDN Web Docs, freeCodeCamp থেকে বিনামূল্যে শেখা যায়।</p> </details>  <details open> <summary>এটি ডিফল্টে খোলা থাকবে</summary> <p>open attribute দিলে পেজ লোড হলেই দেখা যায়।</p> </details>

✅ কোথায় ব্যবহার করবো: FAQ পেজ, শর্তাবলী, অ্যাকর্ডিয়ন মেনু — যেখানে অনেক তথ্য একসাথে দেখালে পেজ ভারী দেখায়।

🔷 অন্যান্য গুরুত্বপূর্ণ Grouping ট্যাগ

<address> — যোগাযোগের তথ্য Contact Info

<address> লেখক: তানভীর হোসেন<br> ঠিকানা: ঢাকা, বাংলাদেশ<br> ইমেইল: <a href="mailto:tanvir@example.com">tanvir@example.com</a> </address>

<abbr> — সংক্ষেপণের পূর্ণরূপ Abbreviation

<p><abbr title="HyperText Markup Language">HTML</abbr> শিখছি।</p> <p><abbr title="Cascading Style Sheets">CSS</abbr> দিয়ে ডিজাইন করা হয়।</p>

<time> — তারিখ ও সময় Date & Time

<p>আর্টিকেল প্রকাশিত: <time datetime="2026-05-18">১৮ মে, ২০২৬</time></p>  <p>ইভেন্ট শুরু: <time datetime="2026-05-18T10:00">সকাল ১০টা</time></p>

<code> এবং <pre> — কোড দেখানো Code Block

<p>HTML-এ <code><h1></code> দিয়ে শিরোনাম লেখা হয়।</p>  <pre> <code> <html> <body> <h1>Hello World</h1> </body> </html> </code> </pre>

🔷 দ্রুত রেফারেন্স — সব Grouping ট্যাগ এক নজরে

ট্যাগ	ধরন	কাজ	কোথায় ব্যবহার করবে
`<div>`	Block	সাধারণ গ্রুপ কনটেইনার	সেকশন, কার্ড, লেআউট তৈরিতে
`<span>`	Inline	লেখার ভেতরে অংশ আলাদা করা	রঙ, স্টাইল, নির্দিষ্ট শব্দ হাইলাইট
`<blockquote>`	Block	বড় উদ্ধৃতি	বই বা নিবন্ধ থেকে উদ্ধৃতি
`<q>`	Inline	ছোট উদ্ধৃতি	লেখার ভেতরে ছোট quote
`<figure>`	Block	ছবি ও ক্যাপশন একসাথে	ছবি, ডায়াগ্রাম, কোড ব্লক
`<figcaption>`	Block	figure-এর ক্যাপশন	figure-এর ভেতরে
`<details>`	Block	লুকানো কনটেন্ট	FAQ, অ্যাকর্ডিয়ন মেনু
`<summary>`	Block	details-এর শিরোনাম	details-এর ভেতরে
`<address>`	Block	যোগাযোগের তথ্য	footer, contact পেজ
`<abbr>`	Inline	সংক্ষেপণের পূর্ণরূপ	HTML, CSS, API ইত্যাদি শব্দ
`<time>`	Inline	তারিখ ও সময়	আর্টিকেলের তারিখ, ইভেন্ট
`<code>`	Inline	ইনলাইন কোড	লেখার মধ্যে কোড দেখাতে
`<pre>`	Block	হুবহু ফরম্যাট ধরে রাখা	কোড ব্লক, ছক

🏷️ HTML Standard Attributes

এই সেকশনে HTML-এর Standard (Global) Attributes — যেগুলো যেকোনো ট্যাগে ব্যবহার করা যায় — সেগুলো কমেন্টসহ বিস্তারিত বোঝানো হয়েছে।

🔷 Standard Attribute কী?

Standard Attribute (বা Global Attribute) হলো সেই Attribute যেগুলো HTML-এর যেকোনো ট্যাগে ব্যবহার করা যায়। যেমন id, class, style — এগুলো <h1>, <p>, <div> সব ট্যাগেই দেওয়া যায়।

✅ মনে রাখো: কিছু Attribute শুধু নির্দিষ্ট ট্যাগে কাজ করে (যেমন href শুধু <a>-তে, src শুধু <img>-তে)। কিন্তু Standard Attribute সব ট্যাগেই চলে।

সবচেয়ে গুরুত্বপূর্ণ Standard Attribute:

Attribute	কাজ	যেকোনো ট্যাগে?
`id`	Unique পরিচয় দেওয়া	✅ হ্যাঁ
`class`	গ্রুপ পরিচয় দেওয়া	✅ হ্যাঁ
`style`	সরাসরি CSS লেখা	✅ হ্যাঁ
`title`	Hover করলে tooltip দেখানো	✅ হ্যাঁ
`lang`	ভাষা নির্ধারণ	✅ হ্যাঁ
`dir`	লেখার দিক নির্ধারণ	✅ হ্যাঁ
`hidden`	এলিমেন্ট লুকিয়ে রাখা	✅ হ্যাঁ
`tabindex`	Tab চাপার ক্রম ঠিক করা	✅ হ্যাঁ
`contenteditable`	পেজে সরাসরি লেখা যায়	✅ হ্যাঁ
`data-*`	কাস্টম ডেটা সংরক্ষণ	✅ হ্যাঁ

🔷 id — Unique পরিচয়

id দিয়ে একটি এলিমেন্টকে Unique পরিচয় দেওয়া হয়। পুরো পেজে একটি id মাত্র একবারই ব্যবহার করা যাবে।

id-এর তিনটি ব্যবহার:

<a href="#contact">যোগাযোগ</a> <section id="contact">  <h2>যোগাযোগ</h2> </section>  <h1 id="main-title">শিরোনাম</h1> <style> #main-title { color: blue; font-size: 32px; } </style>  <p id="message">পুরনো বার্তা</p> <script> document.getElementById("message").innerText = "নতুন বার্তা"; </script>

⚠️ id-এর নিয়ম: একই id পেজে দুইবার ব্যবহার করবে না। id-এর নামে স্পেস দেওয়া যাবে না। সংখ্যা দিয়ে শুরু করা যাবে না। হাইফেন (-) বা আন্ডারস্কোর (_) ব্যবহার করো।

<div id="main-header"></div> <div id="contact_form"></div> <div id="section1"></div>  <div id="main header"></div>  <div id="1section"></div>

🔷 class — গ্রুপ পরিচয়

class দিয়ে একাধিক এলিমেন্টকে একটি গ্রুপে রাখা যায়। একই class অনেক এলিমেন্টে ব্যবহার করা যায়।

<p class="highlight">প্রথম প্যারাগ্রাফ</p> <p class="highlight">দ্বিতীয় প্যারাগ্রাফ</p> <p class="highlight">তৃতীয় প্যারাগ্রাফ</p>  <style> .highlight { background: yellow; } </style>  <div class="card active featured">  <h2>বিশেষ কার্ড</h2> </div>  <div id="hero-section" class="section featured"> <h1>স্বাগতম</h1> </div>

বিষয়	id	class
পেজে কতবার?	মাত্র ১ বার	যতবার দরকার
CSS Selector	`#id-নাম`	`.class-নাম`
একটি এলিমেন্টে কতটি?	মাত্র ১টি	একাধিক (স্পেসে আলাদা)
ব্যবহার	Unique এলিমেন্ট	গ্রুপ এলিমেন্ট

🔷 style — সরাসরি CSS লেখা

style Attribute দিয়ে সরাসরি একটি এলিমেন্টে CSS দেওয়া যায়। এটিকে Inline CSS বলে।

<p style="color: red;">লাল রঙের লেখা</p>  <h2 style="font-size: 24px;">বড় শিরোনাম</h2>  <div style="background: lightblue; padding: 20px; border-radius: 8px;"> <p>নীল বক্সের ভেতরে লেখা</p> </div>  <p style="text-align: center; font-weight: bold;"> মাঝখানে মোটা লেখা </p>

⚠️ style Attribute বেশি ব্যবহার করো না: Inline CSS লিখলে পরে পরিবর্তন করা কঠিন হয়। বড় প্রজেক্টে আলাদা CSS ফাইলে স্টাইল লিখে class দিয়ে যুক্ত করো।

🔷 title — Tooltip তথ্য

title Attribute দিলে এলিমেন্টের উপরে মাউস রাখলে (Hover করলে) একটি ছোট Tooltip দেখায়।

<a href="https://google.com" title="গুগলের মূল সাইটে যাবে">গুগল</a>  <img src="logo.png" alt="লোগো" title="DevShikhi-র অফিশিয়াল লোগো">  <abbr title="HyperText Markup Language">HTML</abbr>  <button title="ফর্ম জমা দিতে এখানে ক্লিক করুন">সাবমিট</button>  <p title="এটি একটি গুরুত্বপূর্ণ অনুচ্ছেদ"> মাউস রাখলে tooltip দেখাবে। </p>

🔷 lang এবং dir — ভাষা ও দিক

lang — ভাষা নির্ধারণ Language

<html lang="bn">  <p lang="en">This part is written in English.</p>  <p lang="ar">هذا النص باللغة العربية</p>

dir — লেখার দিক Direction

<p dir="ltr">বাংলা লেখা বাঁ থেকে ডানে যায়।</p>  <p dir="rtl">هذا النص من اليمين إلى اليسار</p>  <p dir="auto">ব্রাউজার ভাষা দেখে দিক ঠিক করবে।</p>

🔷 hidden — এলিমেন্ট লুকানো

hidden Attribute দিলে এলিমেন্ট পেজে দেখা যায় না, তবে HTML কোডে থাকে। JavaScript দিয়ে পরে দেখানো যায়।

<p hidden>এই লেখা পেজে দেখা যাবে না।</p>  <div id="secret-message" hidden> <p>এই বার্তা লুকানো আছে।</p> </div>  <button onclick="document.getElementById('secret-message').hidden = false"> দেখাও </button>

🔷 contenteditable — পেজে সরাসরি লেখা

contenteditable দিলে ব্যবহারকারী সরাসরি পেজে ক্লিক করে লেখা পরিবর্তন করতে পারে — যেন একটি Text Editor।

<p contenteditable="true"> এখানে ক্লিক করে লেখা পরিবর্তন করো। </p>  <div contenteditable="true" style="border: 1px solid #ccc; padding: 10px;"> এটি একটি এডিটযোগ্য বক্স। এখানে যা খুশি লিখতে পারো। </div>  <p contenteditable="false">এটি এডিট করা যাবে না।</p>

✅ কোথায় ব্যবহার করবো: অনলাইন নোটপ্যাড, Rich Text Editor, CMS (Content Management System) তৈরিতে।

🔷 data-* — কাস্টম ডেটা সংরক্ষণ

data-* Attribute দিয়ে HTML এলিমেন্টে কাস্টম তথ্য সংরক্ষণ করা যায় যা পেজে দেখায় না কিন্তু JavaScript দিয়ে ব্যবহার করা যায়।

<div class="product-card" data-id="101" data-name="ইলিশ মাছ" data-price="1200" data-stock="available"> <h3>ইলিশ মাছ</h3> <p>মূল্য: ১২০০ টাকা</p> <button>কার্টে যোগ করো</button> </div>  <li data-user-id="42" data-role="admin">তানভীর হোসেন</li>  <script> const card = document.querySelector(".product-card"); console.log(card.dataset.id); // 101 console.log(card.dataset.price); // 1200 console.log(card.dataset.name); // ইলিশ মাছ </script>

✅ data-* মনে রাখার উপায়: এটি লুকানো নোটের মতো — পেজে দেখা যায় না, কিন্তু JavaScript প্রয়োজনে পড়তে পারে।

🔷 tabindex — Tab চাপার ক্রম

tabindex দিয়ে কীবোর্ডের Tab বোতাম চাপলে কোন এলিমেন্টে ফোকাস যাবে তার ক্রম নির্ধারণ করা যায়।

<input type="text" tabindex="1" placeholder="প্রথমে ফোকাস"> <input type="text" tabindex="2" placeholder="দ্বিতীয়ে ফোকাস"> <button tabindex="3">তৃতীয়ে ফোকাস</button>  <div tabindex="0">এই div-এ Tab দিয়ে ফোকাস করা যাবে</div>  <button tabindex="-1">Tab দিয়ে এখানে আসা যাবে না</button>

🔷 দ্রুত রেফারেন্স — সব Standard Attribute এক নজরে

Attribute	Value	কাজ	কোথায় বেশি ব্যবহার
`id`	Unique নাম	এলিমেন্টের অনন্য পরিচয়	CSS, JS, Anchor Link
`class`	ক্লাসের নাম	গ্রুপ পরিচয়	CSS স্টাইল দিতে
`style`	CSS property	Inline CSS লেখা	দ্রুত স্টাইল পরিবর্তন
`title`	যেকোনো লেখা	Hover করলে tooltip	লিংক, ছবি, abbr
`lang`	ভাষার কোড	ভাষা নির্ধারণ	html ট্যাগ, বহুভাষিক পেজ
`dir`	ltr / rtl / auto	লেখার দিক	আরবি, উর্দু কনটেন্ট
`hidden`	(কোনো value নেই)	এলিমেন্ট লুকানো	JS দিয়ে দেখানো/লুকানো
`contenteditable`	true / false	পেজে সরাসরি লেখা	নোটপ্যাড, Editor তৈরি
`data-*`	যেকোনো ডেটা	কাস্টম ডেটা রাখা	JS দিয়ে ডেটা পড়তে
`tabindex`	-1 / 0 / 1, 2...	Tab ক্রম নির্ধারণ	Keyboard accessibility

📋 HTML Lists এবং Types

এই সেকশনে HTML-এর সব ধরনের List — Unordered, Ordered, Description List এবং Nested List — কমেন্টসহ বিস্তারিত বোঝানো হয়েছে।

🔷 HTML List কী?

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

ট্যাগ	পুরো নাম	ধরন	কোথায় ব্যবহার
`<ul>`	Unordered List	বুলেট পয়েন্ট ●	নেভিগেশন, feature তালিকা
`<ol>`	Ordered List	নম্বর ১. ২. ৩.	ধাপের নির্দেশনা, রেসিপি
`<dl>`	Description List	শব্দ + বিবরণ	Glossary, FAQ, Dictionary

🔷 Unordered List — বুলেট পয়েন্টের তালিকা

<ul> ব্যবহার করো যখন তালিকার আইটেমের ক্রম গুরুত্বপূর্ণ নয়। ব্রাউজার ডিফল্টে প্রতিটি আইটেমের আগে ● বুলেট দেখায়।

মূল গঠন:

<ul> <li>HTML</li>  <li>CSS</li> <li>JavaScript</li> </ul>

👇 ব্রাউজারে দেখাবে:

HTML
CSS
JavaScript

ul-এর বুলেটের ধরন — list-style-type CSS দিয়ে

<ul style="list-style-type: disc;"> <li>HTML</li> <li>CSS</li> </ul>  <ul style="list-style-type: circle;"> <li>HTML</li> <li>CSS</li> </ul>  <ul style="list-style-type: square;"> <li>HTML</li> <li>CSS</li> </ul>  <ul style="list-style-type: none;"> <li>হোম</li> <li>ব্লগ</li> <li>যোগাযোগ</li> </ul>

✅ নেভিগেশন মেনু: বেশিরভাগ ওয়েবসাইটের নেভিগেশন মেনু আসলে একটি <ul> — শুধু CSS দিয়ে বুলেট সরিয়ে সুন্দর করে সাজানো হয়।

🔷 Ordered List — নম্বরওয়ালা তালিকা

<ol> ব্যবহার করো যখন তালিকার আইটেমের ক্রম গুরুত্বপূর্ণ। ডিফল্টে ১, ২, ৩... নম্বর দিয়ে দেখায়।

মূল গঠন:

<ol> <li>প্রথমে HTML শিখবো</li> <li>তারপর CSS শিখবো</li> <li>তারপর JavaScript</li> </ol>

👇 ব্রাউজারে দেখাবে:

প্রথমে HTML শিখবো
তারপর CSS শিখবো
তারপর JavaScript

ol-এর নম্বরের ধরন — type Attribute type

<ol type="1"> <li>প্রথম</li> <li>দ্বিতীয়</li> <li>তৃতীয়</li> </ol>  <ol type="A"> <li>প্রথম</li> <li>দ্বিতীয়</li> <li>তৃতীয়</li> </ol>  <ol type="a"> <li>প্রথম</li> <li>দ্বিতীয়</li> </ol>  <ol type="I"> <li>প্রথম</li> <li>দ্বিতীয়</li> <li>তৃতীয়</li> </ol>  <ol type="i"> <li>প্রথম</li> <li>দ্বিতীয়</li> </ol>

start — নম্বর শুরুর সংখ্যা start

<ol start="5"> <li>পাঁচ নম্বর আইটেম</li> <li>ছয় নম্বর আইটেম</li> <li>সাত নম্বর আইটেম</li> </ol>

👇 ব্রাউজারে দেখাবে:

পাঁচ নম্বর আইটেম
ছয় নম্বর আইটেম
সাত নম্বর আইটেম

reversed — উল্টো ক্রমে নম্বর reversed

<ol reversed> <li>তৃতীয় স্থান</li> <li>দ্বিতীয় স্থান</li> <li>প্রথম স্থান</li> </ol>

li-এর value — নির্দিষ্ট নম্বর দেওয়া value

<ol> <li value="10">দশ নম্বর আইটেম</li>  <li>এগারো নম্বর</li>  <li value="20">বিশ নম্বরে লাফ</li>  <li>একুশ নম্বর</li>  </ol>

🔷 Description List — শব্দ ও বিবরণের তালিকা

<dl> ব্যবহার করো যখন শব্দ ও তার বিবরণ একসাথে দেখাতে চাও — যেমন অভিধান বা FAQ পেজ।

মূল গঠন:

<dl> <dt>HTML</dt>  <dd>HyperText Markup Language।</dd>  <dt>CSS</dt> <dd>Cascading Style Sheets।</dd> <dt>JavaScript</dt> <dd>ওয়েবপেজকে Interactive করার ভাষা।</dd> </dl>

👇 ব্রাউজারে দেখাবে:

HTML: HyperText Markup Language।
CSS: Cascading Style Sheets।
JavaScript: ওয়েবপেজকে Interactive করার ভাষা।

একটি শব্দের একাধিক বিবরণ:

<dl> <dt>Frontend ভাষা</dt> <dd>HTML — কাঠামো তৈরি করে</dd> <dd>CSS — ডিজাইন করে</dd> <dd>JavaScript — Interaction যোগ করে</dd> </dl>

✅ dl কোথায় ব্যবহার করবো: পণ্যের বিবরণ পেজ, অভিধান, FAQ, Glossary, পণ্যের Specification তালিকা।

🔷 Nested List — তালিকার ভেতরে তালিকা

একটি List-এর <li>-এর ভেতরে আরেকটি List রাখা যায়। এটিকে Nested List বলে।

ul-এর ভেতরে ul (সবচেয়ে বেশি ব্যবহৃত): ul → ul

<ul> <li>Frontend</li> <li>Backend</li> <li>Tools  <ul> <li>VSCode</li> <li>Git</li> <li>GitHub</li> </ul> </li> </ul>

👇 ব্রাউজারে দেখাবে:

Frontend
Backend
Tools
- VSCode
- Git
- GitHub

ol-এর ভেতরে ol: ol → ol

<ol> <li>Web Development শেখার পথ <ol type="a">  <li>HTML শেখো</li> <li>CSS শেখো</li> <li>JavaScript শেখো</li> </ol> </li> <li>প্রজেক্ট বানাও</li> <li>চাকরি খোঁজো</li> </ol>

মিশ্র Nested List (ul ও ol একসাথে): ul → ol

<ul> <li>বাংলাদেশের বিভাগ <ol>  <li>ঢাকা</li> <li>চট্টগ্রাম</li> <li>রাজশাহী</li> <li>খুলনা</li> </ol> </li> <li>পাশের দেশ <ol> <li>ভারত</li> <li>মিয়ানমার</li> </ol> </li> </ul>

⚠️ Nesting-এর নিয়ম: নতুন List সবসময় <li>-এর ভেতরে রাখতে হবে, <ul> বা <ol>-এর সরাসরি ভেতরে নয়। এবং বেশি গভীর Nesting (৩ স্তরের বেশি) এড়িয়ে চলো।

🔷 রিয়েল উদাহরণ

1. নেভিগেশন মেনু (ul + CSS) Navigation

<nav> <ul style="list-style: none; display: flex; gap: 20px;"> <li><a href="#">হোম</a></li> <li><a href="#">ব্লগ</a></li> <li><a href="#">পোর্টফোলিও</a></li> <li><a href="#">যোগাযোগ</a></li> </ul> </nav>

2. রেসিপির ধাপ (ol) Recipe Steps

<h3>খিচুড়ি রান্নার ধাপ</h3> <ol> <li>চাল ও ডাল ধুয়ে ৩০ মিনিট ভিজিয়ে রাখো।</li> <li>তেলে পেঁয়াজ ও আদা-রসুন ভেজে নাও।</li> <li>সব মশলা দিয়ে কষাও।</li> <li>চাল-ডাল দিয়ে নাড়াচাড়া করো।</li> <li>পানি দিয়ে ঢেকে রান্না করো।</li> </ol>

3. শপিং লিস্ট (ul + Nested) Shopping List

<h3>আজকের শপিং লিস্ট</h3> <ul> <li>সবজি <ul> <li>আলু — ১ কেজি</li> <li>টমেটো — আধা কেজি</li> <li>পেঁয়াজ — ১ কেজি</li> </ul> </li> <li>মাছ-মাংস <ul> <li>রুই মাছ — ১ কেজি</li> <li>মুরগি — আধা কেজি</li> </ul> </li> <li>মুদিখানা <ul> <li>চাল — ৫ কেজি</li> <li>ডাল — ১ কেজি</li> </ul> </li> </ul>

4. FAQ পেজ (dl) FAQ

<h3>সচরাচর জিজ্ঞাসা</h3> <dl> <dt>HTML শিখতে কতদিন লাগে?</dt> <dd>নিয়মিত চর্চা করলে ১ মাসেই HTML ভালোভাবে শেখা যায়।</dd> <dt>CSS কি আলাদা শিখতে হবে?</dt> <dd>হ্যাঁ, HTML এর পরেই CSS শেখো। দুটো একসাথে ব্যবহার করা হয়।</dd> <dt>কোথা থেকে শিখবো?</dt> <dd>DevShikhi, MDN Web Docs বা freeCodeCamp থেকে বিনামূল্যে শেখা যায়।</dd> </dl>

🔷 দ্রুত রেফারেন্স — সব List ট্যাগ এক নজরে

ট্যাগ	কাজ	গুরুত্বপূর্ণ Attribute	কোথায় ব্যবহার
`<ul>`	বুলেট পয়েন্ট তালিকা	`style="list-style-type: ..."`	নেভিগেশন, feature তালিকা
`<ol>`	নম্বরওয়ালা তালিকা	`type`, `start`, `reversed`	ধাপের নির্দেশনা, রেসিপি
`<li>`	তালিকার আইটেম	`value` (ol-এ)	ul ও ol-এর ভেতরে
`<dl>`	বিবরণ তালিকা কনটেইনার	—	Glossary, FAQ, Dictionary
`<dt>`	বিবরণ তালিকার শব্দ	—	dl-এর ভেতরে
`<dd>`	শব্দের বিবরণ	—	dl-এর ভেতরে dt-এর পরে

ol type-এর সারসংক্ষেপ:

type	দেখায়	উদাহরণ
`type="1"`	সংখ্যা (ডিফল্ট)	1, 2, 3...
`type="A"`	বড়হাতা অক্ষর	A, B, C...
`type="a"`	ছোটহাতা অক্ষর	a, b, c...
`type="I"`	বড়হাতা রোমান	I, II, III...
`type="i"`	ছোটহাতা রোমান	i, ii, iii...

📊 HTML Table

এই সেকশনে HTML Table-এর সব ট্যাগ, thead/tbody/tfoot, colspan, rowspan এবং রিয়েল উদাহরণ — কমেন্টসহ বিস্তারিত বোঝানো হয়েছে।

🔷 HTML Table কী?

HTML Table দিয়ে ডেটা সারি ও কলামে সাজিয়ে দেখানো যায় — যেমন রেজাল্ট শিট, মূল্য তালিকা বা সময়সূচী।

⚠️ Table শুধু ডেটার জন্য: পেজের Layout (দুই কলাম, তিন কলাম ডিজাইন) তৈরিতে Table ব্যবহার করবে না — সেটা CSS Flexbox বা Grid দিয়ে করো।

ট্যাগ	পুরো নাম	কাজ
`<table>`	Table	পুরো টেবিলের কনটেইনার
`<tr>`	Table Row	একটি সারি
`<th>`	Table Header	শিরোনাম ঘর (Bold, মাঝখানে)
`<td>`	Table Data	সাধারণ ডেটা ঘর
`<thead>`	Table Head	শিরোনাম সারির গ্রুপ
`<tbody>`	Table Body	মূল ডেটার গ্রুপ
`<tfoot>`	Table Footer	সারসংক্ষেপ সারির গ্রুপ
`<caption>`	Table Caption	টেবিলের শিরোনাম/বিবরণ

🔷 সবচেয়ে সহজ Table

মূল গঠন:

<table>  <tr> <th>নাম</th>  <th>বিষয়</th> <th>নম্বর</th> </tr>  <tr> <td>তানভীর</td>  <td>HTML</td> <td>৯৫</td> </tr>  <tr> <td>তাহমিনা</td> <td>CSS</td> <td>৮৮</td> </tr> </table>

👇 ব্রাউজারে দেখাবে:

নাম	বিষয়	নম্বর
তানভীর	HTML	৯৫
তাহমিনা	CSS	৮৮

🔷 thead, tbody, tfoot — সঠিক Table কাঠামো

Table-এ <thead>, <tbody>, <tfoot> ব্যবহার করলে কাঠামো পরিষ্কার থাকে এবং CSS দিয়ে আলাদাভাবে স্টাইল দেওয়া যায়।

<table>  <caption>মাসিক বিক্রয় রিপোর্ট — মে ২০২৬</caption>  <thead> <tr> <th>পণ্য</th> <th>পরিমাণ</th> <th>একক মূল্য</th> <th>মোট</th> </tr> </thead>  <tbody> <tr> <td>HTML বই</td> <td>১০</td> <td>৩০০ টাকা</td> <td>৩,০০০ টাকা</td> </tr> <tr> <td>CSS বই</td> <td>৫</td> <td>৩৫০ টাকা</td> <td>১,৭৫০ টাকা</td> </tr> </tbody>  <tfoot> <tr> <td colspan="3"><strong>সর্বমোট</strong></td> <td><strong>৪,৭৫০ টাকা</strong></td> </tr> </tfoot> </table>

👇 ব্রাউজারে দেখাবে:

**মাসিক বিক্রয় রিপোর্ট — মে ২০২৬**
পণ্য	পরিমাণ	একক মূল্য	মোট
HTML বই	১০	৩০০ টাকা	৩,০০০ টাকা
CSS বই	৫	৩৫০ টাকা	১,৭৫০ টাকা
সর্বমোট			৪,৭৫০ টাকা

🔷 colspan — কলাম জোড়া লাগানো

colspan দিলে একটি ঘর একাধিক কলাম জুড়ে বিস্তার করে।

<table> <tr>  <th colspan="3">শিক্ষার্থীর ফলাফল</th> </tr> <tr> <th>নাম</th> <th>বিষয়</th> <th>নম্বর</th> </tr> <tr> <td>তানভীর</td> <td>HTML</td> <td>৯৫</td> </tr> <tr>  <td colspan="2">মোট নম্বর</td> <td>৯৫</td> </tr> </table>

👇 ব্রাউজারে দেখাবে:

শিক্ষার্থীর ফলাফল
নাম	বিষয়	নম্বর
তানভীর	HTML	৯৫
মোট নম্বর		৯৫

🔷 rowspan — সারি জোড়া লাগানো

rowspan দিলে একটি ঘর একাধিক সারি জুড়ে বিস্তার করে।

<table> <tr> <th>বিভাগ</th> <th>কোর্স</th> <th>সময়কাল</th> </tr> <tr>  <td rowspan="2">Frontend</td> <td>HTML & CSS</td> <td>১ মাস</td> </tr> <tr>  <td>JavaScript</td> <td>২ মাস</td> </tr> <tr> <td rowspan="2">Backend</td> <td>Node.js</td> <td>২ মাস</td> </tr> <tr> <td>Database</td> <td>১ মাস</td> </tr> </table>

👇 ব্রাউজারে দেখাবে:

বিভাগ	কোর্স	সময়কাল
Frontend	HTML & CSS	১ মাস
Frontend	JavaScript	২ মাস
Backend	Node.js	২ মাস
Backend	Database	১ মাস

✅ colspan vs rowspan মনে রাখো:
colspan = ঘর পাশে বাড়ে → কলাম জোড়া লাগে
rowspan = ঘর নিচে বাড়ে ↓ সারি জোড়া লাগে

🔷 রিয়েল উদাহরণ

1. রেজাল্ট শিট Result Sheet

<table> <caption>বার্ষিক পরীক্ষার ফলাফল</caption> <thead> <tr> <th>রোল</th> <th>নাম</th> <th>বাংলা</th> <th>ইংরেজি</th> <th>গণিত</th> <th>মোট</th> </tr> </thead> <tbody> <tr> <td>১</td> <td>তানভীর</td> <td>৮৫</td> <td>৯০</td> <td>৯৫</td> <td>২৭০</td> </tr> <tr> <td>২</td> <td>তাহমিনা</td> <td>৯২</td> <td>৮৮</td> <td>৭৮</td> <td>২৫৮</td> </tr> </tbody> <tfoot> <tr> <td colspan="5"><strong>সর্বোচ্চ নম্বর</strong></td> <td><strong>২৭০</strong></td> </tr> </tfoot> </table>

👇 ব্রাউজারে দেখাবে:

**বার্ষিক পরীক্ষার ফলাফল**
রোল	নাম	বাংলা	ইংরেজি	গণিত	মোট
১	তানভীর	৮৫	৯০	৯৫	২৭০
২	তাহমিনা	৯২	৮৮	৭৮	২৫৮
সর্বোচ্চ নম্বর					২৭০

2. ক্লাস রুটিন (colspan + rowspan একসাথে) Class Routine

<table> <caption>সাপ্তাহিক ক্লাস রুটিন</caption> <thead> <tr> <th>সময়</th> <th>রবিবার</th> <th>সোমবার</th> <th>মঙ্গলবার</th> </tr> </thead> <tbody> <tr> <td>সকাল ৯টা</td> <td>HTML</td> <td rowspan="2">CSS (দীর্ঘ ক্লাস)</td>  <td>JavaScript</td> </tr> <tr> <td>সকাল ১০টা</td> <td>বিরতি</td>  <td>বিরতি</td> </tr> <tr> <td>সকাল ১১টা</td>  <td colspan="3">প্র্যাকটিক্যাল ক্লাস (সবাই একসাথে)</td> </tr> </tbody> </table>

👇 ব্রাউজারে দেখাবে:

**সাপ্তাহিক ক্লাস রুটিন**
সময়	রবিবার	সোমবার	মঙ্গলবার
সকাল ৯টা	HTML	CSS (দীর্ঘ ক্লাস)	JavaScript
সকাল ১০টা	বিরতি	CSS (দীর্ঘ ক্লাস)	বিরতি
সকাল ১১টা	প্র্যাকটিক্যাল ক্লাস (সবাই একসাথে)

🔷 দ্রুত রেফারেন্স — সব Table ট্যাগ এক নজরে

ট্যাগ / Attribute	কাজ	কোথায় লেখে	Closing ট্যাগ?
`<table>`	টেবিল কনটেইনার	সবার বাইরে	✅ হ্যাঁ
`<caption>`	টেবিলের শিরোনাম	table-এর প্রথমেই	✅ হ্যাঁ
`<thead>`	শিরোনাম গ্রুপ	table-এর ভেতরে	✅ হ্যাঁ
`<tbody>`	ডেটা গ্রুপ	thead-এর পরে	✅ হ্যাঁ
`<tfoot>`	সারসংক্ষেপ গ্রুপ	tbody-এর পরে	✅ হ্যাঁ
`<tr>`	একটি সারি	thead/tbody/tfoot-এ	✅ হ্যাঁ
`<th>`	শিরোনাম ঘর (Bold)	tr-এর ভেতরে	✅ হ্যাঁ
`<td>`	সাধারণ ডেটা ঘর	tr-এর ভেতরে	✅ হ্যাঁ
`colspan="n"`	n কলাম জোড়া →	th বা td-তে	—
`rowspan="n"`	n সারি জোড়া ↓	th বা td-তে	—
`scope`	th কোন দিকের শিরোনাম	th-তে	—

colspan ও rowspan-এর পার্থক্য:

Attribute	দিক	মানে	উদাহরণ
`colspan="2"`	→ পাশে বাড়ে	২টি কলাম একসাথে	`<td colspan="2">`
`rowspan="2"`	↓ নিচে বাড়ে	২টি সারি একসাথে	`<td rowspan="2">`
`colspan="2" rowspan="2"`	→ ও ↓ দুদিকে	২×২ = ৪ ঘর একসাথে	`<td colspan="2" rowspan="2">`

🎬 Embedding Media

এই সেকশনে HTML-এ ছবি, অডিও, ভিডিও, iframe, img vs figure, CSP এবং Priority Hints — সব ধরনের মিডিয়া যুক্ত করার উপায়, পার্থক্য ও নিরাপত্তা কমেন্টসহ বিস্তারিত বোঝানো হয়েছে।

🔷 Embedding কী?

Embedding মানে HTML পেজের ভেতরে বাইরের মিডিয়া কনটেন্ট যুক্ত করা — যেমন ছবি, অডিও, ভিডিও বা YouTube ভিডিও। সঠিক ট্যাগ বেছে নিলে পেজ দ্রুত লোড হয়, Accessibility ভালো থাকে এবং Google সঠিকভাবে কনটেন্ট বুঝতে পারে।

ট্যাগ	কাজ	ফাইলের ধরন	Closing ট্যাগ?
`<img>`	ছবি দেখানো	.jpg, .png, .gif, .svg, .webp	❌ না
`<figure>`	ছবি + ক্যাপশন গ্রুপ	যেকোনো মিডিয়া	✅ হ্যাঁ
`<figcaption>`	figure-এর ক্যাপশন	টেক্সট	✅ হ্যাঁ
`<audio>`	অডিও বাজানো	.mp3, .ogg, .wav	✅ হ্যাঁ
`<video>`	ভিডিও দেখানো	.mp4, .webm, .ogg	✅ হ্যাঁ
`<source>`	audio/video-এর সোর্স ফাইল	audio ও video-এর ভেতরে	❌ না
`<iframe>`	অন্য পেজ বা YouTube/Map	URL (লিংক)	✅ হ্যাঁ

🔷 <img> — ছবি যুক্ত করা

<img> দিয়ে HTML পেজে ছবি যুক্ত করা হয়। এটি একটি Self-Closing ট্যাগ — Closing Tag লাগে না। src ও alt — এই দুটো Attribute সবসময় দিতে হবে।

মূল গঠন:

বিভিন্ন ধরনের src (ছবির সোর্স): src

<img src="photo.jpg" alt="আমার ছবি">  <img src="images/banner.png" alt="ব্যানার ছবি">  <img src="../assets/logo.svg" alt="লোগো">  <img src="https://example.com/logo.png" alt="অনলাইন লোগো">

গুরুত্বপূর্ণ Attribute বিস্তারিত: Attributes

<img src="photo.jpg" alt="আমার ছবি" width="400" height="300">  <img src="article-photo.jpg" alt="আর্টিকেলের ছবি" loading="lazy">  <img src="hero.jpg" alt="হিরো ছবি" loading="eager">  <img src="logo.png" alt="DevShikhi লোগো" title="DevShikhi-তে স্বাগতম">   <img src="photo.jpg" alt="ছবি" decoding="async">

⚠️ alt-এর সঠিক ব্যবহার: অর্থহীন alt="" বা alt="ছবি" লেখা ভুল। ছবিতে কী আছে সেটা সংক্ষেপে লিখো — যেমন alt="তানভীর হোসেনের প্রোফাইল ছবি"। তবে শুধু সাজসজ্জার জন্য ব্যবহৃত ছবিতে alt="" (খালি) দিলে স্ক্রিন রিডার সেটা এড়িয়ে যাবে — এটা ঠিক আছে।

Attribute	কাজ	উদাহরণ	দরকার?
`src`	ছবির ঠিকানা	`src="photo.jpg"`	✅ অবশ্যই
`alt`	ছবির বিকল্প লেখা	`alt="প্রোফাইল ছবি"`	✅ অবশ্যই
`width`	ছবির প্রস্থ	`width="400"`	দেওয়া ভালো
`height`	ছবির উচ্চতা	`height="300"`	দেওয়া ভালো
`loading`	লোড কখন হবে	`loading="lazy"`	নিচের ছবিতে দাও
`decoding`	Decode পদ্ধতি	`decoding="async"`	বড় ছবিতে ভালো
`title`	Hover tooltip	`title="ছবির বিবরণ"`	প্রয়োজনে

🔷 <figure> ও <figcaption> — ছবির প্রেক্ষাপট

<figure> দিয়ে ছবি এবং তার ক্যাপশন একসাথে গোষ্ঠীবদ্ধ করা হয়। <figcaption> হলো সেই ছবির বিবরণ বা শিরোনাম। এটি Semantic HTML — Google ও স্ক্রিন রিডার এই সম্পর্কটা বোঝে।

মূল গঠন:

<figure> <img src="ছবি.jpg" alt="ছবির বিবরণ"> <figcaption>ছবির ক্যাপশন এখানে</figcaption> </figure>

figcaption উপরে বা নিচে: Position

<figure> <img src="sunset.jpg" alt="কক্সবাজারের সূর্যাস্ত" width="500"> <figcaption>চিত্র ১: কক্সবাজার সমুদ্র সৈকত, মে ২০২৬</figcaption> </figure>  <figure> <figcaption>চিত্র ২: বাংলাদেশের মানচিত্র</figcaption> <img src="map.jpg" alt="বাংলাদেশের মানচিত্র" width="400"> </figure>

figure-এ ছবি ছাড়া অন্য মিডিয়াও রাখা যায়: Other Media

<figure> <video src="tutorial.mp4" controls width="500"></video> <figcaption>ভিডিও ১: HTML টিউটোরিয়াল — পর্ব ১</figcaption> </figure>  <figure> <pre><code> <h1>Hello World</h1> </code></pre> <figcaption>কোড ১: HTML-এর প্রথম প্রোগ্রাম</figcaption> </figure>  <figure> <blockquote> <p>শিক্ষাই জাতির মেরুদণ্ড।</p> </blockquote> <figcaption>— বাংলাদেশের প্রবাদ</figcaption> </figure>

🔷 img vs. figure — কখন কোনটা ব্যবহার করবো?

<img> শুধু ছবি দেখায়। <figure> ছবিকে তার প্রেক্ষাপটসহ (ক্যাপশন, বিবরণ) উপস্থাপন করে। সঠিক টা বেছে নিলে পেজের Accessibility ও SEO ভালো হয়।

বিষয়	`<img>` একা	`<figure>` + `<img>`
ক্যাপশন	❌ নেই	✅ figcaption দিয়ে যোগ করা যায়
Semantic অর্থ	শুধু ছবি	ছবি + প্রেক্ষাপট একসাথে
CSS দিয়ে গ্রুপ সাজানো	কঠিন	✅ পুরো figure একসাথে সাজানো যায়
কনটেন্ট থেকে আলাদা?	না, কনটেন্টের ভেতরে	হ্যাঁ, আলাদা করলেও অর্থ থাকে
Screen Reader	শুধু alt পড়ে	alt + figcaption দুটোই পড়ে
Google SEO	alt থেকে বোঝে	alt + figcaption দুটো থেকে বোঝে
কোথায় ব্যবহার	লোগো, আইকন, প্রোফাইল ছবি	আর্টিকেল ছবি, চার্ট, ডায়াগ্রাম

সঠিক উদাহরণ — কখন কোনটা: উদাহরণ

<header> <img src="logo.svg" alt="DevShikhi লোগো" width="150"> </header> <div class="profile"> <img src="avatar.jpg" alt="তানভীর হোসেন" width="80" height="80"> <p>তানভীর হোসেন</p> </div>   <article> <h1>বাংলাদেশে ইন্টারনেট ব্যবহারকারী ১৩ কোটি</h1> <figure> <img src="internet-stats.png" alt="বার চার্ট — ২০২০ থেকে ২০২৬ পর্যন্ত ইন্টারনেট ব্যবহারকারীর সংখ্যা" width="600" loading="lazy"> <figcaption> চিত্র ১: বাংলাদেশে ইন্টারনেট ব্যবহারকারীর প্রবৃদ্ধি (২০২০–২০২৬)। সূত্র: বিটিআরসি। </figcaption> </figure> <p>চিত্র ১-এ দেখা যাচ্ছে গত ছয় বছরে ব্যবহারকারী তিনগুণ হয়েছে।</p> </article>

✅ সহজ নিয়ম: নিজেকে প্রশ্ন করো — "এই ছবিটার একটা বিবরণ বা শিরোনাম আছে কি?" থাকলে → <figure> ব্যবহার করো। না থাকলে → শুধু <img> যথেষ্ট।

🔷 <audio> — অডিও যুক্ত করা

<audio> ট্যাগ দিয়ে HTML পেজে অডিও বাজানো যায়। controls Attribute না দিলে প্লেয়ার দেখা যাবে না — অডিও চলবে কিন্তু থামানোর বা ভলিউম কমানোর কোনো উপায় থাকবে না।

মূল গঠন:

সব Attribute বিস্তারিত: Attributes

<audio src="song.mp3" controls></audio>   <audio src="bg-music.mp3" autoplay muted loop></audio>  <audio src="podcast.mp3" controls loop></audio>     <audio src="song.mp3" controls preload="metadata"></audio>

source ট্যাগ — একাধিক ফরম্যাট দেওয়া: source

<audio controls preload="metadata">  <source src="song.mp3" type="audio/mpeg">  <source src="song.ogg" type="audio/ogg">  <source src="song.wav" type="audio/wav">  <p>তোমার ব্রাউজার HTML audio সাপোর্ট করে না। <a href="song.mp3">এখানে ক্লিক করে ডাউনলোড করো।</a> </p> </audio>

ফরম্যাট	type	ব্রাউজার সাপোর্ট	ফাইল সাইজ
`.mp3`	`audio/mpeg`	সব ব্রাউজার ✅	ছোট
`.ogg`	`audio/ogg`	Chrome, Firefox	ছোট
`.wav`	`audio/wav`	সব ব্রাউজার ✅	বড়
`.aac`	`audio/aac`	Chrome, Safari	ছোট

⚠️ autoplay সতর্কতা: ব্যবহারকারীর অনুমতি ছাড়া অডিও বাজানো বিরক্তিকর। আধুনিক ব্রাউজার autoplay ব্লক করে যদি না muted থাকে। Background music এর জন্য autoplay muted loop দাও — ব্যবহারকারী চাইলে আনমিউট করবে।

🔷 <video> — ভিডিও যুক্ত করা

<video> ট্যাগ দিয়ে HTML পেজে ভিডিও দেখানো যায়। poster Attribute দিলে ভিডিও লোড হওয়ার আগে একটি thumbnail ছবি দেখায় — পেজ সুন্দর দেখায় এবং ব্যবহারকারী বোঝে কী ধরনের ভিডিও।

মূল গঠন:

সব Attribute বিস্তারিত: Attributes

<video src="tutorial.mp4" controls width="640" height="360" poster="thumbnail.jpg"> </video>  <video src="hero-bg.mp4" autoplay loop muted playsinline width="100%"> </video>  <video src="movie.mp4" controls preload="none" poster="thumb.jpg"> </video>

source ট্যাগ — একাধিক ফরম্যাট: source

<video controls width="640" height="360" poster="thumbnail.jpg">  <source src="movie.mp4" type="video/mp4">  <source src="movie.webm" type="video/webm">  <source src="movie.ogg" type="video/ogg">  <p> তোমার ব্রাউজার HTML video সাপোর্ট করে না। <a href="movie.mp4">ভিডিও ডাউনলোড করো।</a> </p> </video>

ফরম্যাট	type	ব্রাউজার সাপোর্ট	মন্তব্য
`.mp4`	`video/mp4`	সব ব্রাউজার ✅	সবচেয়ে ভালো পছন্দ
`.webm`	`video/webm`	Chrome, Firefox, Edge	ছোট সাইজ, ভালো মান
`.ogg`	`video/ogg`	Firefox (পুরনো)	কম ব্যবহৃত

audio ও video Attribute তুলনা:

Attribute	কাজ	<audio>	<video>
`controls`	প্লেয়ার UI দেখায়	✅	✅
`autoplay`	নিজে নিজে শুরু হয়	✅	✅
`loop`	বারবার চলে	✅	✅
`muted`	শব্দ বন্ধ রেখে শুরু	✅	✅
`preload`	আগে থেকে কতটুকু লোড	✅	✅
`poster`	শুরুর আগে thumbnail	❌	✅
`width / height`	সাইজ নির্ধারণ	❌	✅
`playsinline`	মোবাইলে পেজেই বাজে	❌	✅

🔷 <iframe> — অন্য পেজ বা YouTube যুক্ত করা

<iframe> দিয়ে পেজের ভেতরে আরেকটি ওয়েবপেজ দেখানো যায়। এটি সম্পূর্ণ আলাদা একটি উইন্ডো — ভেতরের কনটেন্ট বাইরের পেজকে প্রভাবিত করে না।

YouTube ভিডিও Embed করা: YouTube

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" title="HTML শেখার সম্পূর্ণ গাইড" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"> </iframe>     <iframe src="https://www.youtube.com/embed/VIDEO_ID?start=150" width="560" height="315" title="টিউটোরিয়াল — ২:৩০ থেকে শুরু" allowfullscreen> </iframe>

Google Map Embed করা: Google Map

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="100%" height="400" style="border:0;" allowfullscreen loading="lazy" title="DevShikhi অফিসের অবস্থান — ধানমন্ডি, ঢাকা"> </iframe>

sandbox — iframe সীমাবদ্ধ করা: sandbox

<iframe src="content.html" sandbox></iframe>  <iframe src="form-page.html" sandbox="allow-scripts allow-forms" title="ফর্ম পেজ"> </iframe>  <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen title="YouTube ভিডিও"> </iframe>

⚠️ সতর্কতা: সব ওয়েবসাইট iframe-এ দেখানো যায় না। অনেক সাইট X-Frame-Options Header দিয়ে iframe ব্লক করে। YouTube ও Google Map সবসময় iframe সাপোর্ট করে। অজানা সাইটের iframe যুক্ত করার আগে sandbox দাও।

🔷 ছবির ফরম্যাট — কোনটা কখন ব্যবহার করবো?

ফরম্যাট	কোথায় ভালো	সুবিধা	অসুবিধা
`.jpg / .jpeg`	ফটো, বড় রঙিন ছবি	ছোট ফাইল সাইজ	Transparency নেই
`.png`	লোগো, স্ক্রিনশট, আইকন	Transparency সাপোর্ট, পরিষ্কার	ফাইল সাইজ বড়
`.gif`	ছোট অ্যানিমেশন	অ্যানিমেশন সাপোর্ট	শুধু ২৫৬ রঙ
`.svg`	আইকন, লোগো, ইলাস্ট্রেশন	যেকোনো সাইজে পরিষ্কার, ছোট	ফটো হয় না
`.webp`	সব ধরনের ছবি	jpg-র চেয়ে ৩০% ছোট, Transparency আছে	পুরনো ব্রাউজার সাপোর্ট নেই
`.avif`	আধুনিক পেজের ছবি	webp-র চেয়েও ছোট	নতুন ফরম্যাট, কম সাপোর্ট

✅ সহজ নিয়ম: ফটো → .webp (না হলে .jpg) | লোগো/আইকন → .svg | ব্যাকগ্রাউন্ড লোগো → .png | অ্যানিমেশন → .gif বা CSS Animation

🔷 রিয়েল উদাহরণ

1. নিউজ আর্টিকেল — figure ও img News Article

<article> <h1>বাংলাদেশে IT খাতে নতুন রেকর্ড</h1>  <div class="author"> <img src="author.jpg" alt="তাহমিনা আক্তার" width="40" height="40"> <span>তাহমিনা আক্তার</span> </div>  <figure> <img src="it-sector.jpg" alt="ঢাকার একটি IT অফিসে কর্মীরা কাজ করছেন" width="700" loading="lazy"> <figcaption> ঢাকার বেসিস সফটেক্স মেলায় স্থানীয় IT কোম্পানিগুলো। ছবি: প্রথম আলো, মে ২০২৬ </figcaption> </figure> <p>চলতি বছর বাংলাদেশের IT রপ্তানি ২ বিলিয়ন ডলার ছাড়িয়েছে...</p> </article>

2. ভিডিও টিউটোরিয়াল পেজ Tutorial Page

<section> <h2>HTML শেখার ভিডিও সিরিজ</h2>  <figure> <video controls width="640" height="360" poster="ep1-thumb.jpg" preload="none"> <source src="ep1.mp4" type="video/mp4"> <source src="ep1.webm" type="video/webm"> <p>ভিডিও চলছে না? <a href="ep1.mp4">ডাউনলোড করো।</a></p> </video> <figcaption>পর্ব ১: HTML কী এবং কীভাবে শুরু করবো</figcaption> </figure>  <figure> <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="640" height="360" title="HTML Tutorial — YouTube" allowfullscreen loading="lazy"> </iframe> <figcaption>সম্পূরক: HTML ইতিহাস ও ভবিষ্যৎ</figcaption> </figure> </section>

3. Contact পেজ — Map ও Audio Contact Page

<section id="contact"> <h2>আমাদের সাথে যোগাযোগ করুন</h2>  <figure> <iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="350" style="border:0;" allowfullscreen loading="lazy" title="DevShikhi অফিস — ধানমন্ডি, ঢাকা"> </iframe> <figcaption>আমাদের অফিস: বাড়ি ১২, রোড ৪, ধানমন্ডি, ঢাকা</figcaption> </figure>  <p>🎙️ অফিস খোঁজার গাইড শুনুন:</p> <audio controls preload="none"> <source src="office-guide.mp3" type="audio/mpeg"> <source src="office-guide.ogg" type="audio/ogg"> </audio> </section>

🔷 CSP — Content Security Policy

CSP (Content Security Policy) হলো ব্রাউজারকে বলার উপায় — "এই পেজ শুধু নির্দিষ্ট জায়গা থেকেই কনটেন্ট লোড করতে পারবে।" এটি ওয়েবপেজকে XSS ও Clickjacking আক্রমণ থেকে সুরক্ষিত রাখে।

HTML meta ট্যাগে CSP: meta CSP

গুরুত্বপূর্ণ CSP Directive ও উদাহরণ: Directives

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; script-src 'self'">  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src https://www.youtube.com https://www.google.com">  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com">  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://cdn.example.com data:; media-src 'self'">

Directive	নিয়ন্ত্রণ করে	মিডিয়ায় ব্যবহার
`default-src`	সব ধরনের কনটেন্টের ডিফল্ট	সব কিছুর জন্য fallback
`img-src`	ছবির সোর্স	`<img>` ট্যাগের জন্য
`media-src`	audio ও video-এর সোর্স	`<audio>`, `<video>`-এর জন্য
`frame-src`	iframe-এর সোর্স	`<iframe>`-এর জন্য
`script-src`	JavaScript-এর সোর্স	XSS ঠেকাতে সবচেয়ে গুরুত্বপূর্ণ
`style-src`	CSS-এর সোর্স	Google Fonts অনুমতি দিতে
`font-src`	ফন্টের সোর্স	Google Fonts gstatic-এর জন্য
`connect-src`	API / fetch কোথায় যাবে	JavaScript fetch/XHR-এর জন্য

⚠️ meta CSP-এর সীমাবদ্ধতা: <meta> ট্যাগে CSP দিলে frame-ancestors Directive কাজ করে না। সম্পূর্ণ সুরক্ষার জন্য Server-এ HTTP Response Header-এ Content-Security-Policy দেওয়া সবচেয়ে কার্যকর।

🔷 Priority Hints — লোডিং অগ্রাধিকার

Priority Hints হলো fetchpriority Attribute দিয়ে ব্রাউজারকে বলার উপায় — "এই রিসোর্সটা আগে লোড করো, ওটা পরে।" এতে পেজের গুরুত্বপূর্ণ কনটেন্ট আগে দেখা যায় এবং পেজ দ্রুত মনে হয়।

fetchpriority-এর তিনটি মান: Values

<img src="hero-banner.jpg" alt="হিরো ব্যানার" fetchpriority="high">  <img src="footer-logo.png" alt="ফুটার লোগো" fetchpriority="low">  <img src="content-photo.jpg" alt="কনটেন্ট ছবি" fetchpriority="auto">

একটি পেজে সঠিক Priority ব্যবহার: পূর্ণ উদাহরণ

মান	মানে	কোথায় ব্যবহার করবো	কোথায় ব্যবহার করবো না
`fetchpriority="high"`	সবার আগে লোড করো	হিরো ছবি, মূল CSS, গুরুত্বপূর্ণ ফন্ট	সব ছবিতে দিলে কোনো সুবিধা নেই
`fetchpriority="low"`	পরে লোড হলেই চলে	ফুটার ছবি, Analytics, নিচের Map	hero বা প্রথম দৃশ্যমান ছবিতে
`fetchpriority="auto"`	ব্রাউজার ঠিক করবে	সাধারণ কনটেন্ট ছবি	—

✅ loading vs fetchpriority পার্থক্য:
loading="lazy" → কখন লোড শুরু হবে (স্ক্রোল না করলে লোড হবে না)
fetchpriority → লোড শুরু হলে কোনটা আগে আসবে
দুটো একসাথে দিতে পারো — loading="lazy" fetchpriority="low" মানে: স্ক্রোল করলে লোড শুরু হবে এবং তখনও সবার শেষে লোড হবে।

📝 Using Forms — HTML ফর্ম

এই সেকশনে HTML Form-এর সব ট্যাগ, Input Type, Attribute, Validation এবং রিয়েল উদাহরণ — কমেন্টসহ বিস্তারিত বোঝানো হয়েছে।

🔷 HTML Form কী?

HTML Form দিয়ে ওয়েবপেজে ব্যবহারকারীর কাছ থেকে তথ্য সংগ্রহ করা হয় — যেমন লগইন, রেজিস্ট্রেশন, সার্চ বা যোগাযোগ ফর্ম।

Form-এর মূল ট্যাগগুলো:

ট্যাগ	কাজ	Closing ট্যাগ?
`<form>`	পুরো ফর্মের কনটেইনার	✅ হ্যাঁ
`<input>`	বিভিন্ন ধরনের ইনপুট ফিল্ড	❌ না (self-closing)
`<label>`	ইনপুটের শিরোনাম	✅ হ্যাঁ
`<textarea>`	বহু লাইনের টেক্সট বক্স	✅ হ্যাঁ
`<select>`	ড্রপডাউন তালিকা	✅ হ্যাঁ
`<option>`	ড্রপডাউনের প্রতিটি আইটেম	✅ হ্যাঁ
`<button>`	ক্লিকযোগ্য বোতাম	✅ হ্যাঁ
`<fieldset>`	সম্পর্কিত ফিল্ড গ্রুপ	✅ হ্যাঁ
`<legend>`	fieldset-এর শিরোনাম	✅ হ্যাঁ
`<datalist>`	ইনপুটের পরামর্শ তালিকা	✅ হ্যাঁ

🔷 <form> ট্যাগ — গুরুত্বপূর্ণ Attribute

<form> ট্যাগে action ও method সবচেয়ে গুরুত্বপূর্ণ Attribute — ডেটা কোথায় ও কীভাবে যাবে তা নির্ধারণ করে।

action ও method: action & method

<form action="/search" method="GET"> <input type="text" name="q" placeholder="খুঁজুন..."> <button type="submit">সার্চ</button> </form>    <form action="/login" method="POST"> <input type="email" name="email"> <input type="password" name="password"> <button type="submit">লগইন</button> </form>

enctype — ফাইল আপলোডের জন্য: enctype

<form action="/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="photo"> <button type="submit">আপলোড</button> </form>

Attribute	মান	কাজ	কখন ব্যবহার
`action`	URL	ডেটা কোথায় যাবে	সবসময়
`method="GET"`	GET	URL-এ ডেটা দেখা যায়	সার্চ ফর্ম
`method="POST"`	POST	URL-এ ডেটা লুকানো থাকে	লগইন, রেজিস্ট্রেশন
`enctype`	multipart/form-data	ফাইল আপলোড সক্ষম করে	ফাইল আপলোড ফর্ম
`autocomplete`	on / off	Browser auto-fill চালু/বন্ধ	পাসওয়ার্ড ফর্মে off দাও
`novalidate`	(কোনো value নেই)	Built-in validation বন্ধ	Custom validation করলে

🔷 <label> — ইনপুটের শিরোনাম

<label> ট্যাগ ইনপুটের শিরোনাম দেয়। label-এ ক্লিক করলে সংযুক্ত input-এ ফোকাস যায় — এটি মোবাইলে ফর্ম ব্যবহার অনেক সহজ করে।

উপায় ১ — for ও id মেলানো: for & id

<label for="username">ব্যবহারকারীর নাম:</label> <input type="text" id="username" name="username"> <label for="email">ইমেইল ঠিকানা:</label> <input type="email" id="email" name="email">

উপায় ২ — Wrapping (label-এর ভেতরে input): Wrapping

<label> ব্যবহারকারীর নাম: <input type="text" name="username"> </label> <label> পাসওয়ার্ড: <input type="password" name="password"> </label>

⚠️ label ছাড়া input দিও না: প্রতিটি input-এর একটি label থাকা উচিত। label ছাড়া screen reader বুঝতে পারে না এই ফিল্ডে কী দিতে হবে। দেখতে না চাইলে CSS দিয়ে লুকাও, কিন্তু HTML-এ রাখো।

🔷 <input> type — বিভিন্ন ধরনের ইনপুট

type Attribute পরিবর্তন করলে ইনপুটের চেহারা, আচরণ ও মোবাইলে কীবোর্ড বদলে যায়। HTML5-এ অনেক নতুন type যোগ হয়েছে যা Validation-ও করে।

1. টেক্সট ইনপুট: Text Types

<input type="text" name="name" placeholder="তোমার নাম">  <input type="email" name="email" placeholder="example@gmail.com">  <input type="password" name="password" placeholder="পাসওয়ার্ড">  <input type="tel" name="phone" placeholder="০১৭০০-০০০০০০">  <input type="url" name="website" placeholder="https://example.com">  <input type="search" name="q" placeholder="খুঁজুন...">

2. নম্বর ইনপুট: Number Types

<input type="number" name="age" min="1" max="120" placeholder="বয়স">  <label for="volume">ভলিউম: </label> <input type="range" id="volume" name="volume" min="0" max="100" value="50">

3. তারিখ ও সময়: Date & Time

<input type="date" name="birthday">  <input type="time" name="meeting-time">  <input type="datetime-local" name="appointment">  <input type="month" name="card-expiry">  <input type="week" name="report-week">

4. পছন্দ ইনপুট: Choice Types

<label><input type="checkbox" name="skill" value="html"> HTML</label> <label><input type="checkbox" name="skill" value="css"> CSS</label> <label><input type="checkbox" name="skill" value="js"> JavaScript</label>  <label><input type="radio" name="gender" value="male"> পুরুষ</label> <label><input type="radio" name="gender" value="female"> মহিলা</label> <label><input type="radio" name="gender" value="other"> অন্যান্য</label>  <label><input type="radio" name="plan" value="free" checked> ফ্রি প্ল্যান</label> <label><input type="radio" name="plan" value="pro"> প্রো প্ল্যান</label>

5. ফাইল, রঙ ও লুকানো: Special Types

<input type="file" name="photo" accept="image/*">  <input type="file" name="docs" accept=".pdf,.doc,.docx" multiple>  <label for="bg-color">পছন্দের রঙ:</label> <input type="color" id="bg-color" name="bg-color" value="#7F77DD">  <input type="hidden" name="user-id" value="42">

6. বোতাম ইনপুট: Button Types

<input type="submit" value="জমা দিন">  <input type="reset" value="মুছে ফেলো">  <button type="submit">জমা দিন</button> <button type="reset">মুছে ফেলো</button> <button type="button" onclick="doSomething()">ক্লিক করো</button>

সব input type এক নজরে:

type	কাজ	মোবাইল কীবোর্ড	Validation
`text`	সাধারণ টেক্সট	সাধারণ	❌
`email`	ইমেইল ঠিকানা	@ কীবোর্ড	✅ @ যাচাই
`password`	পাসওয়ার্ড	সাধারণ	❌
`number`	সংখ্যা	নম্বর কীবোর্ড	✅ সংখ্যা যাচাই
`tel`	ফোন নম্বর	নম্বর কীবোর্ড	❌
`url`	ওয়েব লিংক	URL কীবোর্ড	✅ https:// যাচাই
`date`	তারিখ	ক্যালেন্ডার	✅ তারিখ যাচাই
`checkbox`	একাধিক পছন্দ	—	❌
`radio`	একটি পছন্দ	—	❌
`file`	ফাইল আপলোড	ফাইল পিকার	✅ ধরন যাচাই
`range`	স্লাইডার	—	✅ min/max
`color`	রঙ পিকার	রঙ পিকার	❌
`hidden`	লুকানো ডেটা	—	❌

🔷 Input-এর গুরুত্বপূর্ণ Attribute

<input type="text" name="full-name">  <input type="text" name="city" placeholder="তোমার শহরের নাম">  <input type="text" name="country" value="বাংলাদেশ">  <input type="email" name="email" required>  <input type="text" name="username" value="tanvir" disabled>  <input type="text" name="ref-code" value="REF-2026" readonly>  <input type="text" name="username" minlength="3" maxlength="20">  <input type="number" name="quantity" min="1" max="100" step="1">   <input type="tel" name="phone" pattern="01[3-9][0-9]{8}" placeholder="01700000000" title="০১ দিয়ে শুরু ১১ সংখ্যার নম্বর দিন">  <input type="search" name="q" autofocus placeholder="খুঁজুন...">

Attribute	কাজ	উদাহরণ	দরকার?
`name`	ডেটার চাবিকাঠি	`name="email"`	✅ অবশ্যই
`placeholder`	ইঙ্গিত লেখা	`placeholder="ইমেইল দাও"`	ভালো অভ্যাস
`required`	পূরণ না করলে জমা হবে না	`required`	জরুরি ফিল্ডে
`disabled`	সম্পূর্ণ নিষ্ক্রিয়	`disabled`	প্রয়োজনে
`readonly`	পড়া যাবে, পরিবর্তন নয়	`readonly`	প্রয়োজনে
`maxlength`	সর্বোচ্চ অক্ষর সংখ্যা	`maxlength="100"`	টেক্সটে ভালো
`pattern`	Regex ফরম্যাট যাচাই	`pattern="[A-Za-z]+"`	Custom validation-এ
`autofocus`	পেজ লোডে ফোকাস	`autofocus`	মূল ইনপুটে

🔷 <textarea> — বহু লাইনের টেক্সট

<textarea> দিয়ে বহু লাইনের টেক্সট ইনপুট তৈরি হয়। মন্তব্য, বার্তা বা বিস্তারিত বিবরণের জন্য ব্যবহার করো।

<label for="message">বার্তা:</label> <textarea id="message" name="message" rows="5" cols="40"></textarea>  <textarea name="comment" rows="4" placeholder="তোমার মন্তব্য লিখো..." maxlength="500"> </textarea>  <textarea name="bio" rows="3">আমি একজন Web Developer।</textarea>  <textarea name="feedback" style="resize: none;" rows="4"></textarea>

✅ টিপস: textarea-এর সাইজ CSS-এ width ও height দিয়ে নিয়ন্ত্রণ করো — rows ও cols শুধু fallback হিসেবে রাখো। ব্যবহারকারী resize করতে না পারলে resize: none দাও।

🔷 <select> ও <option> — ড্রপডাউন মেনু

<select> দিয়ে ড্রপডাউন তালিকা তৈরি হয়। অনেক অপশনের মধ্য থেকে একটি (বা একাধিক) বেছে নেওয়ার জন্য ব্যবহার করো।

সাধারণ ড্রপডাউন: select

<label for="division">বিভাগ নির্বাচন:</label> <select id="division" name="division">  <option value="" disabled selected>-- বিভাগ বেছে নাও --</option> <option value="dhaka">ঢাকা</option> <option value="chittagong">চট্টগ্রাম</option> <option value="rajshahi">রাজশাহী</option> <option value="khulna">খুলনা</option> <option value="sylhet">সিলেট</option> <option value="barisal">বরিশাল</option> <option value="rangpur">রংপুর</option> <option value="mymensingh">ময়মনসিংহ</option> </select>

optgroup — গ্রুপ করা ড্রপডাউন: optgroup

<label for="course">কোর্স বেছে নাও:</label> <select id="course" name="course">  <optgroup label="Frontend"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> </optgroup> <optgroup label="Backend"> <option value="node">Node.js</option> <option value="python">Python</option> <option value="php">PHP</option> </optgroup> </select>

multiple — একাধিক পছন্দ: multiple

<label for="skills">দক্ষতা বেছে নাও (একাধিক):</label> <select id="skills" name="skills" multiple size="4"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> <option value="react">React</option> </select>

🔷 fieldset, legend ও datalist

fieldset ও legend — ফিল্ড গ্রুপ করা: fieldset

<form action="/register" method="POST">  <fieldset> <legend>ব্যক্তিগত তথ্য</legend> <label for="fname">নাম:</label> <input type="text" id="fname" name="full-name" required> <label for="dob">জন্ম তারিখ:</label> <input type="date" id="dob" name="dob"> </fieldset>  <fieldset> <legend>যোগাযোগের তথ্য</legend> <label for="reg-email">ইমেইল:</label> <input type="email" id="reg-email" name="email" required> <label for="reg-phone">ফোন:</label> <input type="tel" id="reg-phone" name="phone"> </fieldset> <button type="submit">রেজিস্ট্রেশন করো</button> </form>

datalist — Auto-suggest তালিকা: datalist

<label for="browser">পছন্দের ব্রাউজার:</label> <input type="text" id="browser" name="browser" list="browser-list">  <datalist id="browser-list"> <option value="Google Chrome"> <option value="Mozilla Firefox"> <option value="Microsoft Edge"> <option value="Safari"> <option value="Opera"> </datalist>  <label for="city">শহর:</label> <input type="text" id="city" name="city" list="city-list"> <datalist id="city-list"> <option value="ঢাকা"> <option value="চট্টগ্রাম"> <option value="সিলেট"> <option value="রাজশাহী"> </datalist>

✅ datalist vs select পার্থক্য:
<select> = শুধু তালিকা থেকে বেছে নিতে হয়
<datalist> = তালিকা দেখায় কিন্তু নিজেও লিখতে পারে

🔷 HTML5 Form Validation — ফর্ম যাচাই

HTML5-এ JavaScript ছাড়াই ব্রাউজার ফর্ম যাচাই করতে পারে। required, pattern, min/max দিয়ে নিয়ম দিলে ব্রাউজার Submit-এর আগে নিজেই যাচাই করে।

<form action="/register" method="POST">  <label for="v-name">নাম: *</label> <input type="text" id="v-name" name="name" required>  <label for="v-email">ইমেইল: *</label> <input type="email" id="v-email" name="email" required>  <label for="v-pass">পাসওয়ার্ড: *</label> <input type="password" id="v-pass" name="password" minlength="8" maxlength="50" required>  <label for="v-age">বয়স:</label> <input type="number" id="v-age" name="age" min="13" max="100">   <label for="v-phone">ফোন:</label> <input type="tel" id="v-phone" name="phone" pattern="01[3-9][0-9]{8}" title="০১ দিয়ে শুরু ১১ সংখ্যার নম্বর দিন (যেমন: 01700000000)" placeholder="01700000000">  <label for="v-website">ওয়েবসাইট:</label> <input type="url" id="v-website" name="website" placeholder="https://"> <button type="submit">রেজিস্ট্রেশন করো</button> </form>

⚠️ Client-side Validation যথেষ্ট নয়: HTML5 Validation শুধু ব্রাউজারে চলে। কেউ JavaScript বন্ধ করলে বা সরাসরি request পাঠালে এই validation পাস হয়ে যাবে। সার্ভারেও অবশ্যই ডেটা যাচাই করতে হবে।

🔷 রিয়েল উদাহরণ

1. লগইন ফর্ম Login Form

<form action="/login" method="POST" autocomplete="off"> <h2>লগইন করুন</h2> <label for="login-email">ইমেইল:</label> <input type="email" id="login-email" name="email" required autofocus placeholder="your@email.com"> <label for="login-pass">পাসওয়ার্ড:</label> <input type="password" id="login-pass" name="password" required minlength="8" placeholder="পাসওয়ার্ড"> <label> <input type="checkbox" name="remember" value="yes"> আমাকে মনে রাখো </label> <button type="submit">লগইন</button> <a href="/forgot-password">পাসওয়ার্ড ভুলে গেছেন?</a> </form>

2. যোগাযোগ ফর্ম Contact Form

<form action="/contact" method="POST"> <h2>যোগাযোগ করুন</h2>  <label for="c-name">আপনার নাম: *</label> <input type="text" id="c-name" name="name" required placeholder="পুরো নাম লিখুন">  <label for="c-email">ইমেইল: *</label> <input type="email" id="c-email" name="email" required placeholder="your@email.com">  <label for="c-subject">বিষয়:</label> <select id="c-subject" name="subject"> <option value="" disabled selected>-- বিষয় বেছে নিন --</option> <option value="general">সাধারণ প্রশ্ন</option> <option value="support">প্রযুক্তিগত সহায়তা</option> <option value="billing">পেমেন্ট সংক্রান্ত</option> <option value="other">অন্যান্য</option> </select>  <label for="c-message">বার্তা: *</label> <textarea id="c-message" name="message" rows="5" required minlength="20" maxlength="1000" placeholder="আপনার বার্তা এখানে লিখুন..."> </textarea>  <label> <input type="checkbox" name="agree" required> আমি <a href="/privacy">গোপনীয়তা নীতি</a> মানি * </label> <button type="submit">বার্তা পাঠান</button> <button type="reset">মুছে ফেলুন</button> </form>

3. রেজিস্ট্রেশন ফর্ম — fieldset সহ Registration Form

<form action="/register" method="POST"> <h2>নতুন অ্যাকাউন্ট তৈরি করুন</h2>  <fieldset> <legend>ব্যক্তিগত তথ্য</legend> <label for="r-name">পুরো নাম: *</label> <input type="text" id="r-name" name="name" required minlength="3" maxlength="60"> <label for="r-dob">জন্ম তারিখ:</label> <input type="date" id="r-dob" name="dob" max="2010-01-01">  <p>লিঙ্গ:</p> <label><input type="radio" name="gender" value="male" required> পুরুষ</label> <label><input type="radio" name="gender" value="female"> মহিলা</label> <label><input type="radio" name="gender" value="other"> অন্যান্য</label> </fieldset>  <fieldset> <legend>অ্যাকাউন্টের তথ্য</legend> <label for="r-email">ইমেইল: *</label> <input type="email" id="r-email" name="email" required> <label for="r-pass">পাসওয়ার্ড: *</label> <input type="password" id="r-pass" name="password" required minlength="8" placeholder="কমপক্ষে ৮ অক্ষর"> </fieldset>  <fieldset> <legend>আগ্রহের বিষয় (একাধিক বেছে নাও)</legend> <label><input type="checkbox" name="interest" value="html"> HTML</label> <label><input type="checkbox" name="interest" value="css"> CSS</label> <label><input type="checkbox" name="interest" value="js"> JavaScript</label> <label><input type="checkbox" name="interest" value="react"> React</label> </fieldset> <button type="submit">অ্যাকাউন্ট তৈরি করো</button> </form>

🔷 দ্রুত রেফারেন্স — সব Form ট্যাগ ও Attribute এক নজরে

ট্যাগ	কাজ	মূল Attribute
`<form>`	ফর্মের কনটেইনার	`action`, `method`, `enctype`
`<input>`	ইনপুট ফিল্ড	`type`, `name`, `required`
`<label>`	ইনপুটের শিরোনাম	`for`
`<textarea>`	বহু লাইনের টেক্সট	`rows`, `cols`, `maxlength`
`<select>`	ড্রপডাউন	`name`, `multiple`, `size`
`<option>`	ড্রপডাউন আইটেম	`value`, `selected`, `disabled`
`<optgroup>`	option গ্রুপ	`label`
`<button>`	বোতাম	`type` (submit/reset/button)
`<fieldset>`	ফিল্ড গ্রুপ	`disabled`
`<legend>`	fieldset-এর শিরোনাম	—
`<datalist>`	পরামর্শ তালিকা	`id` (input-এর list-এর সাথে মেলাও)

GET vs POST মনে রাখার উপায়:

বিষয়	GET	POST
ডেটা কোথায়?	URL-এ দেখা যায়	Request body-তে লুকানো
নিরাপত্তা	কম নিরাপদ	বেশি নিরাপদ
Bookmark করা যায়?	✅ হ্যাঁ	❌ না
ডেটার সীমা	সীমিত (URL দৈর্ঘ্য)	বড় ডেটা পাঠানো যায়
কোথায় ব্যবহার	সার্চ, ফিল্টার	লগইন, রেজিস্ট্রেশন, আপলোড

🔷 Form Constraints — ইনপুটের নিয়মের সীমানা

Form Constraints হলো ইনপুট ফিল্ডে কী ধরনের ডেটা দেওয়া যাবে তার নিয়মের সীমানা। ব্রাউজার Submit-এর আগে এই নিয়মগুলো নিজেই যাচাই করে — ভুল হলে error দেখায় ও Submit থামিয়ে দেয়।

সব Constraint Attribute একসাথে: Constraints

<input type="text" name="name" required>  <input type="text" name="username" minlength="3" maxlength="20">   <input type="number" name="age" min="13" max="120">    <input type="number" name="quantity" min="0" max="100" step="5">   <input type="date" name="birthday" min="1920-01-01" max="2010-12-31">    <input type="text" name="zip" pattern="[0-9]{4}" title="৪ সংখ্যার পোস্ট কোড দিন" placeholder="১২০০">

Constraint ও CSS :valid / :invalid: CSS Pseudo-class

formnovalidate — নির্দিষ্ট বোতামে Validation বন্ধ: formnovalidate

formaction, formmethod — বোতাম ভেদে আলাদা Action: formaction

<form action="/profile" method="POST"> <input type="text" name="name" required> <input type="email" name="email" required>  <button type="submit">সংরক্ষণ করো</button>  <button type="submit" formaction="/profile/delete" formmethod="POST"> অ্যাকাউন্ট মুছে ফেলো </button>  <button type="submit" formaction="/preview" formmethod="GET" formnovalidate> প্রিভিউ দেখো </button> </form>

Constraint	প্রযোজ্য type	error কখন?	উদাহরণ
`required`	সব type	ফাঁকা থাকলে	`required`
`minlength`	text, password, email, search	অক্ষর কম হলে	`minlength="8"`
`maxlength`	text, password, email, search	অক্ষর বেশি হলে (টাইপ থামে)	`maxlength="50"`
`min`	number, date, time, range	মান কম হলে	`min="1"`
`max`	number, date, time, range	মান বেশি হলে	`max="100"`
`step`	number, date, time, range	নির্দিষ্ট ব্যবধানে না হলে	`step="5"`
`pattern`	text, tel, email, url	Pattern না মিললে	`pattern="[0-9]{4}"`
`type`	email, url, number	ফরম্যাট ভুল হলে	`type="email"`

🔷 output, meter ও progress — ফলাফল ও অগ্রগতি দেখানো

<output> — গণনার ফলাফল দেখানো: output

<form oninput="result.value = parseInt(price.value) * parseInt(qty.value)"> <label for="price">দাম (টাকা):</label> <input type="number" id="price" name="price" value="100" min="0"> <label for="qty">পরিমাণ:</label> <input type="number" id="qty" name="qty" value="1" min="1">  <p>মোট: <output name="result" for="price qty">100</output> টাকা</p> </form>

<meter> — পরিমাপের গেজ: meter

<label>ডিস্ক ব্যবহার:</label> <meter value="70" min="0" max="100" low="30" high="80" optimum="20"> 70% </meter> <span>70 GB / 100 GB</span>  <label>পাসওয়ার্ডের শক্তি:</label> <meter value="3" min="0" max="5" low="2" high="4" optimum="5"> ৩/৫ </meter>  <label>রেটিং:</label> <meter value="4.2" min="0" max="5">4.2 out of 5</meter>

<progress> — কাজের অগ্রগতি: progress

<label>আপলোড হচ্ছে:</label> <progress value="60" max="100">60%</progress> <span>60%</span>  <label>কোর্সের অগ্রগতি:</label> <progress value="2" max="5">2/5</progress> <span>৫টি মডিউলের মধ্যে ২টি সম্পন্ন</span>  <label>লোড হচ্ছে...</label> <progress></progress>

ট্যাগ	কাজ	পার্থক্য	উদাহরণ
`<output>`	গণনার ফলাফল	JS দিয়ে আপডেট হয়	মোট দাম, বয়স গণনা
`<meter>`	নির্দিষ্ট পরিসরের মান	low/high/optimum আছে	ডিস্ক ব্যবহার, রেটিং
`<progress>`	কাজের অগ্রগতি	সময়ের সাথে বাড়ে	ফাইল আপলোড, কোর্স অগ্রগতি

🔷 Form Accessibility — সবার জন্য ব্যবহারযোগ্য ফর্ম

Accessible Form মানে এমন ফর্ম যা স্ক্রিন রিডার, কীবোর্ড এবং বিশেষ সহায়ক প্রযুক্তি দিয়েও ব্যবহার করা যায়। এটি ভালো ডিজাইনের অংশ — শুধু বিশেষ প্রয়োজনের মানুষের জন্য নয়।

ARIA Attribute — অতিরিক্ত তথ্য: ARIA

<input type="search" aria-label="পণ্য খুঁজুন" placeholder="খুঁজুন...">  <label for="pass-field">পাসওয়ার্ড:</label> <input type="password" id="pass-field" name="password" aria-describedby="pass-hint" required> <p id="pass-hint">পাসওয়ার্ডে কমপক্ষে ৮ অক্ষর, একটি বড়হাতা ও একটি সংখ্যা থাকতে হবে।</p>  <input type="email" id="email-field" name="email" aria-required="true" aria-invalid="false">   <div role="alert" aria-live="polite" id="error-msg">  </div>

Accessible Error Message: Error

<div class="form-group"> <label for="user-email"> ইমেইল: <span aria-hidden="true">*</span> </label> <input type="email" id="user-email" name="email" required aria-required="true" aria-describedby="email-error email-hint">  <p id="email-hint">উদাহরণ: name@example.com</p>  <p id="email-error" role="alert" hidden> ⚠️ সঠিক ইমেইল ঠিকানা দিন (যেমন: name@example.com) </p> </div>

✅ Accessibility চেকলিস্ট:
☑ প্রতিটি input-এ <label> আছে
☑ required ফিল্ড * বা "(আবশ্যক)" দিয়ে চিহ্নিত
☑ Error message ইনপুটের কাছে ও পরিষ্কার ভাষায়
☑ Tab দিয়ে সব ফিল্ডে যাওয়া যায়
☑ শুধু রঙ দিয়ে error বোঝানো হয়নি (আইকন বা লেখাও আছে)
☑ aria-describedby দিয়ে hint ও error সংযুক্ত

🔷 Form Security — ফর্মের নিরাপত্তা

ফর্ম থেকে পাঠানো ডেটা সুরক্ষিত রাখতে HTML স্তরে কিছু সতর্কতা নেওয়া উচিত। তবে আসল নিরাপত্তা সার্ভার সাইডে নিশ্চিত করতে হবে।

autocomplete নিয়ন্ত্রণ: autocomplete

<form action="/login" method="POST" autocomplete="off">  <input type="text" name="name" autocomplete="name">  <input type="email" name="email" autocomplete="email">  <input type="password" name="password" autocomplete="new-password">  <input type="text" name="otp" autocomplete="off" inputmode="numeric"> </form>

Honeypot ফিল্ড — Bot ঠেকানো: Honeypot

<form action="/contact" method="POST"> <label for="h-name">নাম:</label> <input type="text" id="h-name" name="name" required> <label for="h-email">ইমেইল:</label> <input type="email" id="h-email" name="email" required>   <div style="display:none;" aria-hidden="true"> <label for="website">ওয়েবসাইট (এটা পূরণ করবেন না):</label> <input type="text" id="website" name="website" tabindex="-1" autocomplete="off"> </div> <button type="submit">পাঠান</button> </form>

⚠️ HTML সুরক্ষা যথেষ্ট নয়: HTML স্তরের সুরক্ষা ভেঙে যাওয়া সহজ। সর্বদা সার্ভার সাইডে Validation, SQL Injection Protection, CSRF Token এবং Rate Limiting ব্যবহার করো। পাসওয়ার্ড সার্ভারে bcrypt দিয়ে Hash করো — কখনো সরাসরি সংরক্ষণ করো না।

🔷 inputmode — মোবাইল কীবোর্ড নিয়ন্ত্রণ

inputmode Attribute মোবাইলে কোন কীবোর্ড আসবে তা নিয়ন্ত্রণ করে। এটি type থেকে আলাদা — শুধু কীবোর্ড বদলায়, Validation বদলায় না।

<input type="text" name="otp" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" placeholder="6 সংখ্যার OTP">  <input type="text" name="price" inputmode="decimal" placeholder="মূল্য">  <input type="text" name="card" inputmode="numeric" pattern="[0-9]{16}" maxlength="16" placeholder="1234 5678 9012 3456">  <input type="search" name="q" inputmode="search" placeholder="খুঁজুন">  <input type="text" name="phone" inputmode="tel" placeholder="01700000000">

inputmode	মোবাইলে কীবোর্ড	কখন ব্যবহার
`text`	সাধারণ কীবোর্ড	ডিফল্ট
`numeric`	শুধু 0–9	OTP, PIN, পোস্ট কোড
`decimal`	0–9 ও দশমিক বিন্দু	দাম, মাপ
`tel`	ফোন কীবোর্ড (*, #)	ফোন নম্বর
`email`	@ ও . সহজে পাওয়া যায়	ইমেইল
`url`	/ ও . সহজে পাওয়া যায়	ওয়েব ঠিকানা
`search`	Enter বোতাম "Search"	সার্চ বক্স
`none`	কোনো কীবোর্ড নেই	Custom কীবোর্ড

🏗️ Semantic Markup

এই সেকশনে Semantic HTML-এর সব বিষয় — Layout Tags, Highlighting, Quotation, Citation, Text-level Semantics, Time, Code, Navigation এবং Accessibility — কমেন্টসহ বিস্তারিত বোঝানো হয়েছে।

🔷 Semantic Markup কী?

Semantic Markup মানে এমন HTML লেখা যেখানে প্রতিটি ট্যাগ শুধু কনটেন্ট ধারণ করে না — তার অর্থ ও উদ্দেশ্যও বোঝায়। সঠিক Semantic ট্যাগ ব্যবহারে Google, Screen Reader ও অন্য Developer সবাই পেজটা সহজে বুঝতে পারে।

<div class="header">...</div> <div class="nav">...</div> <div class="main">...</div> <div class="footer">...</div>  <header>...</header> <nav>...</nav> <main>...</main> <footer>...</footer>

বিষয়	Non-Semantic	Semantic
Google বোঝে?	❌ না	✅ হ্যাঁ
Screen Reader?	❌ navigate করতে পারে না	✅ সহজে navigate করে
কোড পড়া?	কঠিন	✅ সহজ
SEO?	দুর্বল	✅ শক্তিশালী

🔷 Layout Tags — পেজের কাঠামো তৈরি

<header> — উপরের অংশ header

<header> <img src="logo.svg" alt="DevShikhi লোগো"> <h1>DevShikhi</h1> <nav>...</nav> </header>  <article> <header> <h2>HTML শেখার সেরা উপায়</h2> <p>লেখক: তানভীর | তারিখ: মে ২০২৬</p> </header> <p>আর্টিকেলের বিষয়বস্তু...</p> </article>

<nav> — নেভিগেশন nav

<nav aria-label="মূল মেনু"> <ul> <li><a href="/">হোম</a></li> <li><a href="/courses">কোর্স</a></li> <li><a href="/blog">ব্লগ</a></li> <li><a href="/contact">যোগাযোগ</a></li> </ul> </nav>  <nav aria-label="Breadcrumb"> <ol> <li><a href="/">হোম</a></li> <li><a href="/courses">কোর্স</a></li> <li aria-current="page">HTML</li> </ol> </nav>

<main> — মূল কনটেন্ট main

<main> <h1>HTML শেখার সম্পূর্ণ গাইড</h1> <p>এই পেজে HTML-এর সব বিষয় শিখতে পারবে।</p>  <section>...</section> <article>...</article> </main>

<section> — বিষয়ভিত্তিক অংশ section

<main>  <section> <h2>HTML কী?</h2> <p>HTML হলো ওয়েবপেজের কাঠামো তৈরির ভাষা।</p> </section> <section> <h2>কেন HTML শিখবো?</h2> <p>ওয়েব ডেভেলপমেন্টের ভিত্তি হলো HTML।</p> </section> </main>

<article> — স্বাধীন কনটেন্ট article

<article> <header> <h2>HTML শেখার ৫টি টিপস</h2> <time datetime="2026-05-18">১৮ মে, ২০২৬</time> </header> <p>আর্টিকেলের বিষয়বস্তু...</p> <footer> <p>লেখক: তানভীর হোসেন</p> </footer> </article>  <article> <h2>ব্লগ পোস্ট</h2> <p>পোস্টের বিষয়বস্তু...</p> <section> <h3>মন্তব্য</h3> <article> <p><strong>তাহমিনা:</strong> দারুণ পোস্ট!</p> </article> </section> </article>

<aside> — পাশের তথ্য aside

<main> <article> <h1>HTML Tutorial</h1> <p>মূল আর্টিকেল...</p> </article>  <aside> <h2>সম্পর্কিত আর্টিকেল</h2> <ul> <li><a href="#">CSS Tutorial</a></li> <li><a href="#">JavaScript Tutorial</a></li> </ul> <h2>দ্রুত টিপস</h2> <p>প্রতিদিন ৩০ মিনিট অনুশীলন করো।</p> </aside> </main>

<footer> — নিচের অংশ footer

<footer> <nav aria-label="Footer মেনু"> <ul> <li><a href="/about">আমাদের সম্পর্কে</a></li> <li><a href="/privacy">গোপনীয়তা নীতি</a></li> <li><a href="/contact">যোগাযোগ</a></li> </ul> </nav> <p><small>© ২০২৬ DevShikhi। সর্বস্বত্ব সংরক্ষিত।</small></p> </footer>

সম্পূর্ণ Semantic পেজের কাঠামো: পূর্ণ উদাহরণ

<body> <header>  <a href="/"><img src="logo.svg" alt="লোগো"></a> <nav aria-label="মূল মেনু"> <ul> <li><a href="/">হোম</a></li> <li><a href="/blog">ব্লগ</a></li> </ul> </nav> </header> <main>  <article>  <header> <h1>HTML শেখার গাইড</h1> <time datetime="2026-05-18">১৮ মে, ২০২৬</time> </header> <section>  <h2>প্রথম ধাপ</h2> <p>প্রথমে VSCode ইনস্টল করো।</p> </section> <section> <h2>দ্বিতীয় ধাপ</h2> <p>প্রথম HTML ফাইল তৈরি করো।</p> </section> </article> <aside>  <h2>সম্পর্কিত লিংক</h2> <ul> <li><a href="#">CSS Tutorial</a></li> </ul> </aside> </main> <footer>  <p>© ২০২৬ DevShikhi</p> </footer> </body>

🔷 Highlighting Changes — পরিবর্তন ও গুরুত্ব চিহ্নিত করা

<mark> — হাইলাইট করা (প্রাসঙ্গিক) mark

<p> তুমি সার্চ করেছিলে "HTML"। <mark>HTML</mark> হলো ওয়েবপেজের কাঠামো তৈরির ভাষা। <mark>HTML</mark>-এ ট্যাগ দিয়ে কনটেন্ট সাজানো হয়। </p>  <p>মনে রাখো: <mark>পরীক্ষায় h1 থেকে h6 পর্যন্ত আসতে পারে।</mark></p>

আউটপুট: তুমি সার্চ করেছিলে "HTML"। HTML হলো ওয়েবপেজের ভাষা।

<ins> ও <del> — সংযোজন ও বিয়োজন ins & del

<p> মূল্য: <del datetime="2026-04-01">১,০০০ টাকা</del> <ins datetime="2026-05-01">৮৫০ টাকা</ins> </p>  <p> বাংলাদেশ <del cite="/corrections">১৯৭২</del> <ins cite="/corrections">১৯৭১</ins> সালে স্বাধীন হয়। </p>  <p> <del><s>৫০০ টাকা</s></del> <ins>৩৯৯ টাকা</ins> <mark>২০% ছাড়!</mark> </p>

আউটপুট: মূল্য: ~~১,০০০ টাকা~~ ৮৫০ টাকা

<s> ও <u> — আর প্রযোজ্য নয় ও মনোযোগ আকর্ষণ s & u

<p><s>এই অফার ৩১ এপ্রিল পর্যন্ত</s> (অফার শেষ হয়েছে)</p>  <p>এই বাক্যে <u>banagladesch</u> বানান ভুল আছে।</p>

<strong> ও <em> — গুরুত্ব ও জোর strong & em

<p><strong>সতর্কতা:</strong> পাসওয়ার্ড কাউকে দেবেন না।</p>  <p>আমি <em>আজই</em> শিখতে শুরু করবো।</p>  <p><em>আমি</em> HTML শিখছি।</p>  <p>আমি <em>HTML</em> শিখছি।</p>   <p>এটি <strong>গুরুত্বপূর্ণ</strong> এবং এটি <strong><em>অত্যন্ত জরুরি</em></strong>।</p>

🔷 Quotation ও Citation — উদ্ধৃতি ও সূত্র

<blockquote> — বড় উদ্ধৃতি blockquote

<blockquote cite="https://example.com/source"> <p> যে নিজেকে শেখায় না, সে অন্যকে শেখাতে পারে না। শিক্ষার কোনো বিকল্প নেই। </p> <footer> — <cite>ড. মুহম্মদ শহীদুল্লাহ</cite> </footer> </blockquote>  <figure> <blockquote> <p>শিক্ষাই জাতির মেরুদণ্ড।</p> </blockquote> <figcaption> — বাংলাদেশের প্রবাদ, <cite>বাংলা লোকজ সাহিত্য</cite> </figcaption> </figure>

যে নিজেকে শেখায় না, সে অন্যকে শেখাতে পারে না।

— ড. মুহম্মদ শহীদুল্লাহ

<q> — ইনলাইন উদ্ধৃতি q

<p> স্টিভ জবস বলেছিলেন, <q cite="https://example.com">Stay hungry, stay foolish.</q> </p>    <p> সে বলল, <q>শিক্ষক বলেছেন <q>HTML শেখো</q>, তাই আমি শিখছি।</q> </p>

আউটপুট: স্টিভ জবস বলেছিলেন, Stay hungry, stay foolish.

<cite> — সৃজনশীল কাজের নাম cite

<p>আমি <cite>HTML ও ওয়েব ডিজাইন</cite> বইটি পড়ছি।</p>  <p> <cite>মনপুরা</cite> বাংলাদেশের একটি বিখ্যাত সিনেমা। </p>  <p> এই তথ্য <cite>বাংলাদেশ পরিসংখ্যান ব্যুরো, ২০২৬</cite> থেকে নেওয়া হয়েছে। </p>  <p>— <cite>রবীন্দ্রনাথ ঠাকুর</cite> (ভুল ব্যবহার)</p>  <p>— রবীন্দ্রনাথ ঠাকুর, <cite>গীতাঞ্জলি</cite></p>

আউটপুট: আমি HTML ও ওয়েব ডিজাইন বইটি পড়ছি।

<abbr> — সংক্ষেপণ abbr

<p>আমি <abbr title="HyperText Markup Language">HTML</abbr> শিখছি।</p> <p><abbr title="Cascading Style Sheets">CSS</abbr> দিয়ে ডিজাইন করা হয়।</p> <p><abbr title="বাংলাদেশ টেলিযোগাযোগ নিয়ন্ত্রণ কমিশন">বিটিআরসি</abbr> জানিয়েছে...</p>  <p> <abbr title="World Wide Web Consortium">W3C</abbr> হলো ওয়েবের মানদণ্ড নির্ধারণকারী সংস্থা। W3C প্রতিষ্ঠিত হয় ১৯৯৪ সালে। </p>

আউটপুট: আমি HTML শিখছি।

<dfn> — সংজ্ঞা dfn

<p> <dfn>HTML</dfn> হলো HyperText Markup Language — ওয়েবপেজের কাঠামো তৈরির ভাষা। </p>  <p> <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> হলো ওয়েবপেজের কাঠামো তৈরির ভাষা। </p>

🔷 Text-level Semantics — লেখায় অর্থ যোগ করা

<small> — ছোট মুদ্রণ small

<footer> <small>© ২০২৬ DevShikhi। সর্বস্বত্ব সংরক্ষিত।</small> </footer>  <p> এই পণ্যটি কিনুন। <small>* শর্ত প্রযোজ্য। ৩০ দিনের রিটার্ন পলিসি।</small> </p>

<sub> ও <sup> — নিচে ও উপরে sub & sup

<p>পানির সংকেত H<sub>2</sub>O | কার্বন ডাই অক্সাইড CO<sub>2</sub></p>  <p>পিথাগোরাস: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>  <p> এই তথ্যটি যাচাইযোগ্য<sup><a href="#fn1">[১]</a></sup>। </p> <p id="fn1"><small>[১] সূত্র: বিটিআরসি রিপোর্ট ২০২৬</small></p>

<span> — ইনলাইন কনটেইনার span

<p>আমার পছন্দের রঙ <span style="color:blue;">নীল</span>।</p>  <p>টোকেন: <span id="user-token" class="token">XYZ-2026</span></p>  <p>মূল্য: <span class="price">৫০০ টাকা</span></p>

<wbr> — সম্ভাব্য লাইন ভাঙার স্থান wbr

<p> লিংক: https://www.example.com/<wbr>very-long-path/<wbr>to-some-page </p>  <p>Anticonstitution<wbr>ellement (ফরাসি দীর্ঘ শব্দ)</p>

🔷 <time> — তারিখ ও সময় Semantic উপায়ে

<time> ট্যাগ তারিখ ও সময় Semantic উপায়ে লেখে। মানুষ যেকোনো ফরম্যাটে পড়তে পারে, কিন্তু কম্পিউটার datetime Attribute থেকে বোঝে।

<p>প্রকাশিত: <time datetime="2026-05-18">১৮ মে, ২০২৬</time></p>  <p>ইভেন্ট শুরু: <time datetime="2026-05-18T10:00">১৮ মে সকাল ১০টা</time></p>  <p>ক্লাস: <time datetime="14:30">বিকাল ২:৩০</time></p>  <p>পড়া লাগবে: <time datetime="PT2H30M">২ ঘণ্টা ৩০ মিনিট</time></p>  <p>প্রতিষ্ঠিত: <time datetime="2020-01">জানুয়ারি ২০২০</time></p>  <article> <header> <h2>HTML-এর ইতিহাস</h2> <p> প্রকাশিত: <time datetime="2026-05-18" class="pubdate"> ১৮ মে, ২০২৬ </time> | আপডেট: <time datetime="2026-05-20">২০ মে, ২০২৬</time> </p> </header> </article>

🔷 Code ও Pre — প্রযুক্তিগত কনটেন্ট

<code> — ইনলাইন কোড code

<p>HTML-এ <code><h1></code> দিয়ে শিরোনাম লেখা হয়।</p> <p>Python-এ <code>print("Hello")</code> দিয়ে আউটপুট দেওয়া যায়।</p>  <pre> <code> <html lang="bn"> <body> <h1>স্বাগতম!</h1> </body> </html> </code> </pre>

<kbd> — কীবোর্ডের বোতাম kbd

<p>সংরক্ষণ করতে <kbd>Ctrl</kbd> + <kbd>S</kbd> চাপো।</p> <p>Comment করতে <kbd>Ctrl</kbd> + <kbd>/</kbd> চাপো।</p> <p>Mac-এ <kbd>⌘ Cmd</kbd> + <kbd>C</kbd> দিয়ে Copy করো।</p>

আউটপুট: সংরক্ষণ করতে Ctrl + S চাপো।

<samp> — প্রোগ্রামের আউটপুট samp

<p>কমান্ড চালালে আউটপুট আসবে:</p> <samp> Hello, World! প্রোগ্রাম সম্পন্ন হয়েছে। Exit code: 0 </samp>  <p><kbd>python hello.py</kbd> লিখে Enter চাপলে:</p> <samp>Hello, World!</samp>

<var> — চলক (Variable) var

<p>বৃত্তের ক্ষেত্রফল = π × <var>r</var><sup>2</sup></p> <p>যেখানে <var>r</var> = ব্যাসার্ধ</p>  <p><var>x</var> = ১০ হলে, <var>y</var> = <var>x</var> × ২ = ২০</p>

🔷 Ruby Annotation — উচ্চারণ গাইড

<ruby> ট্যাগ লেখার উপরে বা নিচে ছোট উচ্চারণ গাইড দেখায়। জাপানি, চীনা বা যেকোনো ভাষায় উচ্চারণ দেখাতে ব্যবহার হয়।

<ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby>  <ruby> বাংলাদেশ <rp>(</rp><rt>Bangladesh</rt><rp>)</rp> </ruby>

🔷 <address> — যোগাযোগের তথ্য

<footer> <address> <p> <strong>DevShikhi</strong><br> বাড়ি ১২, রোড ৪, ধানমন্ডি<br> ঢাকা-১২০৯, বাংলাদেশ </p> <p> ইমেইল: <a href="mailto:hello@devshikhi.com">hello@devshikhi.com</a><br> ফোন: <a href="tel:+8801700000000">+৮৮০ ১৭০০-০০০০০০</a> </p> </address> </footer>  <article> <h1>HTML টিউটোরিয়াল</h1> <address> লেখক: <a href="/author/tanvir">তানভীর হোসেন</a> </address> </article>

🔷 section vs article vs div — কখন কোনটা?

এই তিনটি নিয়ে সবচেয়ে বেশি বিভ্রান্তি হয়। সহজ প্রশ্ন দিয়ে ঠিক করো:

<article> <h2>HTML শেখার ৫ টিপস</h2> <p>এই আর্টিকেলটি অন্য সাইটেও শেয়ার করা যায়।</p> </article>   <section> <h2>কেন HTML শিখবো?</h2> <p>এই অংশটি আলাদা অর্থপূর্ণ নয়।</p> </section>   <div class="flex-container"> <div class="card">...</div> <div class="card">...</div> </div>

প্রশ্ন	উত্তর হ্যাঁ হলে	উদাহরণ
একা অর্থপূর্ণ? RSS-এ পাঠানো যাবে?	`<article>`	ব্লগ পোস্ট, পণ্য কার্ড
বিষয়ভিত্তিক অংশ, heading আছে?	`<section>`	পেজের অধ্যায়, FAQ
শুধু CSS/JS-এর জন্য?	`<div>`	Flex/Grid container
লিংকের গ্রুপ?	`<nav>`	Menu, Breadcrumb
পেজ/section-এর উপরে?	`<header>`	Logo, Navigation
পেজ/section-এর নিচে?	`<footer>`	Copyright, Links
পেজের মূল কনটেন্ট?	`<main>`	যেটা Print করবে
সম্পর্কিত কিন্তু আলাদা?	`<aside>`	Sidebar, Tips

🔷 দ্রুত রেফারেন্স — সব Semantic ট্যাগ এক নজরে

বিভাগ	ট্যাগ	কাজ
Layout	`<header>`	পেজ বা section-এর উপরের অংশ
	`<nav>`	নেভিগেশন লিংক
	`<main>`	পেজের মূল কনটেন্ট (একটাই)
	`<section>`	বিষয়ভিত্তিক অংশ
	`<article>`	স্বাধীন কনটেন্ট
	`<aside>`	সম্পর্কিত পাশের তথ্য
	`<footer>`	পেজ বা section-এর নিচের অংশ
Highlighting	`<mark>`	হাইলাইট (প্রাসঙ্গিক)
	`<ins>`	নতুন যোগ করা লেখা
	`<del>`	মুছে ফেলা লেখা
	`<s>`	আর প্রযোজ্য নয়
Quotation	`<blockquote>`	বড় উদ্ধৃতি (Block)
	`<q>`	ছোট ইনলাইন উদ্ধৃতি
	`<cite>`	সৃজনশীল কাজের নাম
	`<abbr>`	সংক্ষেপণের পূর্ণরূপ
Code	`<code>`	ইনলাইন কোড
	`<pre>`	হুবহু ফরম্যাট
	`<kbd>`	কীবোর্ড বোতাম
	`<samp>`	প্রোগ্রামের আউটপুট
	`<var>`	গণিত/প্রোগ্রামের চলক
Text	`<strong>`	গুরুত্বপূর্ণ
	`<em>`	জোর দেওয়া
	`<small>`	পার্শ্ব তথ্য
	`<time>`	তারিখ ও সময়
Other	`<address>`	যোগাযোগের তথ্য
	`<dfn>`	সংজ্ঞা
	`<ruby>`	উচ্চারণ গাইড

🔍 Meta Tags এবং SEO

এই সেকশনে HTML Meta Tags, Open Graph, Twitter Cards, Canonical URL, Robots, Structured Data এবং SEO-র সব গুরুত্বপূর্ণ বিষয় কমেন্টসহ বিস্তারিত বোঝানো হয়েছে।

🔷 Meta Tag কী?

Meta Tag হলো HTML পেজের তথ্য বহনকারী ট্যাগ। পেজে দেখা যায় না — কিন্তু Browser, Search Engine ও Social Media এগুলো পড়ে। সব Meta Tag <head>-এর ভেতরে রাখতে হয়।

<meta name="description" content="পেজের বিবরণ এখানে">  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta charset="UTF-8">  <meta property="og:title" content="পেজের শিরোনাম">

🔷 অপরিহার্য Meta Tags — সবসময় দিতে হবে

charset — ক্যারেক্টার এনকোডিং charset

<meta charset="UTF-8">

viewport — মোবাইল ভিউ viewport

title — পেজের শিরোনাম title

<title>HTML শেখার সম্পূর্ণ গাইড | DevShikhi</title>  <title>DevShikhi — বাংলায় Web Development শিখুন</title>  <title>হোম পেজ</title>  <title>এই পেজে HTML, CSS, JavaScript, React, Node.js সব কিছু শিখতে পারবে সম্পূর্ণ বিনামূল্যে</title>

description — পেজের বিবরণ description

<meta name="description" content="বাংলায় HTML শেখার সম্পূর্ণ গাইড। ট্যাগ, ফর্ম, টেবিল, Semantic HTML সব বিষয়ে বিস্তারিত টিউটোরিয়াল। আজই শুরু করুন!">  <meta name="description" content="HTML টিউটোরিয়াল">  <meta name="description" content="HTML HTML HTML CSS CSS Web Development HTML শেখো CSS শেখো">

🔷 SEO-সংক্রান্ত Meta Tags

robots — Search Engine নির্দেশনা robots

<meta name="robots" content="index, follow">  <meta name="robots" content="noindex, nofollow">  <meta name="robots" content="index, nofollow">  <meta name="googlebot" content="noindex">

canonical — মূল পেজের ঠিকানা canonical

<link rel="canonical" href="https://devshikhi.com/html-tutorial">   <link rel="canonical" href="https://devshikhi.com/html-tutorial">    <link rel="canonical" href="https://www.example.com/">

hreflang — বহুভাষিক পেজ hreflang

<link rel="alternate" hreflang="bn" href="https://devshikhi.com/bn/html"> <link rel="alternate" hreflang="en" href="https://devshikhi.com/en/html"> <link rel="alternate" hreflang="x-default" href="https://devshikhi.com/en/html">  <link rel="alternate" hreflang="en-us" href="https://example.com/us/"> <link rel="alternate" hreflang="en-gb" href="https://example.com/uk/">

author ও keywords author

<meta name="author" content="তানভীর হোসেন">  <meta name="keywords" content="HTML, CSS, JavaScript, Web Development, বাংলা">  <meta name="theme-color" content="#7F77DD">  <meta name="color-scheme" content="light dark">

🔷 Open Graph — Facebook ও Social Media Preview

Open Graph Meta Tag দিলে Facebook, LinkedIn, WhatsApp-এ পেজ Share করলে সুন্দর Preview কার্ড দেখায় — শিরোনাম, ছবি ও বিবরণসহ।

Website-এর Open Graph: og:website

<meta property="og:type" content="website"> <meta property="og:url" content="https://devshikhi.com/html"> <meta property="og:title" content="HTML শেখার সম্পূর্ণ গাইড"> <meta property="og:description" content="বাংলায় HTML শেখার সম্পূর্ণ টিউটোরিয়াল। Heading, Form, Table সব বিষয়ে।"> <meta property="og:image" content="https://devshikhi.com/images/html-og.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="HTML Tutorial - DevShikhi"> <meta property="og:site_name" content="DevShikhi"> <meta property="og:locale" content="bn_BD">

Article-এর Open Graph: og:article

<meta property="og:type" content="article"> <meta property="og:url" content="https://devshikhi.com/blog/html-tips"> <meta property="og:title" content="HTML শেখার ৫টি সেরা টিপস"> <meta property="og:description" content="HTML শেখার সময় যে ৫টি টিপস জানলে অনেক সহজ হবে।"> <meta property="og:image" content="https://devshikhi.com/images/html-tips.jpg"> <meta property="article:published_time" content="2026-05-18T10:00:00+06:00"> <meta property="article:modified_time" content="2026-05-20T14:00:00+06:00"> <meta property="article:author" content="https://devshikhi.com/author/tanvir"> <meta property="article:section" content="HTML Tutorial"> <meta property="article:tag" content="HTML"> <meta property="article:tag" content="Web Development"> <meta property="article:tag" content="Tutorial">

✅ OG Image-এর নিয়ম:
আকার: কমপক্ষে 1200 × 630 pixel (1.91:1 অনুপাত)
ফাইল সাইজ: ৮ MB-এর কম
ফরম্যাট: JPG বা PNG (WebP সব জায়গায় সাপোর্ট হয় না)
পরীক্ষা করো: Facebook Sharing Debugger ব্যবহার করো

🔷 Twitter Cards — Twitter (X) Preview

Twitter Card Meta Tag দিলে Twitter (X)-এ পেজ Share করলে সুন্দর Preview কার্ড দেখায়।

<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@DevShikhi"> <meta name="twitter:creator" content="@tanvir_dev"> <meta name="twitter:title" content="HTML শেখার সম্পূর্ণ গাইড"> <meta name="twitter:description" content="বাংলায় HTML শেখার সম্পূর্ণ টিউটোরিয়াল।"> <meta name="twitter:image" content="https://devshikhi.com/images/html-og.jpg"> <meta name="twitter:image:alt" content="HTML Tutorial Cover">  <meta name="twitter:card" content="summary">

✅ টিপস: OG ও Twitter Card দুটোই দাও। Twitter OG-কে Fallback হিসেবে ব্যবহার করে — কিন্তু Twitter-নির্দিষ্ট tag দিলে আরও নিয়ন্ত্রণ পাবে।

🔷 সম্পূর্ণ <head> Section — সব Meta Tag একসাথে

<!DOCTYPE html> <html lang="bn"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>HTML শেখার সম্পূর্ণ গাইড | DevShikhi</title>  <meta name="description" content="বাংলায় HTML শেখার সম্পূর্ণ টিউটোরিয়াল। ট্যাগ, ফর্ম, টেবিল সব বিষয়ে বিস্তারিত গাইড।"> <meta name="keywords" content="HTML, বাংলা HTML, Web Development, DevShikhi"> <meta name="author" content="তানভীর হোসেন"> <meta name="robots" content="index, follow"> <meta name="theme-color" content="#7F77DD">  <link rel="canonical" href="https://devshikhi.com/html-tutorial">  <meta property="og:type" content="article"> <meta property="og:url" content="https://devshikhi.com/html-tutorial"> <meta property="og:title" content="HTML শেখার সম্পূর্ণ গাইড"> <meta property="og:description" content="বাংলায় HTML শেখার সম্পূর্ণ টিউটোরিয়াল।"> <meta property="og:image" content="https://devshikhi.com/images/html-og.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="DevShikhi"> <meta property="og:locale" content="bn_BD">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@DevShikhi"> <meta name="twitter:title" content="HTML শেখার সম্পূর্ণ গাইড"> <meta name="twitter:description" content="বাংলায় HTML শেখার সম্পূর্ণ টিউটোরিয়াল।"> <meta name="twitter:image" content="https://devshikhi.com/images/html-og.jpg">  <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" href="/favicon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">  <link rel="stylesheet" href="style.css"> </head>

🔷 Favicon — Browser-এর আইকন

<link rel="icon" type="image/svg+xml" href="/favicon.svg">  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">  <link rel="manifest" href="/site.webmanifest">  <link rel="shortcut icon" href="/favicon.ico">

🔷 Structured Data — JSON-LD (Rich Results)

Structured Data দিলে Google Search Result-এ Rich Results দেখায় — যেমন ★★★★☆ রেটিং, FAQ বা রেসিপির সময়। এটি Click-through Rate অনেক বাড়ায়।

Article Schema: Article

FAQPage Schema: FAQ

BreadcrumbList Schema: Breadcrumb

🔷 Preload, Prefetch ও DNS Prefetch — দ্রুত লোডিং

Resource Hints দিলে ব্রাউজার আগে থেকে রিসোর্স প্রস্তুত করে রাখে — পেজ লোডের সময় কম লাগে।

<link rel="preload" href="main-font.woff2" as="font" type="font/woff2" crossorigin>  <link rel="preload" href="hero.jpg" as="image">  <link rel="preload" href="critical.css" as="style">  <link rel="preload" href="app.js" as="script">  <link rel="prefetch" href="next-page.html"> <link rel="prefetch" href="next-page-image.jpg" as="image">   <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>   <link rel="dns-prefetch" href="https://cdn.example.com"> <link rel="dns-prefetch" href="https://analytics.example.com">

rel	কাজ	কখন ব্যবহার
`preload`	এখনই লোড করো	ফন্ট, হিরো ছবি, Critical CSS
`prefetch`	পরে দরকার হবে	পরের পেজের রিসোর্স
`preconnect`	সংযোগ আগেই স্থাপন	Google Fonts, CDN
`dns-prefetch`	DNS আগেই resolve	Third-party ডোমেইন

🔷 SEO Best Practices — সেরা অভ্যাস

On-Page SEO — HTML-এ যা করতে হবে: On-Page

<h1>HTML শেখার সম্পূর্ণ গাইড — বাংলায়</h1>  <h2>HTML ট্যাগ কী?</h2> <h2>কীভাবে HTML শিখবো?</h2>  <img src="html-tutorial.jpg" alt="HTML টিউটোরিয়াল — বাংলা গাইড">  <a href="/css-tutorial">CSS শেখার গাইড পড়ুন</a>  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" rel="noopener noreferrer">MDN Web Docs</a>  <main> <article> <h1>...</h1> <section><h2>...</h2></section> </article> </main>  <img src="photo.jpg" alt="ছবি" loading="lazy">

Technical SEO Checklist: Checklist

⚠️ এগুলো এড়িয়ে চলো:

একই পেজে একাধিক <h1>
ছবিতে alt না দেওয়া
Keyword Stuffing (একই keyword বারবার দেওয়া)
Duplicate Content (একই content একাধিক পেজে)
noindex দেওয়া গুরুত্বপূর্ণ পেজে
Canonical URL না দেওয়া
mobile-friendly না হওয়া

✅ SEO Checklist — প্রতিটি পেজে:

Unique <title> (৫০-৬০ অক্ষর)
Unique meta description (১৫০-১৬০ অক্ষর)
একটিই <h1> — মূল keyword সহ
সব ছবিতে অর্থপূর্ণ alt
canonical URL
Open Graph ও Twitter Card
Structured Data (Article/FAQ/Breadcrumb)
Mobile-friendly viewport
HTTPS ব্যবহার
Fast loading (preload, lazy loading)

🔷 দ্রুত রেফারেন্স — সব Meta Tag এক নজরে

Meta Tag	কাজ	দরকার?
`<meta charset="UTF-8">`	ক্যারেক্টার এনকোডিং	✅ অবশ্যই
`<meta name="viewport"...>`	মোবাইল ভিউ	✅ অবশ্যই
`<title>`	পেজের শিরোনাম	✅ অবশ্যই
`name="description"`	Search Result-এর বিবরণ	✅ অবশ্যই
`name="robots"`	Crawling নির্দেশনা	দরকারে
`rel="canonical"`	মূল পেজের URL	✅ সবসময়
`name="author"`	লেখকের নাম	ভালো অভ্যাস
`name="theme-color"`	Browser bar-এর রঙ	ঐচ্ছিক
`property="og:*"`	Facebook/LinkedIn Preview	✅ সবসময়
`name="twitter:*"`	Twitter Preview	✅ সবসময়
`rel="icon"`	Favicon	✅ সবসময়
`rel="preload"`	আগে থেকে লোড	Performance-এ
`rel="preconnect"`	আগেই সংযোগ	Third-party-তে
`rel="hreflang"`	বহুভাষিক পেজ	একাধিক ভাষায়
`script[ld+json]`	Structured Data	Rich Results-এর জন্য

🚀 HTML Expert Essentials — দক্ষ ডেভেলপার হওয়ার পূর্ণ গাইড

CSS, JavaScript, Icons, Fonts, File Path, Responsive, Graphics, APIs সহ HTML Expert হতে যা যা জানতে হবে — সব কিছু কমেন্টসহ এক সেকশনে।

🔷 CSS যুক্ত করা — ৩টি উপায়

উপায় ১ — Inline CSS: কম ভালো

<h1 style="color: blue; font-size: 32px;">নীল শিরোনাম</h1> <p style="background: yellow; padding: 10px;">হলুদ বাক্সের লেখা</p>

উপায় ২ — Internal CSS: একটি পেজের জন্য

<head> <style> /* শুধু এই পেজের জন্য CSS */ h1 { color: blue; font-size: 32px; } p { line-height: 1.6; } </style> </head>

উপায় ৩ — External CSS: সঠিক পদ্ধতি ✅

<head>  <link rel="stylesheet" href="style.css">  <link rel="stylesheet" href="print.css" media="print">  <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">  <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">  <style> /* উপরের অংশের জন্য জরুরি CSS এখানে */ body { margin: 0; font-family: sans-serif; } </style> <link rel="stylesheet" href="rest.css"> </head>

পদ্ধতি	কোথায়	সুবিধা	কখন ব্যবহার
Inline	style Attribute-এ	দ্রুত	Email, JS dynamic
Internal	<style> ট্যাগে	একটি পেজ	Landing page
External ✅	আলাদা .css ফাইল	Cache, পুনর্ব্যবহার	সব প্রজেক্টে

🔷 JavaScript যুক্ত করা — defer, async ও module

defer vs async — পার্থক্য: Loading

<head>  <script src="app.js"></script>   <script src="app.js" defer></script>   <script src="analytics.js" async></script>  <script type="module" src="main.js"></script>  <script type="module"> import { greet } from './utils.js'; greet('তানভীর'); </script> </head>  <script type="text/javascript"> console.log("পুরনো পদ্ধতি"); </script>  <script> console.log("আধুনিক পদ্ধতি"); </script>

noscript — JS বন্ধ থাকলে: noscript

Attribute	কখন লোড	কখন চলে	ক্রম
(কোনো Attribute নেই)	HTML parse থামিয়ে	সাথে সাথে	✅ ঠিক আছে
`defer`	HTML parse চলার সময়	HTML parse শেষে	✅ ঠিক আছে
`async`	HTML parse চলার সময়	ডাউনলোড শেষে	❌ নিশ্চিত নয়
`type="module"`	HTML parse চলার সময়	HTML parse শেষে	✅ ঠিক আছে

🔷 Icons — Favicon ও Icon Library

Favicon — ব্রাউজার ট্যাবের আইকন: Favicon

Icon Library — Font Awesome ও অন্যান্য: Icon Library

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> </head>  <i class="fa-solid fa-house"></i>  <i class="fa-solid fa-user"></i>  <i class="fa-brands fa-github"></i>  <i class="fa-solid fa-magnifying-glass"></i>   <i class="fa-solid fa-heart" aria-hidden="true"></i> <span class="sr-only">পছন্দের তালিকায় যোগ করো</span>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <span class="material-icons">search</span> <span class="material-icons">home</span>  <button aria-label="সার্চ করো"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <circle cx="11" cy="11" r="8"/> <path d="m21 21-4.35-4.35"/> </svg> </button>

🔷 Fonts — ওয়েবে ফন্ট যুক্ত করা

Google Fonts — বিনামূল্যে ওয়েব ফন্ট: Google Fonts

<head>   <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> </head>  <style> body { font-family: 'Hind Siliguri', 'Roboto', sans-serif; } h1 { font-family: 'Roboto', sans-serif; font-weight: 700; } </style>

@font-face — নিজের ফন্ট ফাইল: @font-face

System Font Stack — সবচেয়ে দ্রুত: System Fonts

🔷 Page Title ও <head> Management

সঠিক ক্রমে head সাজানো: head Order

<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>HTML Expert Guide | DevShikhi</title>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  <link rel="preload" href="style.css" as="style"> <link rel="preload" href="hero.webp" as="image">  <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">  <meta name="description" content="HTML শেখার সম্পূর্ণ গাইড।"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://devshikhi.com/html">  <meta property="og:title" content="HTML Expert Guide"> <meta property="og:image" content="https://devshikhi.com/og.jpg">  <link rel="stylesheet" href="style.css">  <script src="app.js" defer></script> </head>

🔷 HTML Buttons — বোতামের সব ধরন ও সঠিক ব্যবহার

button ট্যাগ — সঠিক পদ্ধতি: button

<button type="submit">জমা দিন</button>  <button type="reset">মুছুন</button>  <button type="button" onclick="doSomething()">ক্লিক করো</button>  <button type="button"> <svg aria-hidden="true">...</svg> ডাউনলোড করো </button>  <button type="button" aria-label="পেজ শেয়ার করো"> <svg aria-hidden="true">...</svg> </button>  <button type="submit" disabled aria-busy="true"> জমা হচ্ছে... </button>  <button type="button" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed')==='false'?'true':'false')"> 🔔 বিজ্ঞপ্তি </button>

a vs button — কখন কোনটা: a vs button

<a href="/courses">কোর্স দেখুন</a> <a href="https://google.com">গুগলে যান</a>  <button type="button">Modal খুলুন</button> <button type="button">Dark Mode চালু</button> <button type="submit">ফর্ম জমা দিন</button>  <button onclick="window.location.href='/courses'">কোর্স</button>  <a href="#" onclick="openModal()">Modal খুলুন</a>

🔷 File Paths — ফাইলের ঠিকানার ধরন

Relative Path — বর্তমান ফোল্ডার থেকে: Relative

<link href="css/style.css" rel="stylesheet">  <img src="images/logo.png" alt="লোগো">  <a href="about.html">আমাদের সম্পর্কে</a>  <a href="pages/contact.html">যোগাযোগ</a>   <link href="../css/style.css" rel="stylesheet">  <img src="../images/logo.png" alt="লোগো">  <a href="../index.html">হোম</a>

Root-relative Path — / দিয়ে শুরু: Root-relative

<link href="/css/style.css" rel="stylesheet"> <img src="/images/logo.png" alt="লোগো"> <a href="/about">আমাদের সম্পর্কে</a>

Absolute Path — পুরো URL: Absolute

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet"> <img src="https://example.com/images/photo.jpg" alt="ছবি"> <a href="https://google.com">গুগল</a>

ধরন	উদাহরণ	কখন ব্যবহার
Relative	`css/style.css`	একই প্রজেক্টের ফাইল
উপরে যাওয়া	`../images/logo.png`	সাবফোল্ডার থেকে উপরে
Root-relative	`/css/style.css`	সব পেজে একই path
Absolute	`https://example.com/style.css`	External resource

🔷 Responsive HTML — সব ডিভাইসে সুন্দর পেজ

picture — Device অনুযায়ী আলাদা ছবি: picture

<picture>  <source media="(max-width: 480px)" srcset="hero-mobile.webp" type="image/webp"> <source media="(max-width: 480px)" srcset="hero-mobile.jpg">  <source media="(max-width: 768px)" srcset="hero-tablet.webp" type="image/webp"> <source media="(max-width: 768px)" srcset="hero-tablet.jpg">  <source srcset="hero-desktop.webp" type="image/webp">  <img src="hero-desktop.jpg" alt="Hero ব্যানার" width="1200" height="600" loading="eager" fetchpriority="high"> </picture>

srcset ও sizes — সঠিক রেজোলিউশনের ছবি: srcset

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w, photo-1600.jpg 1600w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 800px" alt="Responsive ছবি" loading="lazy">  <img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x" alt="লোগো" width="200">

🔷 HTML Graphics — Canvas ও SVG

<canvas> — JavaScript দিয়ে আঁকা: canvas

<canvas id="myCanvas" width="400" height="200" aria-label="একটি নীল আয়তক্ষেত্র">  তোমার ব্রাউজার Canvas সাপোর্ট করে না। </canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); /* আয়তক্ষেত্র আঁকো */ ctx.fillStyle = '#7F77DD'; ctx.fillRect(50, 50, 200, 100); /* লেখা লেখো */ ctx.fillStyle = 'white'; ctx.font = '20px Arial'; ctx.fillText('DevShikhi', 110, 110); /* বৃত্ত আঁকো */ ctx.beginPath(); ctx.arc(350, 100, 40, 0, Math.PI * 2); ctx.fillStyle = '#22c55e'; ctx.fill(); </script>

<svg> — Vector গ্রাফিক্স: svg

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="0 0 200 150" role="img" aria-label="DevShikhi লোগো">  <rect x="10" y="10" width="180" height="130" rx="10" ry="10" fill="#7F77DD" stroke="#5b52b3" stroke-width="2"/>  <text x="100" y="85" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="24" font-weight="bold"> DevShikhi </text> </svg>  <img src="logo.svg" alt="DevShikhi লোগো" width="200">  <style> .my-icon { fill: currentColor; } /* Parent-এর রঙ নেবে */ .my-icon:hover { fill: #7F77DD; } </style>

বিষয়	Canvas	SVG
ধরন	Raster (pixel)	Vector (গণনা)
বড় করলে?	ঝাপসা হয়	পরিষ্কার থাকে ✅
CSS/JS নিয়ন্ত্রণ	শুধু JS	CSS ও JS দুটোই ✅
Performance	জটিল দৃশ্যে ভালো	সহজ গ্রাফিক্সে ভালো ✅
কোথায় ব্যবহার	গেম, Image Processing	আইকন, লোগো, চার্ট ✅

🔷 HTML APIs — ব্রাউজারের Built-in শক্তি

Geolocation API — অবস্থান জানা: Location

<button type="button" onclick="getLocation()">আমার অবস্থান জানাও</button> <p id="location-result"></p> <script> function getLocation() { if (!navigator.geolocation) { document.getElementById('location-result').textContent = 'তোমার ব্রাউজার Geolocation সাপোর্ট করে না।'; return; } navigator.geolocation.getCurrentPosition( /* সফল হলে */ (position) => { const lat = position.coords.latitude; const lon = position.coords.longitude; document.getElementById('location-result').textContent = `অক্ষাংশ: ${lat.toFixed(4)}, দ্রাঘিমাংশ: ${lon.toFixed(4)}`; }, /* ব্যর্থ হলে */ (error) => { document.getElementById('location-result').textContent = 'অবস্থান জানা যায়নি।'; } ); } </script>

Web Storage API — Browser-এ ডেটা রাখা: Storage

Drag and Drop API — টেনে নিয়ে যাওয়া: Drag & Drop

<div id="drag-item" draggable="true" ondragstart="drag(event)" style="cursor:grab;"> 📦 আমাকে টেনে নাও </div>  <div id="drop-zone" ondragover="allowDrop(event)" ondrop="drop(event)"> এখানে ফেলো </div> <script> function drag(event) { event.dataTransfer.setData('text/plain', event.target.id); } function allowDrop(event) { event.preventDefault(); /* ডিফল্ট বন্ধ না করলে drop কাজ করে না */ } function drop(event) { event.preventDefault(); const id = event.dataTransfer.getData('text/plain'); event.target.appendChild(document.getElementById(id)); } </script>

History API — URL নিয়ন্ত্রণ: History

Clipboard API — Copy ও Paste: Clipboard

<button type="button" onclick="copyText()">কোড কপি করো</button> <span id="copy-status"></span> <script> async function copyText() { try { await navigator.clipboard.writeText('npm install devshikhi'); document.getElementById('copy-status').textContent = '✅ কপি হয়েছে!'; } catch (err) { document.getElementById('copy-status').textContent = '❌ কপি হয়নি।'; } } /* Paste পড়া */ async function pasteText() { const text = await navigator.clipboard.readText(); console.log('Pasted:', text); } </script>

🔷 HTML Performance — পেজ দ্রুত লোড করা

🔷 <template> ও Web Components — পুনর্ব্যবহারযোগ্য কনটেন্ট

<template> — লুকানো কনটেন্ট টেমপ্লেট: template

<template id="product-card"> <div class="card"> <img class="card-image" src="" alt=""> <h3 class="card-title"></h3> <p class="card-price"></p> <button type="button">কার্টে যোগ করো</button> </div> </template>  <div id="products"></div> <script> const products = [ { title: 'HTML বই', price: '৩০০ টাকা', image: 'book1.jpg' }, { title: 'CSS বই', price: '৩৫০ টাকা', image: 'book2.jpg' }, ]; const template = document.getElementById('product-card'); const container = document.getElementById('products'); products.forEach(product => { /* Template ক্লোন করো */ const clone = template.content.cloneNode(true); /* ডেটা বসাও */ clone.querySelector('.card-image').src = product.image; clone.querySelector('.card-image').alt = product.title; clone.querySelector('.card-title').textContent = product.title; clone.querySelector('.card-price').textContent = product.price; /* পেজে যোগ করো */ container.appendChild(clone); }); </script>

Custom Elements — নিজের HTML ট্যাগ তৈরি: Custom Elements

<user-card name="তানভীর" role="Developer"></user-card> <user-card name="তাহমিনা" role="Designer"></user-card> <script> class UserCard extends HTMLElement { connectedCallback() { const name = this.getAttribute('name'); const role = this.getAttribute('role'); this.innerHTML = ` <div style="border:1px solid #ccc; padding:16px; border-radius:8px;"> <h3>${name}</h3> <p>${role}</p> </div> `; } } /* নিজের ট্যাগ রেজিস্ট্রেশন — নাম-এ হাইফেন থাকতে হবে */ customElements.define('user-card', UserCard); </script>

🔷 HTML Best Practices — Expert-এর অভ্যাস

1. DOCTYPE ও lang সবসময়: ভিত্তি

<!DOCTYPE html> <html lang="bn">

2. Void Element-এ / না দেওয়া: HTML5

<br> <img src="photo.jpg" alt="ছবি"> <input type="text">  <br /> <img src="photo.jpg" alt="ছবি" />

3. Boolean Attribute-এ value না দেওয়া: Clean

<input type="checkbox" checked> <input type="text" required> <button disabled>...</button>  <input type="checkbox" checked="checked"> <input type="text" required="required">

4. Validate করো: Quality

5. পেজের সম্পূর্ণ কাঠামো — Expert পদ্ধতি: পূর্ণ উদাহরণ

<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>পেজের শিরোনাম | সাইটের নাম</title> <meta name="description" content="১৫০ অক্ষরের মধ্যে পেজের বিবরণ।">  <link rel="icon" href="/favicon.svg" type="image/svg+xml">  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preload" href="/css/style.css" as="style">  <link rel="stylesheet" href="/css/style.css">  <meta property="og:title" content="পেজের শিরোনাম"> <meta property="og:description" content="পেজের বিবরণ"> <meta property="og:image" content="https://example.com/og.jpg">  <script src="/js/app.js" defer></script> </head> <body> <a href="#main" class="skip-link">মূল কনটেন্টে যাও</a> <header> <nav aria-label="মূল মেনু">...</nav> </header> <main id="main"> <h1>পেজের মূল শিরোনাম</h1> ... </main> <footer> <small>© ২০২৬ DevShikhi</small> </footer> </body> </html>

🔷 দ্রুত রেফারেন্স — Expert HTML Checklist

বিভাগ	করণীয়	কেন?
ভিত্তি	`<!DOCTYPE html>` ও `lang`	Browser mode ও Accessibility
	charset ও viewport	ভাষা ও Mobile সাপোর্ট
	Semantic HTML ট্যাগ	SEO ও Accessibility
Performance	CSS `defer` / JS `defer`	দ্রুত পেজ লোড
	`preconnect`, `preload`	Resource আগে আনো
	`loading="lazy"`	দরকারি ছবি আগে লোড
SEO	Title ৫০-৬০ অক্ষর	Search Result-এ দেখায়
	Description ১৫০-১৬০ অক্ষর	Search Snippet
	Open Graph Tags	Social Share Preview
Accessibility	সব ছবিতে `alt`	Screen Reader
	প্রতিটি input-এ `label`	Form Accessibility
	Skip Link ও Focus Visible	Keyboard Navigation
Security	ফর্মে `POST` + HTTPS	ডেটা সুরক্ষা
Security	iframe-এ `sandbox`	XSS প্রতিরোধ
Validation	W3C Validator দিয়ে চেক	HTML Error মুক্ত

🧰 Developer Toolkit — ওয়েব ডেভেলপারের হাতিয়ার

HTML Events, URL Encoding, Language Codes, HTTP Messages, HTTP Methods, VSCode Shortcuts এবং Emojis — প্রতিদিনের কাজে লাগে এমন সব জরুরি রেফারেন্স এক জায়গায়।

🔷 HTML Events — ব্রাউজারের ঘটনা

HTML Event হলো ব্রাউজারে যা ঘটে তার বিজ্ঞপ্তি। JavaScript দিয়ে এই ঘটনাগুলো ধরে কাজ করা যায়।

Event যুক্ত করার উপায়: Event Binding

<button onclick="sayHello()">ক্লিক করো</button> <input type="text" onkeyup="checkInput(this)">  <button id="my-btn">ক্লিক করো</button> <script> const btn = document.getElementById('my-btn'); btn.addEventListener('click', function(event) { console.log('ক্লিক হয়েছে!', event); }); /* arrow function দিয়ে */ btn.addEventListener('click', (e) => { e.preventDefault(); /* ডিফল্ট কাজ বন্ধ */ e.stopPropagation(); /* Event উপরে যাওয়া বন্ধ */ console.log('ক্লিক!'); }); /* Event সরিয়ে দেওয়া */ btn.removeEventListener('click', handlerFunction); </script>

Mouse Events — মাউসের ঘটনা: Mouse

<div onclick="..."  ondblclick="..."  onmousedown="..."  onmouseup="..."  onmouseover="..."  onmouseout="..."  onmouseenter="..."  onmouseleave="..."  onmousemove="..."  oncontextmenu="..."  ></div>

Keyboard Events — কীবোর্ডের ঘটনা: Keyboard

<input onkeydown="..."  onkeyup="..."  onkeypress="..."  > <script> document.addEventListener('keydown', (e) => { console.log('Key:', e.key); /* 'a', 'Enter', 'ArrowUp' */ console.log('Code:', e.code); /* 'KeyA', 'Enter', 'ArrowUp' */ console.log('Ctrl:', e.ctrlKey); /* true/false */ console.log('Shift:', e.shiftKey); /* true/false */ /* Ctrl + S */ if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveFile(); } }); </script>

Form Events — ফর্মের ঘটনা: Form

<form onsubmit="..."  onreset="..."  > <input oninput="..."  onchange="..."  onfocus="..."  onblur="..."  oninvalid="..."  > <select onchange="..."></select>  </form>

Window ও Document Events: Window

অন্যান্য গুরুত্বপূর্ণ Events: Other

Event	কখন ঘটে	Element
`click`	ক্লিক করলে	যেকোনো
`input`	টাইপ করার সাথে সাথে	input, textarea
`change`	মান পরিবর্তন হলে	input, select
`submit`	ফর্ম জমা দিলে	form
`focus` / `blur`	focus এলে / চলে গেলে	input, button
`DOMContentLoaded`	DOM প্রস্তুত হলে	document
`load`	সব resource লোড হলে	window, img
`scroll`	স্ক্রোল করলে	window, element
`resize`	উইন্ডো সাইজ বদলালে	window
`touchstart`	মোবাইলে স্পর্শ করলে	যেকোনো
`touchend`	মোবাইলে স্পর্শ ছাড়লে	যেকোনো
`dragstart`	টেনে নেওয়া শুরু হলে	draggable
`drop`	ছেড়ে দিলে	drop zone
`error`	লোড ব্যর্থ হলে	img, script
`copy` / `paste`	কপি / পেস্ট করলে	যেকোনো

🔷 URL Encoding — URL-এ বিশেষ অক্ষর

URL-এ বাংলা, স্পেস বা বিশেষ অক্ষর দিতে হলে URL Encoding ব্যবহার করতে হয় — % দিয়ে ASCII কোডে রূপান্তর।

সাধারণ URL Encoding: Encoded Chars

<a href="/search?q=HTML শেখার উপায়">সার্চ</a>  <a href="/search?q=HTML%20%E0%A6%B6%E0%A7%87%E0%A6%96%E0%A6%BE%E0%A6%B0%20%E0%A6%89%E0%A6%AA%E0%A6%BE%E0%A6%AF%E0%A6%BC">সার্চ</a>  <script> const query = 'HTML শেখার উপায়'; const encoded = encodeURIComponent(query); console.log(encoded); /* HTML%20%E0%A6%B6%E0%A7%87%E0%A6%96... */ /* URL তৈরি */ const url = `/search?q=${encodeURIComponent('HTML শেখার উপায়')}`; /* Decode করা */ const decoded = decodeURIComponent(encoded); console.log(decoded); /* HTML শেখার উপায় */ </script>

গুরুত্বপূর্ণ URL Encoded অক্ষর:

অক্ষর	Encoded	অক্ষর	Encoded
স্পেস ( )	`%20` বা `+`	`!`	`%21`
`#`	`%23`	`"`	`%22`
`%`	`%25`	`'`	`%27`
`&`	`%26`	`(`	`%28`
`+`	`%2B`	`)`	`%29`
`/`	`%2F`	`:`	`%3A`
`=`	`%3D`	`?`	`%3F`
`@`	`%40`	`[`	`%5B`
`\`	`%5C`	`]`	`%5D`
`{`	`%7B`	`}`	`%7D`

✅ encodeURIComponent vs encodeURI:
encodeURIComponent() = Query parameter-এর value encode করতে (/, ?, & বদলায়)
encodeURI() = পুরো URL encode করতে (/, ?, & বদলায় না)

🔷 Language Codes — HTML-এ ভাষার কোড

lang Attribute-এ সঠিক Language Code দিলে Screen Reader সঠিক উচ্চারণে পড়ে এবং Google সঠিক দেশের ব্যবহারকারীকে পেজ দেখায়।

<html lang="bn">  <html lang="bn-BD">  <p lang="en">This part is in English.</p> <p lang="ar" dir="rtl">هذا النص باللغة العربية</p> <p lang="hi">यह हिंदी में है।</p>

🔷 HTTP Methods — সার্ভারে অনুরোধের ধরন

HTTP Method ব্রাউজার বা App-কে বলে সার্ভারে কোন ধরনের কাজ করতে হবে। HTML ফর্মে GET ও POST সরাসরি ব্যবহার করা যায়।

<form method="GET" action="/search"> <input type="text" name="q"> <button type="submit">খুঁজুন</button> </form> <form method="POST" action="/register"> <input type="email" name="email"> <button type="submit">রেজিস্ট্রেশন</button> </form>  <script> /* GET — ডেটা আনো */ fetch('/api/users') .then(res => res.json()) .then(data => console.log(data)); /* POST — নতুন ডেটা তৈরি */ fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'তানভীর', email: 'tanvir@example.com' }) }); /* PUT — সম্পূর্ণ আপডেট */ fetch('/api/users/1', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'তানভীর হোসেন' }) }); /* PATCH — আংশিক আপডেট */ fetch('/api/users/1', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'তানভীর হোসেন' }) }); /* DELETE — মুছে দাও */ fetch('/api/users/1', { method: 'DELETE' }); </script>

Method	কাজ	CRUD	Body আছে?	Safe?
`GET`	ডেটা আনো	Read	❌	✅ হ্যাঁ
`POST`	নতুন তৈরি করো	Create	✅	❌ না
`PUT`	সম্পূর্ণ আপডেট	Update	✅	❌ না
`PATCH`	আংশিক আপডেট	Update	✅	❌ না
`DELETE`	মুছে দাও	Delete	ঐচ্ছিক	❌ না
`HEAD`	শুধু Header	—	❌	✅ হ্যাঁ
`OPTIONS`	সাপোর্টেড Method	—	❌	✅ হ্যাঁ

🔷 HTTP Status Codes — সার্ভারের জবাব

HTTP Status Code হলো সার্ভারের Request-এর জবাব। ব্রাউজারের DevTools-এ Network ট্যাবে এগুলো দেখা যায়।

2xx — সফল Response: Success ✅

কোড	নাম	মানে	কোথায় দেখা যায়
200	OK	Request সফল হয়েছে	পেজ লোড, GET সফল
201	Created	নতুন resource তৈরি হয়েছে	POST সফল (নতুন user)
204	No Content	সফল কিন্তু কোনো body নেই	DELETE সফল

3xx — Redirection: Redirect ↗

কোড	নাম	মানে	কোথায় দেখা যায়
301	Moved Permanently	স্থায়ীভাবে নতুন URL-এ গেছে	http → https redirect
302	Found (Temp Redirect)	সাময়িকভাবে নতুন URL-এ	লগইনের পর redirect
304	Not Modified	Cache-এ আছে, নতুন করে দরকার নেই	Browser Cache

4xx — Client Error: Client Error ❌

কোড	নাম	মানে	কোথায় দেখা যায়
400	Bad Request	Request ভুল ফরম্যাটে	ভুল ডেটা পাঠালে
401	Unauthorized	লগইন করা হয়নি	Token ছাড়া API
403	Forbidden	অনুমতি নেই	Admin পেজে সাধারণ User
404	Not Found	পেজ বা resource নেই	ভুল URL-এ গেলে
405	Method Not Allowed	এই Method সাপোর্ট করে না	GET-only endpoint-এ POST
422	Unprocessable Entity	Validation ব্যর্থ হয়েছে	ফর্ম ভ্যালিডেশন Error
429	Too Many Requests	অনেক বেশি Request	Rate Limit অতিক্রম

5xx — Server Error: Server Error 🔥

কোড	নাম	মানে	কোথায় দেখা যায়
500	Internal Server Error	সার্ভারে অজানা সমস্যা	Bug বা Crash
502	Bad Gateway	Proxy বা Gateway সমস্যা	Nginx/Load Balancer সমস্যা
503	Service Unavailable	সার্ভার বন্ধ বা ব্যস্ত	Maintenance, Overload
504	Gateway Timeout	সার্ভার সময়মতো জবাব দেয়নি	ধীর Database বা API

🔷 VSCode Keyboard Shortcuts — দ্রুত কোড লেখার শর্টকাট

VSCode-এর Keyboard Shortcut জানলে মাউসে হাত না দিয়েই দ্রুত কোড লেখা যায়। Windows/Linux: Ctrl | Mac: ⌘ Cmd

সাধারণ কাজ: General

কাজ	Windows / Linux	Mac
ফাইল সংরক্ষণ	`Ctrl` + `S`	`⌘` + `S`
সব সংরক্ষণ	`Ctrl` + `K` `S`	`⌘` + `Alt` + `S`
Undo	`Ctrl` + `Z`	`⌘` + `Z`
Redo	`Ctrl` + `Shift` + `Z`	`⌘` + `Shift` + `Z`
কমান্ড প্যালেট	`Ctrl` + `Shift` + `P`	`⌘` + `Shift` + `P`
ফাইল খোঁজা	`Ctrl` + `P`	`⌘` + `P`
নতুন ফাইল	`Ctrl` + `N`	`⌘` + `N`
Terminal খোলা	`Ctrl` + `	`⌘` + `
Settings খোলা	`Ctrl` + `,`	`⌘` + `,`

কোড এডিটিং: Editing

কাজ	Windows / Linux	Mac
লাইন Comment করা/সরানো	`Ctrl` + `/`	`⌘` + `/`
Block Comment	`Shift` + `Alt` + `A`	`Shift` + `⌥` + `A`
লাইন উপরে নেওয়া	`Alt` + `↑`	`⌥` + `↑`
লাইন নিচে নেওয়া	`Alt` + `↓`	`⌥` + `↓`
লাইন কপি করে নিচে বসানো	`Shift` + `Alt` + `↓`	`Shift` + `⌥` + `↓`
লাইন মুছে দাও	`Ctrl` + `Shift` + `K`	`⌘` + `Shift` + `K`
কোড Format করো	`Shift` + `Alt` + `F`	`Shift` + `⌥` + `F`
ইন্ডেন্ট বাড়াও	`Tab`	`Tab`
ইন্ডেন্ট কমাও	`Shift` + `Tab`	`Shift` + `Tab`
একাধিক cursor	`Alt` + ক্লিক	`⌥` + ক্লিক
পরবর্তী মিল নির্বাচন	`Ctrl` + `D`	`⌘` + `D`
সব মিল নির্বাচন	`Ctrl` + `Shift` + `L`	`⌘` + `Shift` + `L`

নেভিগেশন: Navigation

কাজ	Windows / Linux	Mac
নির্দিষ্ট লাইনে যাও	`Ctrl` + `G`	`⌘` + `G`
খোঁজো (Find)	`Ctrl` + `F`	`⌘` + `F`
খুঁজে বদলাও (Replace)	`Ctrl` + `H`	`⌘` + `H`
সব ফাইলে খোঁজো	`Ctrl` + `Shift` + `F`	`⌘` + `Shift` + `F`
সাইডবার লুকাও/দেখাও	`Ctrl` + `B`	`⌘` + `B`
Zen Mode (পূর্ণ স্ক্রিন)	`Ctrl` + `K` `Z`	`⌘` + `K` `Z`
ট্যাব বন্ধ করো	`Ctrl` + `W`	`⌘` + `W`
পরের ট্যাবে যাও	`Ctrl` + `Tab`	`⌘` + `Shift` + `]`
Split Editor	`Ctrl` + `\`	`⌘` + `\`

✅ সবচেয়ে গুরুত্বপূর্ণ শর্টকাট: Ctrl+/ = Comment toggle | Alt+↑↓ = লাইন সরাও | Ctrl+D = পরের মিল নির্বাচন | Shift+Alt+F = Format | Ctrl+P = ফাইল খোঁজা

🔷 Emojis — HTML-এ Emoji ব্যবহার

Emoji হলো Unicode অক্ষর — HTML-এ সরাসরি লেখা যায় বা HTML Entity কোড দিয়ে যোগ করা যায়।

Emoji যুক্ত করার উপায়: Methods

<p>আমি HTML শিখছি 🎉</p> <p>সফল হয়েছে ✅ | ব্যর্থ হয়েছে ❌</p>  <p>আমি HTML শিখছি 🎉</p>  <p>রেটিং: ★★★★★</p>   <style> .success::before { content: '✅ '; } .error::before { content: '❌ '; } .info::before { content: 'ℹ️ '; } </style> <p class="success">ফর্ম জমা হয়েছে।</p>   <span aria-hidden="true">🎉</span> <span>অভিনন্দন!</span>  <span role="img" aria-label="সবুজ টিক চিহ্ন">✅</span>

দরকারী Emoji ও HTML Codes:

Emoji	HTML Code	ব্যবহার	Emoji	HTML Code	ব্যবহার
😀	`😀`	হাসি	❤️	`❤`	ভালোবাসা
✅	`✅`	সফল/সঠিক	❌	`❌`	ব্যর্থ/ভুল
⚠️	`⚠`	সতর্কতা	ℹ️	`ℹ`	তথ্য
🎉	`🎉`	উৎসব	🔥	`🔥`	জনপ্রিয়
⭐	`⭐`	রেটিং	★	`★`	ভরা তারা
☆	`☆`	ফাঁকা তারা	🏠	`🏠`	হোম
📱	`📱`	মোবাইল	💻	`💻`	ল্যাপটপ
🔍	`🔍`	সার্চ	📧	`📧`	ইমেইল
🔒	`🔒`	লক/নিরাপদ	🔓	`🔓`	আনলক
⬆️	`⬆`	উপরে	⬇️	`⬇`	নিচে
→	`→`	ডানে তীর	←	`←`	বাঁয়ে তীর
©	`©`	কপিরাইট	®	`®`	Registered

⚠️ Emoji Accessibility: Screen Reader Emoji-র নাম পড়ে শোনায় — যেমন "হাসিমুখ emoji"। অনেক Emoji একসাথে থাকলে Screen Reader ব্যবহারকারীর কাছে বিরক্তিকর। সাজসজ্জার Emoji-তে aria-hidden="true" দাও। তথ্যবহুল Emoji-তে role="img" aria-label="..." দাও।

🔷 দ্রুত রেফারেন্স — সব বিষয় এক নজরে

বিষয়	মূল ধারণা	মনে রাখার সূত্র
HTML Events	ব্রাউজারে যা ঘটে তার বিজ্ঞপ্তি	`addEventListener` ব্যবহার করো
URL Encoding	বিশেষ অক্ষর % দিয়ে encode	স্পেস = `%20`, & = `%26`
Language Codes	ISO 639-1 ভাষার কোড	বাংলা = `bn`, বাংলাদেশ = `bn-BD`
HTTP Methods	সার্ভারে কাজের ধরন	GET=পড়া, POST=তৈরি, PUT=আপডেট, DELETE=মুছা
HTTP Status	সার্ভারের জবাবের কোড	2xx=সফল, 4xx=Client ভুল, 5xx=Server ভুল
VSCode Shortcuts	দ্রুত কোড লেখার শর্টকাট	`Ctrl`+`/`=Comment, `Alt`+`↕`=Move
Emojis	Unicode অক্ষর	✅=`✅`, aria-hidden সাজসজ্জায়

📖 HTML Quick Reference — সম্পূর্ণ ট্যাগ রেফারেন্স

HTML-এর সব গুরুত্বপূর্ণ ট্যাগ, তাদের সংজ্ঞা, ব্যবহার এবং সংক্ষিপ্ত উদাহরণ — এক জায়গায়।

🔷 Document Structure — ডকুমেন্টের কাঠামো

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<!DOCTYPE html>`	ডকুমেন্টের ধরন ঘোষণা	HTML ফাইলের একদম শুরুতে	`<!DOCTYPE html>`
`<html>`	পুরো HTML ডকুমেন্টের মূল উপাদান	DOCTYPE-এর পরে, সব কিছু এর ভেতরে	`<html lang="bn">...</html>`
`<head>`	পেজের মেটাডেটা ধারণ করে	title, meta, link, script রাখতে	`<head><title>পেজ</title></head>`
`<title>`	ব্রাউজার ট্যাবে পেজের শিরোনাম	head-এর ভেতরে, SEO-র জন্য গুরুত্বপূর্ণ	`<title>DevShikhi</title>`
`<body>`	পেজে দৃশ্যমান সব কনটেন্ট	head-এর পরে, সব দৃশ্যমান কনটেন্ট এখানে	`<body><h1>স্বাগতম</h1></body>`
`<meta>`	পেজ সম্পর্কে মেটাডেটা	charset, viewport, description দিতে	`<meta charset="UTF-8">`
`<link>`	বাইরের রিসোর্সের সাথে সংযোগ	CSS ফাইল, Favicon যুক্ত করতে	`<link rel="stylesheet" href="style.css">`
`<style>`	HTML-এর ভেতরে CSS লেখার জায়গা	Internal CSS দিতে	`<style>p { color: red; }</style>`
`<script>`	JavaScript কোড বা ফাইল যুক্ত করা	JS লিখতে বা .js ফাইল লিংক করতে	`<script src="app.js" defer></script>`
`<noscript>`	JS বন্ধ থাকলে যা দেখাবে	JS-নির্ভর সাইটে fallback হিসেবে	`<noscript>JS চালু করুন</noscript>`
`<base>`	পেজের সব relative URL-এর ভিত্তি URL	head-এ, সব লিংকের শুরু URL ঠিক করতে	`<base href="https://example.com/">`

🔷 Semantic Layout — কাঠামো ও বিভাজন

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<header>`	পেজ বা section-এর উপরের অংশ	লোগো, নেভিগেশন রাখতে	`<header><nav>...</nav></header>`
`<nav>`	নেভিগেশন লিংকের সমষ্টি	মূল মেনু, Breadcrumb	`<nav><a href="/">হোম</a></nav>`
`<main>`	পেজের মূল অনন্য কনটেন্ট	পেজে মাত্র একটি, মূল বিষয়বস্তু	`<main><h1>টিউটোরিয়াল</h1></main>`
`<section>`	বিষয়ভিত্তিক স্বতন্ত্র অংশ	অধ্যায়, পেজের একটি বিভাগ	`<section><h2>পরিচিতি</h2></section>`
`<article>`	স্বাধীনভাবে বিতরণযোগ্য কনটেন্ট	ব্লগ পোস্ট, নিউজ, মন্তব্য	`<article><h2>পোস্ট</h2></article>`
`<aside>`	মূল কনটেন্টের পাশের সম্পর্কিত তথ্য	Sidebar, Related Posts, Tips	`<aside><h2>সম্পর্কিত</h2></aside>`
`<footer>`	পেজ বা section-এর নিচের অংশ	কপিরাইট, লিংক, লেখকের তথ্য	`<footer><p>© ২০২৬</p></footer>`
`<div>`	সাধারণ Block-level কনটেইনার	CSS Layout, JS-এর জন্য গ্রুপ করা	`<div class="card">...</div>`
`<span>`	সাধারণ Inline কনটেইনার	লেখার মধ্যে অংশ আলাদা করা	`<p>আমার <span>নাম</span></p>`
`<address>`	যোগাযোগের তথ্য	ইমেইল, ফোন, ঠিকানা	`<address>ঢাকা, বাংলাদেশ</address>`

🔷 Heading ও Text — শিরোনাম ও লেখা

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<h1>`	সবচেয়ে গুরুত্বপূর্ণ শিরোনাম	পেজে মাত্র একটি, মূল শিরোনাম	`<h1>HTML Tutorial</h1>`
`<h2>`	দ্বিতীয় স্তরের শিরোনাম	বড় সেকশনের শিরোনাম	`<h2>HTML কী?</h2>`
`<h3>`	তৃতীয় স্তরের শিরোনাম	উপসেকশনের শিরোনাম	`<h3>ট্যাগ কী?</h3>`
`<h4>`–`<h6>`	চতুর্থ থেকে ষষ্ঠ স্তরের শিরোনাম	আরও গভীর উপবিভাগ	`<h4>বিস্তারিত</h4>`
`<p>`	অনুচ্ছেদ (Paragraph)	সাধারণ লেখার ব্লক	`<p>HTML শেখা মজার।</p>`
`<br>`	লাইন বিরতি (Self-closing)	একই p-এ নতুন লাইনে যেতে	`প্রথম লাইন<br>দ্বিতীয় লাইন`
`<hr>`	অনুভূমিক বিভাজক রেখা (Self-closing)	দুটি বিভাগের মাঝে বিভাজন	`<p>উপরে</p><hr><p>নিচে</p>`
`<pre>`	হুবহু ফরম্যাট ধরে রাখে	কোড ব্লক, ছক, কবিতা	`<pre> ইন্ডেন্টসহ লেখা</pre>`
`<blockquote>`	দীর্ঘ উদ্ধৃতি (Block)	অন্য উৎস থেকে বড় উদ্ধৃতি	`<blockquote>উদ্ধৃতি...</blockquote>`
`<q>`	সংক্ষিপ্ত ইনলাইন উদ্ধৃতি	লেখার ভেতরে ছোট quote	`সে বলল <q>HTML শেখো</q>`

🔷 Text Formatting — লেখার ধরন পরিবর্তন

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<strong>`	গুরুত্বপূর্ণ লেখা — Bold ও Semantic	সতর্কতা, জরুরি তথ্য	`<strong>সতর্কতা</strong>`
`<em>`	জোর দেওয়া লেখা — Italic ও Semantic	বিশেষ শব্দ, জোর দেওয়া	`<em>অবশ্যই</em> করতে হবে।`
`<b>`	শুধু Bold (কোনো Semantic অর্থ নেই)	পণ্যের নাম, keyword	`<b>মোটা লেখা</b>`
`<i>`	শুধু Italic (কোনো Semantic অর্থ নেই)	বইয়ের নাম, বৈজ্ঞানিক নাম	`<i>বাঁকা লেখা</i>`
`<u>`	Underline — আন্ডারলাইন	বানান ভুল চিহ্নিত করা	`<u>দাগানো লেখা</u>`
`<s>`	Strikethrough — আর প্রযোজ্য নয়	পুরনো দাম, শেষ হয়ে যাওয়া তথ্য	`<s>১০০০ টাকা</s>`
`<del>`	মুছে ফেলা লেখা — সম্পাদনায় বিয়োজন	ডকুমেন্ট সংশোধন, দাম পরিবর্তন	`<del>পুরনো দাম</del>`
`<ins>`	নতুন যোগ করা লেখা — সম্পাদনায় সংযোজন	ডকুমেন্ট সংশোধন, নতুন দাম	`<ins>নতুন দাম</ins>`
`<mark>`	হাইলাইট করা লেখা	সার্চ ফলাফল, গুরুত্বপূর্ণ অংশ	`<mark>গুরুত্বপূর্ণ</mark>`
`<small>`	ছোট লেখা — পার্শ্ব তথ্য	কপিরাইট, ফুটনোট, শর্ত	`<small>© ২০২৬</small>`
`<sub>`	নিচে ছোট লেখা (Subscript)	রসায়নের সূত্র	`H<sub>2</sub>O`
`<sup>`	উপরে ছোট লেখা (Superscript)	গণিতের সূত্র, ফুটনোট রেফারেন্স	`x<sup>2</sup>`
`<abbr>`	সংক্ষেপণের পূর্ণরূপ	HTML, CSS, API — hover-এ tooltip	`<abbr title="HyperText">HTML</abbr>`
`<cite>`	সৃজনশীল কাজের নাম	বই, সিনেমা, গবেষণাপত্রের নাম	`<cite>HTML বই</cite>`
`<dfn>`	কোনো শব্দের সংজ্ঞা	প্রথমবার কোনো শব্দ সংজ্ঞায়িত করতে	`<dfn>HTML</dfn> হলো...</dfn>`
`<time>`	Semantic তারিখ বা সময়	আর্টিকেলের তারিখ, ইভেন্টের সময়	`<time datetime="2026-05-18">১৮ মে</time>`
`<wbr>`	সম্ভাব্য Word Break-এর স্থান	লম্বা URL বা শব্দ ভাঙতে	`example.com/<wbr>long-path`

🔷 Link ও Media — সংযোগ ও মিডিয়া

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<a>`	Hyperlink — এক পেজ থেকে আরেকটিতে লিংক	নেভিগেশন, বাইরের সাইট, ডাউনলোড	`<a href="/about">আমাদের সম্পর্কে</a>`
`<img>`	ছবি দেখানো (Self-closing)	ফটো, লোগো, আইকন	`<img src="logo.png" alt="লোগো">`
`<figure>`	ছবি বা মিডিয়া ও ক্যাপশনের গ্রুপ	আর্টিকেলের ছবি, ডায়াগ্রাম	`<figure><img><figcaption>...</figcaption></figure>`
`<figcaption>`	figure-এর ক্যাপশন বা শিরোনাম	ছবির বিবরণ বা সূত্র	`<figcaption>চিত্র ১: মানচিত্র</figcaption>`
`<audio>`	অডিও ফাইল বাজানো	পডকাস্ট, গান, ভয়েস রেকর্ড	`<audio src="song.mp3" controls></audio>`
`<video>`	ভিডিও ফাইল দেখানো	টিউটোরিয়াল ভিডিও, বিজ্ঞাপন	`<video src="clip.mp4" controls></video>`
`<source>`	audio/video-এর একাধিক সোর্স ফরম্যাট	ব্রাউজার সামঞ্জস্যতার জন্য	`<source src="song.mp3" type="audio/mpeg">`
`<track>`	ভিডিওর Subtitle বা Caption	শ্রবণপ্রতিবন্ধীদের জন্য সাবটাইটেল	`<track kind="captions" src="bn.vtt" srclang="bn">`
`<iframe>`	অন্য পেজ ভেতরে দেখানো	YouTube ভিডিও, Google Map	`<iframe src="https://youtube.com/embed/..."></iframe>`
`<picture>`	ডিভাইস অনুযায়ী আলাদা ছবি	Responsive ছবি, WebP Fallback	`<picture><source srcset="img.webp"><img src="img.jpg"></picture>`
`<canvas>`	JavaScript দিয়ে 2D/3D গ্রাফিক্স আঁকার জায়গা	গেম, চার্ট, অ্যানিমেশন	`<canvas id="c" width="400" height="200"></canvas>`
`<svg>`	Scalable Vector Graphics	আইকন, লোগো, ডায়াগ্রাম	`<svg><circle cx="50" cy="50" r="40"/></svg>`

🔷 Lists — তালিকা

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<ul>`	বুলেট পয়েন্টের তালিকা (অক্রমিক)	নেভিগেশন মেনু, feature তালিকা	`<ul><li>HTML</li></ul>`
`<ol>`	নম্বরযুক্ত তালিকা (ক্রমিক)	ধাপের নির্দেশনা, রেসিপি	`<ol><li>প্রথম ধাপ</li></ol>`
`<li>`	তালিকার একটি আইটেম	ul বা ol-এর ভেতরে প্রতিটি আইটেম	`<li>তালিকার আইটেম</li>`
`<dl>`	বিবরণ তালিকার কনটেইনার	Glossary, FAQ, Dictionary	`<dl><dt>HTML</dt><dd>ভাষা</dd></dl>`
`<dt>`	বিবরণ তালিকার শব্দ বা বিষয়	dl-এর ভেতরে সংজ্ঞার শিরোনাম	`<dt>CSS</dt>`
`<dd>`	বিবরণ তালিকার বিবরণ	dt-এর ব্যাখ্যা বা বিবরণ	`<dd>স্টাইলিং ভাষা</dd>`

🔷 Table — ছক

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<table>`	ছকের মূল কনটেইনার	Tabular ডেটা দেখাতে	`<table>...</table>`
`<caption>`	ছকের শিরোনাম বা বিবরণ	table-এর প্রথমেই, Accessibility-র জন্য	`<caption>বিক্রয় রিপোর্ট</caption>`
`<thead>`	ছকের শিরোনাম সারির গ্রুপ	কলামের শিরোনাম সারি	`<thead><tr><th>নাম</th></tr></thead>`
`<tbody>`	ছকের মূল ডেটার গ্রুপ	ডেটা সারি ধারণ করে	`<tbody><tr><td>তানভীর</td></tr></tbody>`
`<tfoot>`	ছকের সারসংক্ষেপ সারির গ্রুপ	মোট বা সারসংক্ষেপ সারি	`<tfoot><tr><td>মোট</td></tr></tfoot>`
`<tr>`	ছকের একটি সারি (Table Row)	thead, tbody, tfoot-এর ভেতরে	`<tr><td>ডেটা</td></tr>`
`<th>`	ছকের শিরোনাম ঘর (Bold, মাঝখানে)	কলাম বা সারির শিরোনাম	`<th scope="col">নাম</th>`
`<td>`	ছকের সাধারণ ডেটা ঘর	মূল ডেটা বসাতে	`<td colspan="2">মোট</td>`
`<colgroup>`	কলামের গ্রুপ	নির্দিষ্ট কলামে CSS দিতে	`<colgroup><col style="width:50%"></colgroup>`

🔷 Form — ফর্ম

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<form>`	ফর্মের মূল কনটেইনার	লগইন, রেজিস্ট্রেশন, যোগাযোগ ফর্ম	`<form action="/login" method="POST"></form>`
`<input>`	বিভিন্ন ধরনের ইনপুট ফিল্ড (Self-closing)	টেক্সট, ইমেইল, পাসওয়ার্ড, চেকবক্স	`<input type="email" name="email" required>`
`<label>`	ইনপুটের শিরোনাম বা বিবরণ	Accessibility-র জন্য input-এর সাথে যুক্ত	`<label for="email">ইমেইল:</label>`
`<textarea>`	বহু লাইনের টেক্সট ইনপুট	মন্তব্য, বার্তা, বিবরণ	`<textarea name="msg" rows="4"></textarea>`
`<select>`	ড্রপডাউন নির্বাচন তালিকা	বিভাগ, দেশ, শ্রেণী নির্বাচন	`<select name="city"><option>ঢাকা</option></select>`
`<option>`	ড্রপডাউনের একটি আইটেম	select-এর ভেতরে প্রতিটি বিকল্প	`<option value="dhaka">ঢাকা</option>`
`<optgroup>`	option-গুলোকে গ্রুপে ভাগ করা	বিভাগীয় ড্রপডাউন তৈরিতে	`<optgroup label="Frontend">...</optgroup>`
`<button>`	ক্লিকযোগ্য বোতাম	Submit, Reset, বা Custom Action	`<button type="submit">জমা দিন</button>`
`<fieldset>`	সম্পর্কিত ফর্ম ফিল্ডের গ্রুপ	বড় ফর্মের অংশ ভাগ করতে	`<fieldset><legend>ব্যক্তিগত তথ্য</legend></fieldset>`
`<legend>`	fieldset-এর শিরোনাম	fieldset-এর প্রথমেই	`<legend>যোগাযোগের তথ্য</legend>`
`<datalist>`	ইনপুটে Auto-suggest তালিকা	শহর, দেশ, ব্রাউজারের নাম	`<datalist id="cities"><option value="ঢাকা"></datalist>`
`<output>`	ফর্মের গণনার ফলাফল দেখানো	মোট দাম, বয়স গণনা	`<output name="total" for="price qty">100</output>`
`<meter>`	নির্দিষ্ট পরিসরের মান দেখানো	ডিস্ক ব্যবহার, পাসওয়ার্ড শক্তি	`<meter value="70" min="0" max="100">70%</meter>`
`<progress>`	কাজের অগ্রগতি বার	ফাইল আপলোড, কোর্সের অগ্রগতি	`<progress value="60" max="100"></progress>`

🔷 Grouping ও Interactive — গ্রুপ ও ইন্টারেক্টিভ

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<details>`	ক্লিক করলে দেখা যায় এমন লুকানো কনটেন্ট	FAQ, Accordion, Spoiler	`<details><summary>প্রশ্ন</summary>উত্তর</details>`
`<summary>`	details-এর দৃশ্যমান শিরোনাম	details-এর প্রথমেই	`<summary>আরও দেখুন</summary>`
`<dialog>`	Modal বা Popup ডায়ালগ বক্স	Confirmation, Alert, Custom Modal	`<dialog open><p>নিশ্চিত?</p></dialog>`
`<template>`	লুকানো HTML যা JS দিয়ে ক্লোন করা যায়	Dynamic কার্ড, পুনর্ব্যবহারযোগ্য UI	`<template id="card"><div class="card"></div></template>`
`<slot>`	Web Component-এ কনটেন্টের স্থান নির্ধারক	Custom Element-এর ভেতরের কনটেন্ট	`<slot name="header">ডিফল্ট</slot>`

🔷 Code ও Technical — প্রযুক্তিগত কনটেন্ট

ট্যাগ	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`<code>`	ইনলাইন কোড বা ফাংশনের নাম	লেখার মধ্যে কোড দেখাতে	`<code>console.log()</code>`
`<pre>`	হুবহু ফরম্যাট ধরে রাখা লেখা	কোড ব্লক (`<pre><code>` একসাথে)	`<pre><code>let x = 5;</code></pre>`
`<kbd>`	কীবোর্ড বোতামের ইনপুট	Keyboard Shortcut দেখাতে	`<kbd>Ctrl</kbd> + <kbd>S</kbd>`
`<samp>`	প্রোগ্রাম বা কম্পিউটারের আউটপুট	Terminal বা Console আউটপুট	`<samp>Hello, World!</samp>`
`<var>`	গণিত বা প্রোগ্রামিং-এর চলক (Variable)	সূত্রে ভেরিয়েবল	`ক্ষেত্রফল = π × <var>r</var><sup>2</sup>`
`<data>`	মেশিন-পঠনযোগ্য মান	পণ্যের কোড, ISBN নম্বর	`<data value="P001">পণ্য ১</data>`

🔷 Global Attributes — যেকোনো ট্যাগে ব্যবহারযোগ্য

Attribute	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`id`	Element-এর অনন্য পরিচয় (পেজে একটিই)	CSS, JS, Anchor Link	`<section id="about">`
`class`	Element-এর গ্রুপ পরিচয় (একাধিক হতে পারে)	CSS স্টাইল দিতে	`<div class="card active">`
`style`	সরাসরি Inline CSS	দ্রুত স্টাইল পরীক্ষা	`<p style="color:red;">`
`title`	Hover করলে Tooltip দেখায়	লিংক, ছবি, abbr-এ বিবরণ	`<a title="গুগলে যাবে">`
`lang`	কনটেন্টের ভাষা নির্ধারণ	বহুভাষিক পেজে অংশের ভাষা	`<p lang="en">English</p>`
`dir`	লেখার দিক নির্ধারণ	আরবি, উর্দু (rtl) কনটেন্টে	`<p dir="rtl">عربي</p>`
`hidden`	Element পেজে লুকিয়ে রাখে	JS দিয়ে পরে দেখানো হবে	`<div hidden>লুকানো</div>`
`tabindex`	Tab চাপলে কোন ক্রমে focus যাবে	Keyboard Accessibility	`<div tabindex="0">`
`contenteditable`	Element-এর কনটেন্ট পেজে সরাসরি এডিট করা যাবে	Rich Text Editor, নোটপ্যাড	`<div contenteditable="true">`
`data-*`	Custom ডেটা Element-এ সংরক্ষণ	JS দিয়ে পরে ব্যবহার করতে	`<div data-id="42" data-role="admin">`
`draggable`	Element টেনে নেওয়া যাবে কিনা	Drag and Drop কার্যকারিতায়	`<div draggable="true">`
`spellcheck`	বানান পরীক্ষা চালু বা বন্ধ	textarea, contenteditable-এ	`<textarea spellcheck="false">`
`translate`	ব্রাউজার অনুবাদ করবে কিনা	ব্র্যান্ড নাম, কোড অনুবাদ রোধে	`<span translate="no">DevShikhi</span>`

🔷 ARIA Attributes — Accessibility-র জন্য

Attribute	সংজ্ঞা	ব্যবহার	সংক্ষিপ্ত উদাহরণ
`role`	Element-এর ভূমিকা Screen Reader-কে জানায়	div দিয়ে button বানালে	`<div role="button">`
`aria-label`	Screen Reader-এর জন্য নাম	Icon বোতামে, দৃশ্যমান label না থাকলে	`<button aria-label="বন্ধ করো">✕</button>`
`aria-labelledby`	অন্য Element-এর id দিয়ে নাম	Section-এর নাম heading থেকে নিতে	`<section aria-labelledby="heading">`
`aria-describedby`	অতিরিক্ত বিবরণের Element-এর id	ইনপুটের hint বা error message	`<input aria-describedby="hint">`
`aria-hidden`	Screen Reader থেকে লুকিয়ে রাখা	সাজসজ্জার আইকন, পুনরাবৃত্তি	`<span aria-hidden="true">★</span>`
`aria-expanded`	Element খোলা (true) বা বন্ধ (false)	Accordion, Dropdown, Menu	`<button aria-expanded="false">`
`aria-live`	গতিশীল কনটেন্ট পরিবর্তন হলে পড়া	Error message, Status update	`<div aria-live="polite">`
`aria-required`	ফিল্ড পূরণ করা বাধ্যতামূলক	Custom ফর্ম ফিল্ডে	`<input aria-required="true">`
`aria-invalid`	ইনপুটের মান ভুল কিনা	Validation ব্যর্থ হলে JS দিয়ে	`<input aria-invalid="true">`
`aria-current`	বর্তমান পেজ বা আইটেম চিহ্নিত করা	Breadcrumb, Navigation মেনু	`<a aria-current="page">HTML</a>`
`aria-pressed`	Toggle বোতাম চাপা আছে কিনা	Dark Mode, Like বোতাম	`<button aria-pressed="false">`
`aria-modal`	Dialog একটি Modal হিসেবে চিহ্নিত	Modal dialog-এ	`<div role="dialog" aria-modal="true">`

🔷 Deprecated Tags — এখন আর ব্যবহার করো না

⚠️ এই ট্যাগগুলো আর ব্যবহার করো না: HTML5-এ বাতিল হয়েছে। বদলে CSS ব্যবহার করো।

বাতিল ট্যাগ	আগে কী করতো	এখন কী ব্যবহার করবে
`<center>`	কনটেন্ট মাঝখানে আনতো	CSS: `text-align: center`
`<font>`	ফন্ট, সাইজ, রঙ পরিবর্তন করতো	CSS: `font-family, font-size, color`
`<big>`	লেখা বড় করতো	CSS: `font-size: larger`
`<strike>`	Strikethrough করতো	`<del>` বা `<s>`
`<tt>`	Monospace ফন্টে দেখাতো	`<code>` বা `<kbd>`
`<marquee>`	স্ক্রোলিং টেক্সট তৈরি করতো	CSS Animation
`<blink>`	লেখা জ্বলতো-নিভতো	CSS Animation
`<frame>`	পেজ frame-এ ভাগ করতো	`<iframe>` বা CSS Grid

কোড	ভাষা	কোড	ভাষা
`bn`	বাংলা	`en`	ইংরেজি
`bn-BD`	বাংলাদেশি বাংলা	`en-US`	আমেরিকান ইংরেজি
`ar`	আরবি	`en-GB`	ব্রিটিশ ইংরেজি
`hi`	হিন্দি	`fr`	ফরাসি
`ur`	উর্দু	`de`	জার্মান
`zh`	চীনা	`es`	স্পেনিশ
`ja`	জাপানি	`pt`	পর্তুগিজ
`ko`	কোরিয়ান	`ru`	রাশিয়ান
`tr`	তুর্কি	`it`	ইতালিয়ান
`fa`	ফার্সি	`nl`	ডাচ