HTML Element, HTML Tag এবং CSS Selector: সম্পূর্ণ বাংলা গাইড

OxyzenInstitute -
0

HTML Element, HTML Tag এবং CSS Selector সম্পর্কে জানতে চান? আপনি কি ভাবছেন যে HTML Element, HTML Tag এবং CSS Selector সম্পূর্ণ বাংলাতে শিখবেন? ওয়েব ডেভেলপমেন্ট শেখার সময় একটি সাধারণ বিভ্রান্তি হলো HTML Tag, HTML Element এবং CSS Selector-কে একই জিনিস মনে করা। বাস্তবে এগুলো ভিন্ন ধারণা এবং প্রতিটির কাজ আলাদা।

আজকের আর্টিকেল এ HTML Element, HTML Tag এবং CSS Selector সম্পূর্ণ বাংলা গাইড সম্পর্কে জানবো।

  • HTML ওয়েবপেজের কাঠামো তৈরি করে।
  • HTML Tag ও Element সেই কাঠামোর অংশ।
  • CSS সেই কাঠামোকে ডিজাইন ও স্টাইল দেয়।
  • CSS Selector নির্ধারণ করে কোন HTML Element-এ স্টাইল প্রয়োগ হবে।

এই অংশে HTML Tag ও HTML Element-এর ভিত্তি এবং তাদের বিভিন্ন ধরন বিস্তারিতভাবে আলোচনা করা হয়েছে।

HTML কী?

HTML (HyperText Markup Language) হলো ওয়েবপেজ তৈরির জন্য ব্যবহৃত একটি Markup Language। এটি ব্রাউজারকে জানায় কোন অংশটি শিরোনাম, কোনটি অনুচ্ছেদ, কোনটি ছবি, কোনটি টেবিল বা কোনটি লিংক। HTML কোনো Programming Language নয়; এটি একটি Markup Language।

HTML Tag কী?

HTML Tag হলো বিশেষ চিহ্ন (< >) এর মধ্যে লেখা একটি নির্দেশনা, যা ব্রাউজারকে বলে দেয় কী ধরনের কনটেন্ট প্রদর্শন করতে হবে।

উদাহরণঃ

<h1>শিরোনাম</h1>
<p>এটি একটি অনুচ্ছেদ।</p>
<img src="image.jpg" alt="Example">

এখানেঃ

  • <h1> → Heading Tag
  • <p> → Paragraph Tag
  • <img> → Image Tag

HTML Element কী?

HTML Element হলো একটি সম্পূর্ণ গঠন, যেখানে সাধারণত থাকেঃ

  • Opening Tag
  • Content
  • Closing Tag

উদাহরণঃ

<p>আমি HTML শিখছি।</p>

এখানে সম্পূর্ণ অংশটি একটি Paragraph Element।

আরেকটি উদাহরণঃ

<h2>ওয়েব ডিজাইন</h2>

এটি একটি Heading Element।

HTML Tag ও HTML Element-এর পার্থক্য

বিষয়HTML TagHTML Element
সংজ্ঞানির্দেশনাসম্পূর্ণ গঠন
অংশOpening বা Closing TagOpening Tag + Content + Closing Tag
উদাহরণ<p><p>Hello</p>
কাজElement শুরু বা শেষ করেকনটেন্ট ধারণ করে

HTML Element-এর প্রধান প্রকারভেদ

HTML Element-কে বিভিন্নভাবে ভাগ করা যায়ঃ

  1. Block-Level Element
  2. Inline Element
  3. Empty Element
  4. Container Element
  5. Semantic Element
  6. Non-Semantic Element

Block-Level Element

Block Element সবসময় নতুন লাইনে শুরু হয় এবং সাধারণত উপলব্ধ পুরো প্রস্থ (Width) দখল করে।

বৈশিষ্ট্য

  • নতুন লাইনে শুরু হয়
  • সম্পূর্ণ প্রস্থ ব্যবহার করে
  • অন্য Block Element-এর নিচে অবস্থান কর

উদাহরণ

<div></div>
<h1></h1>
<p></p>
<section></section>
<article></article>
<header></header>
<footer></footer>

সাধারণ Block Element

  • <div>
  • <h1>–<h6>
  • <p>
  • <section>
  • <article>
  • <header>
  • <footer>
  • <nav>
  • <main>
  • <aside>
  • <form>

