1. Bold/Strong (B/Strong):
-
<b>
: একটি টেক্সটকে ভিজুয়ালভাবে বোল্ড করতে ব্যবহার করা হয়। এটি শুধুমাত্র ডিজাইন-উপযোগী।- যেখানে ব্যবহার করবেন: যেখানে শুধু বোল্ড স্টাইল দরকার, অর্থাৎ এর অর্থের গুরুত্ব নেই।
- উদাহরণ:
<b>This text is bold but not emphasized.</b>
-
<strong>
: বোল্ড করার পাশাপাশি পাঠ্যটির গুরুত্ব বা গুরুত্ব বোঝায়।- যেখানে ব্যবহার করবেন: যেখানে কনটেন্টকে গুরুত্ব দিয়ে বোঝাতে চান।
- উদাহরণ:
<strong>Important: This needs attention!</strong>
-
বেস্ট প্রাকটিস: যখনই গুরুত্ব বোঝানোর প্রয়োজন,
<strong>
ব্যবহার করুন। শুধুমাত্র ডিজাইন ক্ষেত্রে<b>
।
2. Emphasis (Em/I):
-
<i>
: ভিজুয়ালভাবে একটি টেক্সটকে ইটালিক স্টাইল দেয়।- যেখানে ব্যবহার করবেন: স্টাইল বা ভাষার কারণে ইটালিক করতে চাইলে।
- উদাহরণ:
<i>Foreign words or technical terms.</i>
-
<em>
: টেক্সটকে ইটালিক করার পাশাপাশি গুরুত্ব বোঝায়।- যেখানে ব্যবহার করবেন: যেখানে গুরুত্ব দেওয়ার জন্য ইটালিক করা প্রয়োজন।
- উদাহরণ:
<em>This is important to understand.</em>
-
বেস্ট প্রাকটিস: কন্টেক্সট বুঝে ব্যবহার করুন। গুরুত্ব বোঝানোর জন্য
<em>
এবং শুধুমাত্র স্টাইলের জন্য<i>
।
3. Underline (U):
<u>
: একটি টেক্সটকে আন্ডারলাইন করতে ব্যবহৃত হয়।- উদাহরণ:
<u>This text is underlined.</u>
- উদাহরণ:
4. Break (BR) / Horizontal Rule (HR):
-
<br>
: একটি লাইন ব্রেক যোগ করতে ব্যবহার করা হয়।- যেখানে ব্যবহার করবেন: যখন একটি লাইন ভাঙতে চান, যেমন ঠিকানা বা কবিতায়।
- উদাহরণ:
Line 1<br>Line 2
-
<hr>
: একটি অনুভূমিক লাইন যোগ করতে ব্যবহার করা হয়।- যেখানে ব্যবহার করবেন: কন্টেন্ট আলাদা করতে।
- উদাহরণ:
<hr>
5. Display Properties:
Display Properties (Block, Inline, Inline-block):
HTML এর Display Properties একটি এলিমেন্টের পেজে কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে। এগুলো সহজভাবে বোঝানো হলো:
1. Block Element:
-
বর্ণনা:
- একটি ব্লক এলিমেন্ট পুরো লাইনের জায়গা নেয়।
- এটি স্বাভাবিকভাবেই একটি নতুন লাইনে শুরু হয়।
- এর ভেতরে height, width, margin, এবং padding সহজেই সেট করা যায়।
-
উদাহরণ:
<div>
,<p>
,<h1>
,<section>
,<article>
। -
কোথায় ব্যবহার করবেন: যেখানে কন্টেন্টকে পৃথক ব্লকে সাজাতে চান।
-
উদাহরণ:
<div style="border: 1px solid black;"> This is a block element. </div>
2. Inline Element:
-
বর্ণনা:
- একটি Inline এলিমেন্ট শুধুমাত্র নিজের কন্টেন্টের চারপাশে জায়গা নেয়।
- এটি নতুন লাইনে শুরু হয় না।
- Height এবং Width সরাসরি সেট করা যায় না।
-
উদাহরণ:
<span>
,<a>
,<b>
,<i>
,<strong>
। -
কোথায় ব্যবহার করবেন: যেখানে লাইন ভাঙা ছাড়াই কোনো কন্টেন্টে স্টাইল বা লিঙ্ক যোগ করতে চান।
-
উদাহরণ:
<p>This is a <span style="color: red;">highlighted</span> text.</p>
3. Inline-block Element:
-
বর্ণনা:
- Inline-এর মতোই, এটি লাইন ভাঙে না।
- কিন্তু ব্লকের মতো Height, Width, Margin, এবং Padding নিয়ন্ত্রণ করা যায়।
-
উদাহরণ:
<button>
,<img>
,<input>
। -
কোথায় ব্যবহার করবেন: যেখানে ইনলাইন ফর্ম্যাটে থেকেও কাস্টম সাইজিং প্রয়োজন।
-
উদাহরণ:
<img src="image.jpg" style="display: inline-block; width: 100px; height: 100px;">
বেস্ট প্রাকটিস:
-
Block Elements:
- যখন লেআউট বা বিভাগ তৈরি করবেন, যেমন হেডার, ফুটার, আর্টিকেল।
- উদাহরণ:
<div>
বা<section>
ব্যবহার।
-
Inline Elements:
- যখন ছোট ছোট অংশে স্টাইল বা কার্যকরী ফিচার যোগ করবেন, যেমন লিঙ্ক বা স্টাইল করা টেক্সট।
- উদাহরণ:
<span>
বা<a>
।
-
Inline-block Elements:
- যখন ইনলাইন এলিমেন্টের মতো হলেও Height এবং Width নিয়ন্ত্রণ করতে হবে।
- উদাহরণ:
<button>
বা ইমেজের ক্ষেত্রে<img>
।
6. Link / Anchor Tag / Href / Target:
<a>
ট্যাগ: লিঙ্ক তৈরি করতে ব্যবহার করা হয়।href
: লিঙ্কের গন্তব্য।target
: নতুন বা একই উইন্ডোতে লিঙ্ক খোলা নিয়ন্ত্রণ করে।_blank
: নতুন ট্যাবে খোলে।_self
: একই ট্যাবে খোলে (ডিফল্ট)।_parent
: প্যারেন্ট ফ্রেমে খোলে।_top
: পুরো উইন্ডোতে খোলে।
7. Onpage Link / Menu Link:
-
Onpage Link: একই পৃষ্ঠার একটি অংশে লিঙ্ক করতে ব্যবহার হয়।
- উদাহরণ:
<a href="#section1">Go to Section 1</a> <div id="section1">This is Section 1</div>
- উদাহরণ:
-
Menu Link: মেনুতে লিঙ্ক তৈরি করতে ব্যবহার হয়।
- উদাহরণ:
<nav> <a href="home.html">Home</a> <a href="about.html">About</a> </nav>
- উদাহরণ:
8. Image Tag & Attributes:
-
<img>
: ইমেজ যোগ করতে ব্যবহৃত হয়।src
: ইমেজের সোর্স।alt
: ইমেজ লোড না হলে বিকল্প টেক্সট।height
ওwidth
: ইমেজের উচ্চতা ও প্রস্থ নিয়ন্ত্রণ।
-
বেস্ট প্রাকটিস:
alt
ট্যাগ ব্যবহার করুন অ্যাক্সেসিবিলিটির জন্য।- ফাইলনামে স্পেস ব্যবহার করবেন না;
-
বা_
ব্যবহার করুন।
9. Multimedia (Video/Audio):
<video>
ও<audio>
: ভিডিও ও অডিও যোগ করতে ব্যবহার হয়।- Attributes:
controls
: প্লে, পজ করার অপশন।autoplay
: অটোমেটিক প্লে।muted
: সাইলেন্ট শুরু হয়।preload
: লোডিং অপশন (auto, metadata, none)।
- Attributes:
10. Importance of Title Tag:
- টাইটেল ট্যাগ এসইও-র জন্য গুরুত্বপূর্ণ।
- উপযোগিতা: সার্চ ইঞ্জিন এবং ইউজারদের জন্য কন্টেন্টের সারাংশ।
11. Span এবং Title Tag:
-
<span>
: Inline element, সাধারণত টেক্সট স্টাইলিংয়ের জন্য।- উদাহরণ:
<span style="color: red;">Red Text</span>
- উদাহরণ:
-
Title Tag:
- টুলটিপ হিসেবে কাজ করে এবং কনটেন্টের বর্ণনা দেয়।
- উদাহরণ:
<img src="image.jpg" title="Description of the image">