HTML <span> এলিমেন্টের ব্যবহার পদ্ধতি

HTML <span> এলিমেন্ট কীভাবে ব্যবহার করবেন তা শিখুন।

HTML <span> এলিমেন্টটি একটি জেনেরিক ইনলাইন কন্টেইনার এলিমেন্ট, যা টেক্সট মার্কআপ করার জন্য ব্যবহৃত হয়। এটি প্রায়শই অন্য এলিমেন্টের ভিতরে ব্যবহৃত হয়।

<span> আপনার টেক্সটের একটি অংশকে বাকি অংশ থেকে আলাদা দেখানোর জন্য ব্যবহার করা হয়।

উদাহরণ:

<p>আমার টুপি <span style="color:red">লাল।</span></p>

আপনি <span> ব্যবহার করে একই স্টাইলিং অ্যাট্রিবিউট ভ্যালু শেয়ার করা এলিমেন্টগুলোকে class দিয়ে গ্রুপ করতে পারেন।

মান लीজিয়ে আপনি রেসিপি লিখছেন এবং আপনার টেক্সট ব্লকে প্রতিটি ইনগ্রেডিয়েন্ট ওয়ার্ডকে নির্দিষ্ট রঙ দিয়ে হাইলাইট করতে চান:

<p> আমার সোন্দর্য গার্লিক বাটার বানাতে হয় শুধু চারটি ইনগ্রেডিয়েন্ট, <span class="ingredient">বাটার</span>, <span class="ingredient">রসুন</span>, <span class="ingredient">লবণ</span> এবং <span class="ingredient">কালো মরিচ।</span> </p>

তারপর CSS ক্লাসটি এভাবে তৈরি করতে পারেন:

.ingredient { color: green; }

রিঅসেবল ক্লাস ব্যবহারের স্মার্ট দিক হচ্ছে যদি আপনি কখনো ইনগ্রেডিয়েন্ট ওয়ার্ডের ভিজ্যুয়াল চেঞ্জ করতে চান, তবে শুধু সেই .ingredient ক্লাসের স্টাইল একবার চেঞ্জ করলেই সব <span> এলিমেন্টে তা প্রয়োগ হয়ে যাবে।

উদাহরণস্বরূপ, রঙের বদলে বোল্ড ফন্ট ব্যবহার করতে চাইলে:

.ingredient { font-weight: bold; }

<span> এলিমেন্টের জেনেরিক প্রকৃতির কারণে এটি একটি নন-সিম্যান্টিক এলিমেন্ট। তাই এই এলিমেন্টটি শুধু তখন ব্যবহার করা উচিত যখন অন্য কোনো এলিমেন্ট বেশি অর্থপূর্ণ না হয়।

<span> এলিমেন্ট <div> এলিমেন্টের মতো, কিন্তু মূল পার্থক্য হচ্ছে ডিফল্টভাবে <span> ইনলাইন এলিমেন্ট এবং <div> ব্লক-লেভেল এলিমেন্ট। তবে CSS দিয়ে ডিফল্ট স্টাইলিং ওভাররাইড করা যায়।