Your First HTML Page: Anatomy of a Document

প্রথম HTML পেজ — ডকুমেন্টের গঠন

Read: ~22 min Beginner 8 practice problems Live preview runner

1. Every HTML Page Shares the Same Skeleton

In Module 01 you saw a complete HTML page and ran it live. Now we slow down and look at every single piece of that skeleton — what it is called, what it does, and why it has to be there. Once this structure feels familiar, reading any HTML page on the internet, no matter how complex, becomes far less intimidating.

মডিউল ০১-এ আপনি একটি সম্পূর্ণ HTML পেজ দেখেছেন এবং সরাসরি চালিয়েও দেখেছেন। এবার আমরা একটু ধীরে সেই কাঠামোর প্রতিটি অংশ খুঁটিয়ে দেখব — এর নাম কী, এটি কী কাজ করে, এবং কেন এটি থাকা জরুরি। এই কাঠামোটি একবার পরিচিত হয়ে গেলে, ইন্টারনেটের যেকোনো জটিল HTML পেজ পড়াও অনেক সহজ মনে হবে।

Every valid HTML5 document has exactly the same four-part shape: a DOCTYPE declaration, an <html> root element, a <head> section, and a <body> section. We will go through each one in order.

2. <!DOCTYPE html> — The Very First Line

The first line of every HTML file must be <!DOCTYPE html>. It is not an HTML tag — it is a special instruction that tells the browser "render this document using the modern HTML5 standard." Without it, some older browsers switch into quirks mode, an old compatibility mode that renders CSS unpredictably. The HTML5 doctype is short on purpose: earlier HTML versions had long, confusing doctype strings, and HTML5 simplified it to exactly one line.

প্রতিটি HTML ফাইলের প্রথম লাইন হতে হবে <!DOCTYPE html>। এটি কোনো HTML ট্যাগ নয় — এটি একটি বিশেষ নির্দেশনা, যা ব্রাউজারকে বলে "এই ডকুমেন্টটি আধুনিক HTML5 স্ট্যান্ডার্ড অনুযায়ী রেন্ডার করো।" এটি না থাকলে কিছু পুরনো ব্রাউজার quirks mode-এ চলে যায় — একটি পুরনো compatibility mode, যেখানে CSS অপ্রত্যাশিতভাবে আচরণ করে। HTML5-এর doctype ইচ্ছাকৃতভাবেই ছোট রাখা হয়েছে — আগের HTML ভার্সনগুলোতে এটি অনেক লম্বা ও জটিল ছিল।

Note <!DOCTYPE html> is case-insensitive, but writing it exactly like this — lowercase — is the universal convention you will see in every professional codebase.

<!DOCTYPE html> কেস-ইনসেনসিটিভ (বড় বা ছোট হাতের অক্ষরে লিখলেও চলে), কিন্তু ঠিক এভাবে ছোট হাতের অক্ষরে লেখাই সব পেশাদার কোডবেসে প্রচলিত রীতি।

3. html, head & body — The Three Containers

Right after the doctype comes <html>, the root element — every other tag in the page lives inside it. It almost always carries a lang attribute (e.g. lang="en" or lang="bn"), which tells screen readers how to pronounce the text and helps search engines serve the right language to the right audience. Inside <html> there are exactly two children: <head>, which holds metadata that is not shown on the page itself, and <body>, which holds everything the visitor actually sees.

doctype-এর ঠিক পরে আসে <html>, যা root element — পেজের বাকি সব ট্যাগ এর ভেতরেই থাকে। এতে প্রায় সবসময় একটি lang অ্যাট্রিবিউট থাকে (যেমন lang="en" বা lang="bn"), যা স্ক্রিন রিডারকে টেক্সট সঠিকভাবে উচ্চারণ করতে সাহায্য করে এবং সার্চ ইঞ্জিনকে সঠিক ভাষার কনটেন্ট সঠিক দর্শকের কাছে পৌঁছাতে সহায়তা করে। <html>-এর ভেতরে ঠিক দুটি সন্তান থাকে — <head>, যেখানে থাকে মেটাডেটা যা সরাসরি পেজে দেখা যায় না, এবং <body>, যেখানে থাকে দর্শক যা কিছু আসলে দেখতে পান।

Figure 2.1 — html-এর ভেতরে head ও body কীভাবে বসে।

