📘 HTML টেক্সট ট্যাগ ও অ্যাট্রিবিউট গাইড
নির্দেশনা: ট্যাগের কোড এবং ব্যাখ্যা দেখতে টেবিলের **আউটপুট/প্র্যাকটিস** কলামের নীল-বর্ডারযুক্ত অংশের উপর ক্লিক করুন।
টেক্সট সম্পর্কিত ট্যাগ (ব্যবহার, কোড ও আউটপুট)
| ট্যাগ | কোড/ব্যবহার | ব্যাখ্যা (ক্লিক করুন) |
|---|---|---|
| ✅ প্রধান শিরোনাম ও অনুচ্ছেদ (Heading & Paragraph) | ||
| <h1> to <h6> (Heading) | <h2>শিরোনাম</h2> |
শিরোনাম |
| <p> (Paragraph / অনুচ্ছেদ) | <p>এটি একটি অনুচ্ছেদ।</p> |
এটি একটি অনুচ্ছেদ। |
| <br> (Line Break) | লাইন ১<br>লাইন ২ |
লাইন ১ লাইন ২ |
| <hr> (Horizontal Rule) | বিভাগ ১<hr>বিভাগ ২ |
বিভাগ ১ বিভাগ ২ |
| <span> (Inline Container) | <span style="color:red">লাল টেক্সট</span> |
লাল টেক্সট |
| <div> (Division) | <div>ব্লক কনটেন্ট</div> |
ব্লক কনটেন্ট
|
| ✅ টেক্সট স্টাইলিং ট্যাগ (অর্থবোধক) | ||
| <strong> (Strong Importance) | <strong>জোরালো টেক্সট</strong> |
জোরালো টেক্সট |
| <em> (Emphasis) | <em>গুরুত্বপূর্ণ</em> |
গুরুত্বপূর্ণ |
| <mark> (Marked/Highlight) | <mark>হাইলাইট করা লেখা</mark> |
হাইলাইট করা লেখা |
| <small> (Small Text) | <small>ছোট ফন্ট</small> |
ছোট ফন্ট |
| <sub> (Subscript) | H<sub>2</sub>O |
H2O |
| <sup> (Superscript) | x<sup>2</sup> |
x2 |
| <ins> (Inserted Text) | <ins>নতুন টেক্সট</ins> |
নতুন টেক্সট |
| <del> (Deleted Text) | <del>পুরাতন টেক্সট</del> |
|
| <abbr> (Abbreviation) | <abbr title="Hypertext Markup Language">HTML</abbr> |
HTML |
| <dfn> (Definition) | <dfn>অর্থ</dfn> |
অর্থ |
| <cite> (Citation / উৎস) | <cite>রবীন্দ্রনাথ ঠাকুর</cite> |
রবীন্দ্রনাথ ঠাকুর |
| <address> (Address / ঠিকানা) | <address>যোগাযোগের ঠিকানা</address> |
যোগাযোগের ঠিকানা |
| <q> (Short Quotation) | <q>ছোট উদ্ধৃতি</q> |
ছোট উদ্ধৃতি |
| <blockquote> (Block Quotation) | <blockquote>বড় উদ্ধৃতি অংশ</blockquote> |
বড় উদ্ধৃতি অংশ |
| <time> (Time) | <time datetime="2025-01-01">আজকের তারিখ</time> |
|
| <bdo> (Bidirectional Override) | <bdo dir="rtl">রিভার্স টেক্সট</bdo> |
রিভার্স টেক্সট |
| <bdi> (Bidirectional Isolate) | <bdi>مُحَمَّد</bdi> |
مُحَمَّد |
| ✅ দেখানোর উদ্দেশ্যে ট্যাগ (Presentation) | ||
| <b> (Bold) | <b>বোল্ড</b> |
বোল্ড |
| <i> (Italic) | <i>ইটালিক</i> |
ইটালিক |
| <u> (Underline) | <u>আন্ডারলাইন</u> |
আন্ডারলাইন |
| <s> (Strikethrough) | <s>কাটা লেখা</s> |
|
| ✅ কোড / ইনপুট / আউটপুট (Code & Output) | ||
| <code> (Code) | <code>console.log('Hello')</code> |
console.log('Hello')
|
| <kbd> (Keyboard Input) | <kbd>Ctrl + S</kbd> |
Ctrl + S |
| <samp> (Sample Output) | <samp>Output message</samp> |
Output message |
| <var> (Variable) | <var>x</var> + 2 |
x + 2 |
| <pre> (Preformatted Text) | <pre>Formatted
Text</pre> |
Formatted Text |
| ❌ পুরাতন/বাতিল ট্যাগ (Deprecated - এড়িয়ে চলুন) | ||
| <font> (Font Style) | <font color="red">বাতিল লেখা</font> |
বাতিল লেখা |
| <center> (Center Alignment) | <center>মাঝখানে লেখা</center> |
মাঝখানে লেখা |
| <big> (Bigger Text) | <big>বড় লেখা</big> |
বড় লেখা |
| <tt> (Teletype Text) | <tt>টাইপরাইটার টেক্সট</tt> |
টাইপরাইটার টেক্সট |
⚠️ **গুরুত্বপূর্ণ সতর্কতা:** উপরে **"❌ পুরাতন/বাতিল ট্যাগ"** ক্যাটাগরির ট্যাগগুলি এখন আর আধুনিক **HTML5**-এ ব্যবহারযোগ্য নয় (**Deprecated**), কারণ এদের পরিবর্তে **CSS** ব্যবহারের মাধ্যমে শৈলী (Styling) নির্ধারণ করা উচিত। তবে শিক্ষার উদ্দেশ্যে এই ট্যাগগুলো জানার প্রয়োজন রয়েছে।
🧩 অ্যাট্রিবিউটসমূহ (Attributes)
| অ্যাট্রিবিউট | কোড/ব্যবহার | ব্যাখ্যা (ক্লিক করুন) |
|---|---|---|
| ✅ গ্লোবাল অ্যাট্রিবিউট (সব ট্যাগে প্রযোজ্য) | ||
| `class` | <p class="main-text">টেক্সট</p> |
CSS ক্লাস |
| `id` | <div id="unique-section">বিভাগ</div> |
ইউনিক আইডি |
| `style` | <p style="color: blue;">নীল লেখা</p> |
ইনলাইন স্টাইল |
| `title` | <abbr title="HTML">হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ</abbr> |
টুলটিপ |
| `lang` | <html lang="bn">...</html> |
ভাষা নির্ধারণ |
| `dir` | <p dir="rtl">ডান থেকে বাম</p> |
লেখা দিক (ltr / rtl) |
| `hidden` | <p hidden>লুকানো টেক্সট</p> |
উপাদান লুকানো |
| `tabindex` | <button tabindex="1">বাটন</button> |
কী-বোর্ড ন্যাভিগেশন নিয়ন্ত্রণ |
| `draggable` | <div draggable="true">ড্র্যাগযোগ্য</div> |
এলিমেন্ট ড্র্যাগযোগ্য কিনা |
| `contenteditable` | <p contenteditable="true">এডিটযোগ্য</p> |
ইউজার ইনপুট এডিটযোগ্য কিনা |
| `data-*` (Custom) | <p data-user-id="123">ইউজার টেক্সট</p> |
কাস্টম ডেটা |
| `translate` | <span translate="no">Brand Name</span> |
অনুবাদ নিয়ন্ত্রণ |
| `spellcheck` | <p spellcheck="true">ভুল বানানের টেক্সট</p> |
বানান পরীক্ষা |
| `accesskey` | <a accesskey="h" href="#">হোম</a> |
কীবোর্ড শর্টকাট |
| `aria-*` (Accessibility) | <div role="alert" aria-live="assertive">ত্রুটির মেসেজ</div> |
অ্যাক্সেসিবিলিটি (ARIA) |
| ✅ বিশেষ অ্যাট্রিবিউট (নির্দিষ্ট ট্যাগের জন্য) | ||
| `cite` | <blockquote cite="[উৎস URL]">...</blockquote> |
উৎস URL |
| `datetime` | <time datetime="2025-01-01">...</time> |
তারিখ/সময় নির্ধারণ |