Inline Element

Inline Element নতুন লাইনে শুরু হয় না এবং যতটুকু জায়গা প্রয়োজন ততটুকুই দখল করে।

বৈশিষ্ট্য

  • একই লাইনে থাকে
  • প্রয়োজনীয় জায়গা ব্যবহার করে
  • সাধারণত টেক্সটের মধ্যে ব্যবহৃত হয়

উদাহরণ

<span>বাংলা</span>
<a href="#">Link</a>
<strong>Important</strong>
<em>Italic</em>

জনপ্রিয় Inline Element

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>
  • <label>
  • <code>
  • <small>
  • <sup>
  • <sub>

Empty Element

যেসব Element-এর কোনো Closing Tag বা Content থাকে না, সেগুলো Empty Element নামে পরিচিত।

উদাহরণ

<br>
<hr>
<img>
<input>
<meta>
<link>

এগুলোকে Void Elements-ও বলা হয়।

Container Element

যেসব Element অন্য Element বা Content ধারণ করতে পারে, সেগুলো Container Element। উদাহরণঃ

<div>
<h2>Title</h2>
<p>Paragraph</p>
</div>

এখানে <div> একটি Container Element।

Semantic Element

Semantic Element নাম থেকেই তার উদ্দেশ্য বোঝা যায়। এগুলো ওয়েবপেজকে অর্থবহ (Meaningful) কাঠামো দেয় এবং SEO ও Accessibility উন্নত করতে সাহায্য করে।

জনপ্রিয় Semantic Element

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>

সুবিধা

  • SEO উন্নত হয়
  • Screen Reader সহজে বুঝতে পারে
  • কোড পড়া সহজ হয়
  • রক্ষণাবেক্ষণ সহজ হয়

Non-Semantic Element

যেসব Element নিজে থেকে কোনো অর্থ প্রকাশ করে না, সেগুলো Non-Semantic Element। উদাহরণঃ

<div>
<span>

এগুলো সাধারণত Layout বা Styling-এর জন্য ব্যবহৃত হয়।

Block বনাম Inline Element

বৈশিষ্ট্যBlock ElementInline Element
নতুন লাইনে শুরু✔✘
সম্পূর্ণ প্রস্থ দখল✔✘
Width/Height নিয়ন্ত্রণ✔সীমিত
অন্য Element ধারণ✔সাধারণত টেক্সট বা ছোট উপাদান

Semantic বনাম Non-Semantic Element

বিষয়SemanticNon-Semantic
অর্থ প্রকাশ করে✔✘
SEO-সহায়ক✔সীমিত
Accessibilityউন্নততুলনামূলক কম
উদাহরণ<article>, <section><div>, <span>

HTML5 এ গুরুত্বপূর্ণ Semantic Tags

  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <aside>
  • <footer>
  • <figure>
  • <figcaption>
  • <time>
  • <details>
  • <summary>

এসব ট্যাগ ব্যবহার করলে ওয়েবপেজের কাঠামো আরও অর্থবহ হয় এবং সার্চ ইঞ্জিন সহজে কনটেন্ট বিশ্লেষণ করতে পারে।

CSS কী?

CSS (Cascading Style Sheets) হলো এমন একটি স্টাইলশিট ভাষা যা HTML দ্বারা তৈরি ওয়েবপেজকে সুন্দর, আকর্ষণীয় এবং ব্যবহারবান্ধব করে তোলে। HTML যেখানে ওয়েবপেজের কাঠামো তৈরি করে, CSS সেখানে রঙ, ফন্ট, মার্জিন, লেআউট, অ্যানিমেশন এবং রেসপন্সিভ ডিজাইন নিয়ন্ত্রণ করে।

আরো পড়ুনঃ ওয়েব ডিজাইনের ক্ষেত্রে W3C স্ট্যান্ডার্ড ও নীতি: সম্পূর্ণ বাংলা গাইড

উদাহরণঃ

<p class="text">স্বাগতম</p>
.text{
color:blue;
font-size:20px;
}

এখানে CSS শুধুমাত্র .text ক্লাসযুক্ত Paragraph-কে স্টাইল করছে।

CSS Selector কী?

CSS Selector হলো এমন একটি নিয়ম বা প্যাটার্ন, যার মাধ্যমে নির্ধারণ করা হয় কোন HTML Element-এর ওপর CSS Style প্রয়োগ হবে। সহজ ভাষায়,