4. meta charset & viewport — Two Meta Tags You Always Need

Inside <head>, two <meta> tags matter most for beginners. <meta charset="UTF-8"> tells the browser which character encoding to use when reading your file — UTF-8 supports virtually every writing system on Earth, including Bangla, so text like "বাংলা" renders correctly instead of turning into garbled symbols. The second, <meta name="viewport" content="width=device-width, initial-scale=1.0">, tells mobile browsers to use the phone's actual screen width instead of pretending it is a shrunken desktop page — without it, your site will look tiny and zoomed-out on every phone.

<head>-এর ভেতরে দুটি <meta> ট্যাগ শুরুর দিকে সবচেয়ে গুরুত্বপূর্ণ। <meta charset="UTF-8"> ব্রাউজারকে জানায় ফাইলটি কোন character encoding দিয়ে পড়তে হবে — UTF-8 পৃথিবীর প্রায় সব লেখার পদ্ধতি সাপোর্ট করে, বাংলাসহ, তাই "বাংলা"-র মতো টেক্সট সঠিকভাবে দেখায়, উল্টাপাল্টা চিহ্ন হয়ে যায় না। দ্বিতীয়টি, viewport মেটা ট্যাগ, মোবাইল ব্রাউজারকে বলে ফোনের আসল স্ক্রিন-প্রস্থ ব্যবহার করতে — এটি না থাকলে যেকোনো ফোনে আপনার সাইট ছোট ও জুম-আউট অবস্থায় দেখাবে।

❌ Without viewport meta (viewport ছাড়া)

Mobile browser assumes a ~980px desktop page
Page loads tiny and zoomed out
User must pinch-zoom to read anything

✅ With viewport meta (viewport সহ)

Browser uses the real device width
Text and layout render at true size
Foundation for responsive design later in this course

5. The <title> Tag & SEO Basics

<title> is the only tag whose text shows up in a place other than the page body: the browser tab, bookmarks, and — very importantly — the clickable blue link in Google search results. A vague title like "Home" tells search engines and users nothing; a specific title like "Your First HTML Page: Anatomy of a Document | ABCL TECH" tells both exactly what the page is about. Every page on a site should have a unique, descriptive title.

<title> হলো একমাত্র ট্যাগ যার টেক্সট পেজ বডি ছাড়া অন্য জায়গায়ও দেখা যায় — ব্রাউজার ট্যাব, বুকমার্ক, এবং সবচেয়ে গুরুত্বপূর্ণভাবে, Google সার্চ রেজাল্টের নীল ক্লিকযোগ্য লিংকে। "Home"-এর মতো অস্পষ্ট টাইটেল সার্চ ইঞ্জিন বা ইউজারকে কিছুই বলে না; "Your First HTML Page: Anatomy of a Document | ABCL TECH"-এর মতো নির্দিষ্ট টাইটেল দুজনকেই স্পষ্টভাবে জানায় পেজটি কী সম্পর্কে। সাইটের প্রতিটি পেজের টাইটেল আলাদা ও অর্থবহ হওয়া উচিত।

6. Full Anatomy — Run It Live 🚀

Here is a complete page using everything covered so far. Click Run ▶ to render it.

এখন পর্যন্ত শেখা প্রতিটি অংশ দিয়ে একটি সম্পূর্ণ পেজ নিচে দেওয়া হলো। Run ▶ বাটনে ক্লিক করে দেখুন।

anatomy.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Real Page</title>
</head>
<body>
  <h1>Anatomy of a Page</h1>
  <p>This body is everything you can see. The head above never shows here.</p>
</body>
</html>

Anatomy — প্রতিটি অংশের কাজ

Piece	Meaning	বাংলায়
`<!DOCTYPE html>`	Declares HTML5 standards mode.	HTML5 স্ট্যান্ডার্ড মোড ঘোষণা করে।
`<html lang="en">`	Root element; lang aids screen readers & SEO.	মূল এলিমেন্ট; lang স্ক্রিন রিডার ও SEO-তে সাহায্য করে।
`<meta charset="UTF-8">`	Ensures Bangla/English text renders correctly.	বাংলা/ইংরেজি টেক্সট সঠিকভাবে দেখানো নিশ্চিত করে।
`<meta name="viewport"...>`	Makes the page render at true size on mobile.	মোবাইলে পেজ সঠিক আকারে দেখায়।
`<title>`	Tab text & the clickable search-result headline.	ট্যাবের টেক্সট ও সার্চ রেজাল্টের হেডলাইন।
`<body>`	Everything visible on the page.	পেজে দৃশ্যমান সবকিছু।

