HTML-এ আপনার টেক্সট ফরম্যাট করার অনেক উপায় আছে যাতে কোনো কিছুর ওপর মনোযোগ আকর্ষণ করা যায়। এই পোস্টে, আমরা আলোচনা করব কীভাবে HTML-এ আপনার টেক্সট ফরম্যাট করবেন যাতে সেটি বোল্ড হয়, ইট্যালিক হয়, বা আন্ডারলাইন হয়। আপনি চটপট ফরম্যাটিং প্রো হবেন!
বোল্ড
HTML5-এর আগে HTML-এ টেক্সটকে বোল্ড করার পদ্ধতি ছিল টেক্সটকে <b> ট্যাগ দিয়ে ঘেরা দেওয়া:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is <b>bold</b></p> <script src="script.js"></script> </body> </html>
যখন HTML5 স্ট্যান্ডার্ড রিলিজ হয়েছে, টেক্সট বোল্ড করার প্রিয় পদ্ধতি পরিবর্তন হয়ে <strong> ট্যাগ ব্যবহার করার দিকে যাওয়া:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is also <strong>bold</strong></p> <script src="script.js"></script> </body> </html>
<b> এবং <strong> এলিমেন্টের একমাত্র পার্থক্য হল সিম্যান্টিক্স। স্ক্রিন রিডাররা <strong> ট্যাগ দেখলে টেক্সটটি পড়ার সময় এক্সপ্লিসিটলি আরও জোর দেয়। <b> সেটি অনুমতি দেয় না।
ইট্যালিক
বোল্ড-এর মতোই, ইট্যালিকাইজড টেক্সট তৈরি করার জন্য আমরা জানি দুটি ভিন্ন স্ট্যান্ডার্ড। HTML5 স্ট্যান্ডার্ডের আগে, ইট্যালিক টেক্সট <i> ট্যাগে ক্যাপসুলেট করে তৈরি করা হতো।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>This text is in <i>italics</i></p> <script src="script.js"></script> </body> </html>
HTML5 স্ট্যান্ডার্ড হলে, <i> ট্যাগের জায়গায় আরও সিম্যান্টিক <em> ট্যাগ এসে পড়েছে। “em” হল emphasis এর সংক্ষিপ্ত। <em> ট্যাগ একটি স্ক্রিন রিডারকে সিগন্যাল দেয় টেক্সটকে আরও জোর দিয়ে পড়াতে, যাতে একজন ইউজার নরমাল টেক্সট এবং জোরদার টেক্সটের মধ্যে পার্থক্য করতে পারে।
আন্ডারলাইন
HTML আন্ডারলাইনড টেক্সট সবচেয়ে اکثر মিসস্পেলড ওয়ার্ড ইন্ডিকেট করতে ব্যবহৃত হয়। এটিকে এমন জায়গায় ব্যবহার করবেন না যেখানে সেটি হাইপারলিংকের সাথে গুলিয়ে যেতে পারে। আপনার টেক্সটকে <u> ট্যাগ দিয়ে মার্কআপ করুন ফরম্যাটিং-এর জন্য এবং তারপর CSS ব্যবহার করুন আন্ডারলাইন স্টাইল টাইপ ইন্ডিকেট করতে।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> p u { text-decoration: underline red wavy; } </style> </head> <body> <p>This is a <u>mispelled</u> word</p> </body> </html>
উপসংহার
এই আর্টিকেলে আমরা HTML-এ অনেক ফরম্যাটিং ট্যাগ নিয়ে আলোচনা করেছি। <strong> এবং <em>-এর কেসে, আমরা সেগুলো ব্যবহার করি সেম্যান্টিক্স প্রয়োগ করতে उन এলিমেন্টগুলোর ওপর যেগুলো স্ক্রিনে বোল্ড এবং ইট্যালিক দেখে। একটি স্ক্রিন রিডারে, সেই ওয়ার্ডগুলো ইম্পহাসাইজড হয়। <u> ট্যাগ দিয়ে, আমরা টেক্সট আন্ডারলাইন করতে পারি। এই তিনটির বাইরে আরও অনেক ফরম্যাটিং অপশন আছে।
