HTML <span> ট্যাগ আপনাকে একটি ওয়েব পেজ বা প্যারাগ্রাফের অংশে স্টাইল প্রয়োগ করতে দেয়। এটি প্রায়শই প্যারাগ্রাফের টেক্সট স্টাইলাইজ করতে ব্যবহৃত হয়, যেন একটি শব্দের রঙ পরিবর্তন করা। <span> ট্যাগ ডিফল্টভাবে কোনো স্টাইল নেই।
যখন আপনি HTML-এ প্রোগ্রামিং করছেন, আপনি সিদ্ধান্ত নিতে পারেন আপনি আপনার ওয়েব পেজের কিছু নির্দিষ্ট জিনিস স্টাইল করতে চান। উদাহরণস্বরূপ, আপনি একটি বাক্যের নির্দিষ্ট শব্দ বা লিংকগুলির তালিকার একটি নির্দিষ্ট লিংককে দাবিদার করতে চাইতে পারেন।
সেটিই হলো HTML <span> ট্যাগের কাজ। <span> একটি জেনেরিক ইনলাইন কন্টেইনার যা আপনাকে একটি ওয়েব ডকুমেন্টে কন্টেন্ট ফ্রেজ করতে দেয়। <span> ট্যাগ সাধারণত স্টাইলিং উদ্দেশ্যে ব্যবহৃত হয়—বিশেষ করে টেক্সট স্টাইল করার জন্য।
এই টিউটোরিয়াল উদাহরণসহ আলোচনা করবে কীভাবে HTML <span> ব্যবহার করে একটি ওয়েব পেজের এলিমেন্টগুলো স্টাইল করতে হয়। এই টিউটোরিয়াল পড়া শেষ হলে, আপনি HTML <span> ট্যাগ ব্যবহার করার এক্সপার্ট হবেন।
HTML <span> ট্যাগ
HTML <span> ট্যাগ একটি ওয়েব পেজের অংশকে ম্যানিপুলেট করে। এটি প্রায়শই একটি <p> এলিমেন্টের ভেতরে ব্যবহার হয় একটি প্যারাগ্রাফের নির্দিষ্ট অংশে স্টাইল প্রয়োগ করতে। উদাহরণস্বরূপ, আপনি একটি প্যারাগ্রাফে একটি শব্দের রঙ পরিবর্তন করতে <span> ব্যবহার করতে পারেন।
নিজে থেকে, <span> ট্যাগের কোনো ডিফল্ট রেন্ডারিং বা মান নেই। এর মানে যদি আপনি কোনো অ্যাট্রিবিউট ছাড়া ট্যাগটি ব্যবহার করেন, এটি আপনার ওয়েব পেজ কীভাবে রেন্ডার হবে সেটিতে কোনো প্রভাব ফেলবে না।
<span> ট্যাগ প্রায়শই CSS-এ ব্যবহার হয় একটি নির্দিষ্ট স্টাইল একটি নির্দিষ্ট এলিমেন্ট বা এলিমেন্টগুলোর ওপর প্রয়োগ করতে। <span> আপনাকে একসাথে একটি ওয়েব পেজের একাধিক এলিমেন্টে একটি নির্দিষ্ট স্টাইল প্রয়োগ করা সহজ করে দেয়।
HTML <span> সিনট্যাক্স
HTML Span ট্যাগের ওপেনিং (<span>) এবং ক্লোজিং (</span>) উভয় এলিমেন্ট আছে। আমরা <span> ট্যাগ ব্যবহার করার জন্য নিচের সিনট্যাক্স ব্যবহার করতে পারি:
৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।
গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।
<span></span>
HTML <span> ট্যাগের কোনো ট্যাগ-নির্দিষ্ট অ্যাট্রিবিউট নেই। উদাহরণস্বরূপ, <img> ট্যাগের "height" এবং "width" ট্যাগ-নির্দিষ্ট অ্যাট্রিবিউট আছে। <span>-এ এই ধরণের কোনো অ্যাট্রিবিউট নেই কারণ এটি স্টাইলিং-এর জন্য CSS-এ নির্ভর করে। <span> ট্যাগ সকল গ্লোবাল HTML অ্যাট্রিবিউট সাপোর্ট করে।
আপনি <span> ট্যাগকে <div>-এর সাথে অনুরূপ ভাবতে পারেন যেহেতু <span>-এর নিজস্ব কোনো নির্দিষ্ট স্টাইল নেই। কিন্তু, <div> ট্যাগগুলো টেক্সটের সেকশন এবং ব্লক নির্ধারণ করতে ব্যবহৃত হয় কারণ <div> একটি ব্লক এলিমেন্ট। <span> একটি ডকুমেন্টের নির্দিষ্ট অংশে স্টাইল প্রয়োগ করতে ব্যবহৃত হয়, যেন একটি প্যারাগ্রাফ।
নিচের সেকশনে, আমরা কিছু উদাহরণের মাধ্যমে <span> ট্যাগ HTML-এ কীভাবে কাজ করে সেটি ইলাস্ট্রেট করব।
<span> ট্যাগ HTML উদাহরণ
চলুন <span> ট্যাগ ব্যবহার করে HTML-এ ইনলাইন এলিমেন্ট স্টাইল করার কিছু কোড উদাহরণ দেখা যাক। আমাদের প্রথম উদাহরণ <span> ট্যাগ একটি প্যারাগ্রাফে ব্যবহার করবে; দ্বিতীয় উদাহরণ একটি লিস্টে ব্যবহার করবে।
প্যারাগ্রাফে <span> HTML
মান লেন আমরা একটি স্থানীয় বেকারি—Pringle and Sons Bakery-এর জন্য একটি ওয়েব পেজ ডিজাইন করছি। এই ওয়েব পেজ বেকারির ইতিহাস বর্ণনা করবে। বেকারির মালিক, মিস্টার প্রিংগল, আমাদের কয়েকটি মূল তথ্য লাল টেক্সট দিয়ে দাবিদার করতে বলেছেন।
আমরা এই কাজটি সম্পন্ন করতে নিচের কোড ব্যবহার করতে পারি:
index.html <p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p> styles.css .redText { color: red; }
আমাদের কোড রিটার্ন করে:
আমাদের উদাহরণে, আমরা "delicious baked goods" এবং "thousands" শব্দগুলোক দাবিদার করেছি। মিস্টার প্রিংগল আমাদের এগুলো গুরুত্বপূর্ণ বলেছেন, তাই আমরা প্রোগ্রামকে সেগুলো লালে দেখানোর নির্দেশ দিয়েছি।
আমরা <p> HTML ট্যাগের মধ্যে এনক্লোজড একটি টেক্সট স্ট্রিং নির্ধারণ করেছি। এই টেক্সট Pringle and Sons Bakery-এর ইতিহাস বর্ণনা করে। তারপর, আমরা যেসব শব্দ লালে দেখাতে চাই সেগুলো <span> ট্যাগের মধ্যে এনক্লোজ করেছি।
আমাদের CSS ফাইলে, আমরা নির্দিষ্ট করেছি যে redText ক্লাস বসানো যেকোনো এলিমেন্টের রঙ লাল হবে। এটি আমাদের <span class=“redText”> ট্যাগ ব্যবহার করলে আমাদের টেক্সটের রঙ লাল করতে দেয়।
<span> ট্যাগ এই কেসে উপকারী কারণ আমরা শুধু আমাদের টেক্সটের নির্দিষ্ট শব্দগুলো দাবিদার করতে চেয়েছিলাম। আমরা <p> ট্যাগে সরাসরি রেড টেক্সট স্টাইলিং প্রয়োগ করতে পারতাম। কিন্তু, এতে পুরো প্যারাগ্রাফ লাল টেক্সট হয়ে যেত।
লিস্টে <span> HTML
মান লেন Pringle and Sons Bakery আমাদের তাদের ওয়েবসাইটে তাদের সোশ্যাল মিডিয়া পেজের লিংক সহ একটি লিস্ট যোগ করতে বলেছে।
বেকারির মতে, তাদের টুইটার এবং ফেসবুক পেজের লিংকগুলো বিশেষভাবে গুরুত্বপূর্ণ কারণ টিম সেগুলোতে সবচেয়ে বেশি সক্রিয়। তাই, সে লিংকগুলোকে লাইট ব্লু টেক্সটে হাইলাইট করতে বলেছেন।
আমরা এই কাজটি সম্পন্ন করতে নিচের কোড ব্যবহার করতে পারি:
index.html <ul> <li><span class="blue"><a href="twitter.com">Twitter</a></span></li> <li><span class="blue"><a href="facebook.com">Facebook</a></span></li> <li><a href="instagram.com">Instagram</a></li> </ul> styles.css .blue { background: lightblue; }
আমাদের কোড রিটার্ন করে:
আমাদের HTML কোডে, আমরা <ul> ট্যাগ ব্যবহার করে একটি অর্ডারহীন লিস্ট তৈরি করেছি। এই লিস্টে তিনটি আইটেম আছে, প্রতিটি <li> ট্যাগের মধ্যে।
টুইটার এবং ফেসবুকের লিস্ট আইটেমগুলো HTML Span ট্যাগ (<span class=“blue”> এবং </span>) এর মধ্যে এনক্লোজড। প্রতিটি লিস্ট আইটেমের ওপেনিং span ট্যাগ একটি class অ্যাট্রিবিউট নির্দিষ্ট করে। class অ্যাট্রিবিউটের মান "blue"।
আমরা .blue নামে একটি স্টাইল নির্ধারণ করেছি যা যেকোনো এলিমেন্টে প্রয়োগ করলে তার ব্যাকগ্রাউন্ড রঙ লাইট ব্লু করে দেয়। এই কারণে আমাদের HTML কোডে CSS ক্লাস .blue বিশিষ্ট সকল লিংকের ব্যাকগ্রাউন্ড রঙ লাইট ব্লু হয়ে গেছে।
আমাদের ইনস্টাগ্রাম লিংকটির সাথে যুক্ত ব্যাকগ্রাউন্ড রঙ পরিবর্তন হয়নি কারণ আমরা সেই লিংকের টেক্সটকে <span> ট্যাগের মধ্যে এনক্লোজ করিনি।
উপসংহার
HTML <span> ট্যাগ একটি জেনেরিক কন্টেইনার যা একটি HTML পেজের নির্দিষ্ট এলিমেন্টগুলোর ওপর স্টাইল প্রয়োগ করতে ব্যবহৃত হয়। ডিফল্টভাবে, <span> ট্যাগ কিছুই করে না, কিন্তু এটি CSS-এর সাথে কম্বাইন করা যেতে পারে এলিমেন্টগুলোর ওপর স্টাইল প্রয়োগ করতে।
একটি চ্যালেঞ্জ হিসেবে, একটি <span> ট্যাগ ডিফাইন করুন যা একটি বাক্যের একটি শব্দকে সব ক্যাপিটাল লেটারে দেখাবে। আপনাকে আপনার <span> ট্যাগের সাথে CSS রুল ব্যবহার করে টেক্সটকে uppercase-এ ট্রান্সফর্ম করতে হবে।
এই টিউটোরিয়াল উদাহরণসহ আলোচনা করেছে কীভাবে আপনি আপনার কোডে HTML <span> ট্যাগ ব্যবহার করতে পারেন। আপনি এখন একজন পেশাদার ওয়েব ডেভেলপারের মতো <span> ট্যাগ ব্যবহার করতে পারবেন!
HTML শিখার গাইডেন্স এবং সাপোর্টের জন্য আমাদের পূর্ণ How to Learn HTML গাইড পড়ুন।