Selector HTML Element খুঁজে বের করে, তারপর CSS সেই Element-এ ডিজাইন প্রয়োগ করে

উদাহরণঃ

p{
color:red;
}

এখানে p একটি Element Selector।

CSS Selector-এর প্রধান প্রকারভেদ

CSS-এ বিভিন্ন ধরনের Selector রয়েছে।

  • Universal Selector
  • Element Selector
  • Class Selector
  • ID Selector
  • Group Selector
  • Attribute Selector
  • Descendant Selector
  • Child Selector
  • Adjacent Sibling Selector
  • General Sibling Selector
  • Pseudo-class
  • Pseudo-element

১. Universal Selector (*)

Universal Selector সকল HTML Element নির্বাচন করে।

উদাহরণঃ

*{
margin:0;
padding:0;
box-sizing:border-box;
}

ব্যবহার

  • CSS Reset
  • Default Margin সরানো
  • Global Styling

২. Element Selector

নির্দিষ্ট HTML Tag নির্বাচন করে।

উদাহরণঃ

h1{
color:green;
}
p{
font-size:18px;
}

এখানে

  • সকল <h1>
  • সকল <p>

স্টাইল হবে।

৩. Class Selector

Class Selector সবচেয়ে বেশি ব্যবহৃত Selector।

এটি Dot (.) দিয়ে শুরু হয়।

HTML

<p class="intro">
Hello
</p>

CSS

.intro{
color:blue;
}

সুবিধা

  • একই Class একাধিক Element-এ ব্যবহার করা যায়।
  • Reusable Code তৈরি করা যায়।

৪. ID Selector

ID Selector Hash (#) দিয়ে শুরু হয়।

HTML

<h1 id="title">
Web Design
</h1>

CSS

#title{
color:red;
}

বৈশিষ্ট্য

  • একটি ID একটি পেজে একবার ব্যবহার করা উচিত।
  • Specificity বেশি।

Class ও ID-এর পার্থক্য

বিষয়ClassID
পুনঃব্যবহার✔✘
Selector.class#id
Specificityকমবেশি
ব্যবহারএকাধিক Elementএকটি নির্দিষ্ট Element

৫. Group Selector

একাধিক Element-এ একই Style প্রয়োগ করতে ব্যবহৃত হয়।

উদাহরণ

h1,h2,h3{
color:blue;
}

৬. Attribute Selector

Attribute অনুযায়ী Element নির্বাচন করা হয়।

উদাহরণঃ

input[type="text"]{
background:#eee;
}

এখানে শুধুমাত্র Text Input নির্বাচন হবে।

Attribute Selector-এর ধরন

a[target]

Target Attribute আছে এমন Link নির্বাচন করবে।

input[type="email"]

শুধু Email Input নির্বাচন করবে।

img[alt]

Alt Attribute আছে এমন Image নির্বাচন করবে।

৭. Descendant Selector

Parent-এর ভেতরের সকল Child নির্বাচন করে।

উদাহরণঃ

div p{
color:red;
}

অর্থাৎ

Div-এর ভেতরের সকল Paragraph।

৮. Child Selector (>)

শুধুমাত্র Direct Child নির্বাচন করে।

উদাহরণঃ

div > p{
color:blue;
}

এটি কেবল Div-এর সরাসরি Child Paragraph নির্বাচন করবে।

Descendant ও Child Selector-এর পার্থক্য

Descendant

div p

সব Paragraph নির্বাচন করবে।

Child

div > p

শুধুমাত্র Direct Child নির্বাচন করবে।

৯. Adjacent Sibling Selector (+)

একটি Element-এর পরপর থাকা Element নির্বাচন করে।

উদাহরণঃ

h2+p{
color:red;
}

অর্থাৎ

h2-এর ঠিক পরের Paragraph।

১০. General Sibling Selector (~)

একই Parent-এর অধীনে থাকা পরবর্তী সকল Sibling নির্বাচন করে।

উদাহরণ

h2~p{
color:green;
}

১১. Pseudo-class

Pseudo-class Element-এর বিশেষ অবস্থাকে নির্দেশ করে।

সবচেয়ে জনপ্রিয় Pseudo-class

Hover

button:hover{
background:red;
}