7. Saving & Opening Your File

An HTML file is just a plain text file with a .html extension — you can write it in Notepad, but a code editor like VS Code gives you syntax highlighting and autocomplete. Save it as index.html (the standard name browsers and servers look for first), always with UTF-8 encoding so Bangla text stays intact. To view it, either double-click the file to open it directly in a browser via a file:// path, or — better, once you start using more than one file — run a "Live Server" extension so the page reloads automatically every time you save.

HTML ফাইল আসলে .html এক্সটেনশনযুক্ত একটি প্লেইন টেক্সট ফাইল — Notepad-এও লেখা যায়, তবে VS Code-এর মতো কোড এডিটর ব্যবহার করলে syntax highlighting ও autocomplete পাওয়া যায়। ফাইলটি index.html নামে সংরক্ষণ করুন (ব্রাউজার ও সার্ভার প্রথমে এই নামটিই খোঁজে), এবং সবসময় UTF-8 এনকোডিং ব্যবহার করুন যাতে বাংলা টেক্সট ঠিক থাকে। দেখতে হলে ফাইলে ডাবল-ক্লিক করলে file:// পাথ দিয়ে সরাসরি ব্রাউজারে খুলবে, অথবা — একাধিক ফাইল নিয়ে কাজ শুরু করলে — "Live Server" এক্সটেনশন চালান, যাতে সেভ করার সাথে সাথেই পেজ নিজে থেকে রিলোড হয়।

Key insight The filename index.html is special: it is the default file a web server sends when someone visits a folder URL with no filename, like abcltech.com/html-css/.

index.html নামটি বিশেষ — কেউ যখন কোনো ফোল্ডার URL ভিজিট করে যেখানে কোনো ফাইলের নাম উল্লেখ নেই (যেমন abcltech.com/html-css/), তখন সার্ভার ডিফল্টভাবে এই ফাইলটিই পাঠায়।

8. Practice Problems

Every problem has a Show Answer button. Try each one yourself first.

প্রতিটি প্রশ্নে Show Answer বাটন আছে। প্রথমে নিজে চেষ্টা করুন, তারপর উত্তর মিলিয়ে নিন।

Write the single line every HTML5 file must begin with.

প্রতিটি HTML5 ফাইলের শুরুতে যে একটি লাইন থাকতেই হবে, সেটি লিখুন।

✨ Show Answer (উত্তর দেখুন)

Answer: <!DOCTYPE html> — it tells the browser to render the page in standards mode using HTML5 rules.

<!DOCTYPE html> — এটি ব্রাউজারকে বলে HTML5 নিয়ম মেনে standards mode-এ পেজ রেন্ডার করতে।
Build a minimal HTML page with a correct doctype, lang attribute, UTF-8 charset, viewport meta, and a title of "Practice Page".

একটি ন্যূনতম HTML পেজ বানান — সঠিক doctype, lang অ্যাট্রিবিউট, UTF-8 charset, viewport meta ও "Practice Page" টাইটেল সহ।
✨ Show Answer (উত্তর দেখুন)
ans2.html
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practice Page</title>
</head>
<body>
  <h1>Practice Page</h1>
