10/01/2026

HTML Basic — Complete Beginner Guide

Bangla Explanation + English Code

Chapter 0: HTML কী এবং কেন দরকার?

HTML (HyperText Markup Language) হলো ওয়েব পেজের structure তৈরি করার ভাষা।

• HTML বলে দেয় কোনটা heading
• কোনটা paragraph
• কোনটা image, link বা form

HTML design করে না, logic চালায় না — শুধু structure বানায়।

Chapter 1: HTML File & Browser কীভাবে কাজ করে

HTML ফাইলের extension হয় .html

index.html
about.html
contact.html

Browser HTML ফাইল পড়ে, tag বুঝে screen-এ দেখায়। Browser আসলে HTML interpreter হিসেবে কাজ করে।

Tools We Will Use (VS Code & Browser)

এই HTML শেখার journey-তে আমি Visual Studio Code (VS Code) ব্যবহার করছি code লেখার জন্য এবং Google Chrome ব্যবহার করছি browser হিসেবে।
কেন VS Code? VS Code lightweight, free, এবং beginner-দের জন্য খুব সহজ। এখানে code লেখা, save করা এবং পরে CSS / JavaScript শেখা—সবকিছুই smoothly করা যায়।
কেন Google Chrome? Google Chrome সবচেয়ে বেশি ব্যবহৃত browser এবং এতে Developer Tools (Inspect, Console) আছে, যা future-এ শেখার সময় অনেক help করবে।
আপনি চাইলে অন্য code editor বা browser ব্যবহার করতে পারেন, কিন্তু এই tutorial-এ আমি VS Code + Google Chrome follow করব যেন beginner-দের জন্য সবকিছু clear থাকে।

Chapter 2: HTML Document Structure, Tag & Attribute

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    Hello World
  </body>
</html>

Structure Explanation:

• <!DOCTYPE html> → HTML5 ঘোষণা
• <html> → পুরো document-এর root
• <head> → page information
• <body> → visible content

HTML Tag কী?

Tag হলো HTML-এর building block। Browser tag দেখে বুঝে নেয় content-এর ধরন।

<p>This is a paragraph</p>

Attribute কী?

Attribute tag-কে extra information দেয়।

<a href="https://osila.org">Visit Osila</a>

এখানে href হলো attribute এবং URL হলো তার value।

Chapter 3: Text, Headings, SEO & Accessibility

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>

SEO & Accessibility কেন গুরুত্বপূর্ণ?
Search engine এবং screen reader দুটোই heading structure দেখে content বোঝে। সঠিক heading ব্যবহার করলে Google ranking এবং visually impaired user — দুজনই উপকৃত হয়।

Paragraph & Text Block

<p>This is a paragraph.</p>

Text block মানে এমন লেখা যা নিজে একটা আলাদা জায়গা নেয়। p, h1, div — এগুলো block-level text তৈরি করে।

Text Emphasis

<strong>Important</strong>
<em>Emphasis</em>
<small>Note</small>

Chapter 4: Links, Images & Lists

Link

<a href="https://osila.org">Visit Osila</a>

Navigation এবং external page connect করতে ব্যবহার হয়।

Image

<img src="image.jpg" alt="Sample image">

Lists

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

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
</ol>

HTML-এ ul এবং ol দুটোই list তৈরি করার tag। পার্থক্য শুধু—একটা (ul) বুলেট list, আরেকটা (ol) number/sequence list।
li সবসময় ul / ol এর ভিতরে | প্রতিটা item = একটী li

Chapter 5: Grouping, Block & Inline Elements

div

<div>
  <h2>Title</h2>
  <p>Description</p>
</div>

div হলো container, যা layout তৈরির base হিসেবে কাজ করে।

span

<p>This is <span>important</span> text.</p>

Block element কী?

• সবসময় নতুন লাইন থেকে শুরু হয়
• পুরো width (100%) নেয়
• height / width / margin / padding কাজ করে
• সাধারণ Block tag
  div, p, h1–h6, section, article, header, footer, ul, ol, li

Inline element কী?

• একই লাইনেই থাকে
• শুধুমাত্র প্রয়োজনীয় width নেয়
• height / width / margin / padding কাজ করে না
• সাধারণ Inline tag
  span, a, strong, em, img, input

Chapter 6: Tables (Basic)

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>20</td>
  </tr>
</table>

tr = table row
th = table heading
td = table data

Chapter 7: Forms & Inputs

<form>
  <label>Name</label>
  <input type="text" placeholder="Enter your name">

  <label>Email</label>
  <input type="email">

  <label>Password</label>
  <input type="password" placeholder="Enter password">

  <button>Submit</button>
</form>

form → input container
input → user data নেয়
password → লেখা hide করে
placeholder → hint text
label → accessibility friendly
button → submit action

Chapter 8: Semantic HTML

<header>Header</header>
<nav>Navigation</nav>

<main>
  <section>
    <article>Main content</article>
  </section>

  <aside>Sidebar</aside>
</main>

<footer>Footer</footer>

Semantic tag মানে content-এর অর্থ পরিষ্কার করা। Benefit: বিভিন্ন উপাদানের অর্থ পরিষ্কার করে, SEO এবং accessibility-এর জন্য সহায়ক।

• header → page header
• nav → navigation links
• main → main content area
• section → related content group
• article → independent content piece
• aside → sidebar / extra info
• footer → page footer

Chapter 9: Common Beginner Mistakes

• Tag close না করা — Browser ভুল output দেখাতে পারে, layout ভেঙে যায়।
• Wrong nesting — structure ভেঙে যায় ( Nesting মানে হলো — একটা HTML tag-এর ভিতরে আরেকটা tag সঠিকভাবে বসানো )
• Image path ভুল — ছবি না দেখালে ৯০% সময় path সমস্যা।
• একাধিক h1 ব্যবহার — SEO সমস্যা ( প্রতিটি পৃষ্ঠার জন্য )
• div দিয়ে সব করা — Semantic tag ব্যবহার না করলে future সমস্যা হয়।

What’s Next?

আপনি এখন HTML basic complete করেছেন। Next step → mid-level-html then CSS Basic