Focus

input:focus{
border:2px solid blue;
}

Active

a:active{
color:red;
}

Visited

a:visited{
color:purple;
}

First Child

li:first-child{
font-weight:bold;
}

Last Child

li:last-child{
color:red;
}

nth-child()

tr:nth-child(even){
background:#eee;
}

Table-এর জোড় Row নির্বাচন করবে।

১২. Pseudo-element

Pseudo-element Element-এর নির্দিষ্ট অংশ নির্বাচন করে।

::before

h1::before{
content:"★ ";
}

::after

h1::after{
content:" ✔";
}

::first-letter

p::first-letter{
font-size:40px;
}

::first-line

p::first-line{
color:red;
}

::selection

::selection{
background:yellow;
}

CSS Specificity

Specificity নির্ধারণ করে কোন CSS Rule কার্যকর হবে। Priority সাধারণভাবেঃ

Inline Style
↓
ID
↓
Class
↓
Element

উদাহরণ

#title

এর Priority

.title

এর চেয়ে বেশি।

CSS Cascade

CSS-এর পূর্ণরূপই Cascading Style Sheets। Cascade অনুযায়ী

  • পরে লেখা Rule
  • বেশি Specific Rule
  • Inline Style

অগ্রাধিকার পায়।

Selector ব্যবহারের Best Practices

✔ Class বেশি ব্যবহার করুন।

✔ ID শুধুমাত্র Unique Element-এর জন্য ব্যবহার করুন।

✔ অতিরিক্ত Nested Selector এড়িয়ে চলুন।

✔ Semantic HTML ব্যবহার করুন।

✔ Reusable Class তৈরি করুন।

✔ Utility Class ব্যবহার করুন।

✔ Naming Convention অনুসরণ করুন।

সাধারণ ভুল

❌ সবকিছুতে ID ব্যবহার করা।

❌ Universal Selector অতিরিক্ত ব্যবহার করা।

❌ অত্যন্ত বড় Selector Chain তৈরি করা।

❌ অপ্রয়োজনীয় !important ব্যবহার।

❌ Inline Style-এর ওপর নির্ভরশীল হওয়া।

CSS Selector শেখার রোডম্যাপ

CSS Selector ভালোভাবে আয়ত্ত করতে নিচের ধাপগুলো অনুসরণ করতে পারেন।

ধাপ ১ঃ HTML-এর ভিত্তি শক্ত করুন

প্রথমে শিখুনঃ

  • HTML Tag
  • HTML Element
  • Attribute
  • Semantic HTML
  • Form
  • Table
  • List

ধাপ ২ঃ CSS-এর মৌলিক বিষয়

  • CSS Syntax
  • Property
  • Value
  • Color
  • Font
  • Margin
  • Padding
  • Border
  • Background

ধাপ ৩ঃ Selector

শিখুনঃ

  • Universal Selector
  • Element Selector
  • Class Selector
  • ID Selector
  • Group Selector
  • Attribute Selector

ধাপ ৪ঃ Advanced Selector

  • Descendant Selector
  • Child Selector
  • Adjacent Sibling Selector
  • General Sibling Selector

ধাপ ৫ঃ Pseudo

  • :hover
  • :focus
  • :active
  • :visited
  • :nth-child()
  • ::before
  • ::after
  • ::first-letter
  • ::selection

ধাপ ৬ঃ Specificity

  • Inline Style
  • ID
  • Class
  • Element
  • !important ব্যবহারের নিয়ম

বাস্তব প্রকল্পে CSS Selector-এর ব্যবহার

একজন Front-End Developer সাধারণত Selector ব্যবহার করেনঃ

  • Navigation Menu
  • Login Form
  • Registration Form
  • Dashboard
  • Admin Panel
  • Blog Website
  • Portfolio Website
  • E-commerce Website
  • News Portal
  • Landing Page

HTML Element ও CSS Selector-এর সম্পর্ক

HTML Element ও CSS Selector একে অপরের পরিপূরক। উদাহরণঃ

<p class="intro">স্বাগতম</p>
.intro{
color:blue;
font-size:20px;
}

এখানেঃ

  • <p> হলো HTML Element।
  • class="intro" একটি Class Attribute।
  • .intro হলো CSS Class Selector।

Selector HTML Element নির্বাচন করে, তারপর CSS তার ওপর স্টাইল প্রয়োগ করে।