</body>
</html>
```
What goes wrong visually on a phone if you forget the viewport meta tag?

viewport meta ট্যাগ বাদ দিলে ফোনে দেখতে কী সমস্যা হয়?

✨ Show Answer (উত্তর দেখুন)

Answer: The phone assumes the page is a full-width desktop layout (~980px) and shrinks the whole thing to fit the screen, so everything looks tiny and the user has to pinch-zoom to read it.

ফোনটি ধরে নেয় পেজটি একটি ডেস্কটপ-প্রস্থের লেআউট (~৯৮০px), এবং পুরো পেজটিকে স্ক্রিনে ফিট করার জন্য ছোট করে দেখায় — ফলে সবকিছু ছোট দেখায় এবং পড়ার জন্য pinch-zoom করতে হয়।
Explain in one sentence why <meta charset="UTF-8"> matters for a Bangla-language page.

একটি বাংলা ভাষার পেজের জন্য <meta charset="UTF-8"> কেন গুরুত্বপূর্ণ, এক বাক্যে ব্যাখ্যা করুন।

✨ Show Answer (উত্তর দেখুন)

Answer: UTF-8 correctly encodes Bangla (and virtually every other script), so the browser displays the actual Bangla characters instead of broken symbols or question marks.

UTF-8 বাংলা (এবং প্রায় প্রতিটি লেখার পদ্ধতি) সঠিকভাবে এনকোড করে, ফলে ব্রাউজার আসল বাংলা অক্ষরই দেখায়, ভাঙা চিহ্ন বা প্রশ্নবোধক চিহ্ন দেখায় না।
Write a page whose <title> would make a good, specific Google search result headline for a bakery called "Dhaka Sweets".

"Dhaka Sweets" নামের একটি বেকারির জন্য এমন একটি পেজ লিখুন, যার <title> একটি ভালো ও নির্দিষ্ট Google সার্চ রেজাল্ট হেডলাইন হতে পারে।
✨ Show Answer (উত্তর দেখুন)
ans5.html
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dhaka Sweets — Fresh Bengali Mishti in Dhanmondi</title>
</head>
<body>
  <h1>Dhaka Sweets</h1>
  <p>Fresh mishti made daily in Dhanmondi, Dhaka.</p>
</body>
</html>
```
Name the two direct children of the <html> element and state what each one is for.

<html> এলিমেন্টের দুটি সরাসরি সন্তানের নাম বলুন এবং প্রতিটি কী কাজে ব্যবহৃত হয় তা বলুন।

✨ Show Answer (উত্তর দেখুন)

Answer: <head> holds metadata not shown on the page (charset, viewport, title, CSS links), and <body> holds everything the visitor actually sees.

<head>-এ থাকে মেটাডেটা যা পেজে দেখা যায় না (charset, viewport, title, CSS লিংক), এবং <body>-এ থাকে দর্শক যা কিছু আসলে দেখেন।
What file extension should you save your HTML file with, and what special name should your homepage file usually have?

HTML ফাইল কোন এক্সটেনশনে সেভ করা উচিত, এবং হোমপেজ ফাইলের বিশেষ নাম সাধারণত কী হয়?

✨ Show Answer (উত্তর দেখুন)

Answer: Save it with a .html extension. The homepage of a folder is conventionally named index.html, since servers serve that file by default when no filename is given in the URL.

.html এক্সটেনশনে সেভ করতে হবে। একটি ফোল্ডারের হোমপেজ সাধারণত index.html নামে রাখা হয়, কারণ URL-এ ফাইলের নাম না দিলে সার্ভার ডিফল্টভাবে এই ফাইলটিই পাঠায়।
Fix this broken head section: it is missing the charset meta tag and the closing head tag. <head><title>Fix Me</title>

এই ভাঙা head সেকশনটি ঠিক করুন — এতে charset meta ট্যাগ এবং head-এর ক্লোজিং ট্যাগ অনুপস্থিত: <head><title>Fix Me</title>
✨ Show Answer (উত্তর দেখুন)
ans8.html
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fix Me</title>
</head>
<body>
  <p>Head section is now valid.</p>
</body>
</html>
```

Summary — Module 02

Every HTML5 document has the same skeleton: a <!DOCTYPE html> declaration, a root <html> element with two children — <head> for unseen metadata like charset, viewport, and title, and <body> for everything visible. Save your file with a .html extension, ideally named index.html, in UTF-8 encoding, and open it in a browser to see it render.

প্রতিটি HTML5 ডকুমেন্টের একই কাঠামো থাকে — <!DOCTYPE html> ঘোষণা, একটি রুট <html> এলিমেন্ট যার দুটি সন্তান থাকে: <head>-এ থাকে অদৃশ্য মেটাডেটা (charset, viewport, title) এবং <body>-এ থাকে দৃশ্যমান সবকিছু। ফাইলটি .html এক্সটেনশনে, সম্ভব হলে index.html নামে, UTF-8 এনকোডিং-এ সেভ করুন এবং ব্রাউজারে খুলে দেখুন।

Next Module → Text Content & Semantic Basics — headings, paragraphs, ও emphasis দিয়ে অর্থবহ কনটেন্ট তৈরি করা।

Previous: How the Web Works: Browsers, Servers & HTML's Role Next: Text Content & Semantic Basics