Interview ও Viva-তে গুরুত্বপূর্ণ প্রশ্ন ও উত্তর

১. HTML Tag কী?

HTML Tag হলো Angular Bracket (< >) এর মধ্যে লেখা নির্দেশনা, যা ব্রাউজারকে কনটেন্টের ধরন জানায়।

২. HTML Element কী?

Opening Tag, Content এবং Closing Tag-এর সমন্বয়ে গঠিত সম্পূর্ণ অংশকে HTML Element বলা হয়।

৩. HTML Tag ও HTML Element-এর পার্থক্য কী?

Tag হলো নির্দেশনা, আর Element হলো সম্পূর্ণ গঠন।

আরো পড়ুনঃ UI ও UX ডিজাইন কী? একজন ডিজাইনারের জানা উচিত সবকিছু

৪. Block Element কী?

যে Element নতুন লাইনে শুরু হয় এবং সাধারণত পুরো প্রস্থ দখল করে।

৫. Inline Element কী?

যে Element একই লাইনে থাকে এবং প্রয়োজনীয় জায়গা ব্যবহার করে।

৬. Empty Element কী?

যেসব Element-এর Closing Tag থাকে না, যেমনঃ

  • <img>
  • <br>
  • <hr>
  • <meta>

৭. Semantic Element কী?

যেসব Element নাম থেকেই উদ্দেশ্য বোঝা যায়, যেমনঃ

  • <header>
  • <main>
  • <article>
  • <section>

৮. CSS Selector কী?

CSS-এর মাধ্যমে HTML Element নির্বাচন করার নিয়ম।

৯. Class Selector কী?

Dot (.) দিয়ে শুরু হয় এবং একাধিক Element-এ ব্যবহার করা যায়।

১০. ID Selector কী?

Hash (#) দিয়ে শুরু হয় এবং একটি নির্দিষ্ট Element-এর জন্য ব্যবহৃত হয়।

১১. Universal Selector কী?

* চিহ্ন ব্যবহার করে সব Element নির্বাচন করা হয়।

১২. Descendant Selector কী?

Parent-এর ভেতরের সব Child Element নির্বাচন করে।

১৩. Child Selector কী?

শুধুমাত্র সরাসরি (Direct) Child নির্বাচন করে।

১৪. Pseudo-class কী?

Element-এর বিশেষ অবস্থা নির্দেশ করে, যেমন :hover, :focus, :active।

১৫. Pseudo-element কী?

Element-এর নির্দিষ্ট অংশ নির্বাচন করে, যেমন ::before, ::after।

১৬. CSS Specificity কী?

যখন একাধিক CSS Rule একই Element-এ প্রযোজ্য হয়, তখন কোন Rule কার্যকর হবে তা নির্ধারণ করার নিয়ম।

FAQ

১. HTML Tag কী?

HTML Tag হলো ওয়েবপেজের গঠন নির্ধারণের জন্য ব্যবহৃত মার্কআপ নির্দেশনা।

২. HTML Element কী?

Opening Tag, Content এবং Closing Tag-এর সমন্বয়ে গঠিত সম্পূর্ণ অংশ।

৩. CSS Selector কী?

CSS-এর মাধ্যমে HTML Element নির্বাচন করার নিয়ম।

৪. সবচেয়ে বেশি ব্যবহৃত Selector কোনটি?

Class Selector (.class)।

৫. ID Selector কোথায় ব্যবহার করা উচিত?

একটি নির্দিষ্ট ও ইউনিক Element-এর জন্য।

৬. Universal Selector কী?

সব HTML Element নির্বাচন করে।

৭. Pseudo-class কী?

Element এর বিশেষ অবস্থা নির্দেশ করে।

৮. Pseudo-element কী?

Element-এর নির্দিষ্ট অংশ নির্বাচন করে।

৯. Semantic HTML কেন গুরুত্বপূর্ণ?

এটি SEO, Accessibility এবং কোডের পাঠযোগ্যতা উন্নত করে।

১০. HTML ও CSS-এর মধ্যে সম্পর্ক কী?

HTML ওয়েবপেজের কাঠামো তৈরি করে, আর CSS সেই কাঠামোকে স্টাইল ও ডিজাইন করে।

Tags:
OxyzenInstitute

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন