Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Roundups
Code

১০ টি অজানা এইচটিএমএল ট্যাগ যা আপনার জানা উচিত

by
Length:ShortLanguages:

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

ওয়েব ডেভেলপারদের আজকালকার দিনে অনেক কিছু জানতে হয় এবং বিভিন্ন ল্যাঙ্গুয়েজ সাথে নিয়ে কাজ করতে হয়। এর ফলে একটা ল্যাঙ্গুয়েজের সবকিছু শেখা তাদের জন্য সহজ হয়না এবং খুব সহজেই অনেক গুরুত্বপূর্ণ কিছু ট্যাগ তাদের অজানা রয়ে যায়।

দুর্ভাগ্যজনকভাবে আজকাল আমরা এসব অস্পষ্ট ট্যাগগুলোর পূর্ণ ব্যবহার করিনা। কিন্তু এখনও খুব দেরী হয়ে যায় নি, তাই আমরা ইচ্ছে করলে এই সমস্ত অল্প ব্যবহৃত ট্যাগসমূহ দিয়ে কোড লেখা শুরু করতে পারি।

এখানে HTML এর সবথেকে অল্প ব্যবহৃত আর অনেকেই ভুল বুঝে থাকেন এমন দশটি ট্যাগ নিয়ে আলোচনা করা হলো। এই ট্যাগগুলো অল্প ব্যবহৃত হলেও নির্দিষ্ট পরিস্থিতিতে এরা যথেষ্ট কার্যকরী ।

১। <cite>

আমাদের বেশীরভাগই ট্যাগটির ব্যবহার সম্পর্কে অবগত, কিন্তু আপনি কি এর মতই আরেকটি ট্যাগ এর ব্যাপারে জানেন? <cite> ট্যাগ টি মুলত উপাদানের ভিতরের লেখাকে রেফারেন্স হিসেবে সঠিকভাবে প্রকাশ পেতে সাহায্য করে। সাধারনত ব্রাউজার এই  লেখাগুলোকে ট্যাগ এর মধ্যে ইটালিক ফন্টে রেন্ডার করে, কিন্তু এটা অতি সহজে শুধু CSS এর সাহায্যেই পরিবর্তন করা সম্ভব।

ট্যাগটি গ্রন্থপঞ্জি(bibliographic) এবং অন্যান্য সাইট রেফারেন্স উদ্ধৃত করার জন্য সত্যিই দরকারী। নিম্নে কিভাবে আমরা একটি অনুচ্ছেদে cite ট্যাগটি ব্যবহার করতে পারবো তার উদাহরণ দেয়া হলোঃ

ডেভিড অ্যালেন এর সফল সাংগঠনিক বই Getting Things Done  ওয়েবে ঝড়ের গতিতে ছড়িয়ে পড়েছে।

২। <optgroup>

<optgroup>ট্যাগটি মুলত অনেক অপশনের মধ্যে একটি সিলেক্টবক্সে অপশনটি সম্পর্কে কিছু তথ্য দেয়। যেমন যদি কিছু মুভির লিস্ট করা হয় তাদের দেখানোর সময়সহ তাহলে এটি এমন দেখাবে:

লাইভ ডেমো:

এটা মুভি লিস্টিং কে দৃশ্যতঃ পৃথক করার জন্য সিলেক্ট লিস্টকে অনুমতি দেয়।

৩। <acronym>

<acronym> ট্যাগটি ব্যবহার করে আমরা একটি ওয়ার্ড গ্রুপ কে সঠিকভাবে প্রকাশ ও বর্ননা করতে পারি। যখন <acronym> ট্যাগ ব্যবহার করা হয়েছে এমন কোনো টেক্সট এর উপরে আমরা কার্সরটা ধরি তখন তার নিচেই টাইটেল ট্যাগ এর টেক্সট সহ একটি বক্স দৃশ্যমান হয়। উদাহরনস্বরূপ:

লাইভ ডেমো:

SEO পুরোটাই ফাকিবাজি আর যাদুকরী।

<address>

<address> ট্যাগটি বেশ ছোটো এবং অস্পষ্ট একটি ট্যাগ, কিন্তু তার মানে এই নয় যে এটি ব্যবহারযোগ্য নয়! <address> ট্যাগটির নামই বলে দিচ্ছে যে এই ট্যাগটি আপনাকে HTML এ আভ্যন্তরীণভাবে ঠিকানাগুলি মার্কআপ এর জন্য অনুমোদন করে। এছাড়াও ছিমছাম এই ট্যাগটি সকল প্রকার ডাটা কে ব্রাকেটের মধ্যে ইটালিক ফন্টে রুপান্তরিত করবে, যদিও এই স্টাইলটি CSS এর মাধ্যমে সহজে পরিবর্তনযোগ্য।

<ins> এবং <del>

যদি আপনি মার্ক আপ সহ এডিটিং রিভিশন প্রদর্শন করতে চান, সেক্ষেত্রে <ins> এবং <del> ট্যাগটিই হবে আপনার টিকেট। ট্যাগের নাম অনুসরন করলেই দেখতে পারবো যে, শুধু ডকুমেন্টে যোগ করা সবকিছুর মধ্যে যেগুলো আন্ডারলাইন করা সেগুলোর উপরে বিশেষ দৃষ্টি দেয়া হয়েছে <ins> ট্যাগ দিয়ে এবং <del> ট্যাগটি রেখান্বিত করে প্রদর্শন করে শুধু সেসব জিনিস যা সরিয়ে ফেলা হয়েছে।

লাইভ ডেমো:

John likes LOVES his new iPod

৬। <label>

একটি ডকুমেন্ট মার্ক আপ করার সময় সব থেকে সহজেই আমরা যেটা ভুলে যাই সেটা হলো Form elements। এবং form elements-এ সব থেকে বেশি ভুলে যাওয়া ট্যাগ হচ্ছে <label> ট্যাগ। label এর টেক্সট কে নোট করার জন্য এটি শুধু একটি দ্রুত পদ্ধতিই না, বরং কোন উপাদানটিকে label ট্যাগ দেয়া হবে সেটা পরিষ্কার বোঝানোর জন্য ট্যাগ টি  “for” নামে একটি অ্যাট্রিবিউটও যোগ করতে পারে। <label> ট্যাগ গুলো শুধুমাত্র স্টাইলিং এর জন্য ভালো তা নয়, বরং এরা সংযুক্ত উপাদানের জন্য ক্যাপশন ক্লিকযোগ্য করতেও আপনাকে অনুমতি দেয়।

৭। <fieldset>

ফিল্ডসেট একটি ছোটো ছিমছাম অ্যাট্রিবিউট যেটা ফর্মে যোগ করে আমরা যৌক্তিকভাবে ফর্ম উপাদানগুলো গ্রুপ করতে পারি। এই <fieldset> ট্যাগ টি একবার ব্যবহার করলেই এটা ক্ষেত্রটির মধ্যেই উপাদানগুলোর চারপাশে একটি বক্স তৈরী করে। বোনাস পয়েন্ট হিসেবে রয়েছে গ্রুপের টাইটেল সংজ্ঞায়িত করতে fieldset এর মধ্যেই একটি <label> ট্যাগ যোগ করা।

লাইভ ডেমো:

Are You Smarter Than a 5th Grader?

Yes

No

৮। <abbr>

<abbr> ট্যাগ টি শুধু সংক্ষিপ্ত শব্দগুলো সংজ্ঞায়িত করতেই ব্যবহৃত হয়, এছাড়া <abbr> ট্যাগ টি অনেকটাই <acronym> ট্যাগের সদৃশ। ঠিক <acronym> এর মত , আপনাকে ট্যাগের মধ্যে একটি শিরোনাম সংজ্ঞায়িত করতে হবে। যখন একজন দর্শক সংক্ষিপ্ত টেক্সট এর উপর কার্সর রাখে তখন সেই টেক্সট এর পুরো বিবরণ নিচে দৃশ্যমান হয়। <abbr> ট্যাগটি খুব কম ব্যবহৃত হয়, কিন্তু স্ক্রীন রিডার ,স্পেল চেকার আর সার্চ ইঞ্জিন এর জন্য এর উপকারিতা কোনো অংশে কম না।  

লাইভ ডেমো:

Sgt. Pepper's Lonely Hearts Club is my favorite album.

৯। rel

Rel একটি দারুন উপকারী অ্যাট্রিবিউট হতে পারে, যেহেতু যেকোন HTML উপাদানে একটি rel রাখতে ও প্রয়োগ করতে পারেন। অতিরিক্ত ভেরিয়েবল পাস করার জন্য এটি সহায়ক, অন্যথায় নির্দিষ্ট নয়। আপনার HTML-এর সাথে জাভাস্ক্রিপ্ট ব্যবহার করার সময় এটি সহায়ক। যদি আপনার একটি লিঙ্ক থাকে যা আপনি ইনলাইনে সম্পাদনা করতে চান তবে আপনি এতে যোগ করতে পারেন:

জাভাস্ক্রিপ্টটি সম্ভবত rel অ্যাট্রিবিউটের সাথে "ক্লিক করতে সক্ষম" এমন কোন লিঙ্ক খুঁজছে, এবং এটা সচেতনভাবে কিছু যুক্ত করে এটাকে ইনলাইনে সম্পাদনা করতে অনুমতি দেয়। এটা অনেক কৌশল থেকে একটি কৌশল যা আপনি rel অ্যাট্রিবিউটের সাথে ব্যবহার করতে পারেন, যেহেতু এটি অশেষ সম্ভাবনাময়।

১০। <wbr>

<wbr> ট্যাগটি একটি অবিশ্বাস্যভাবে অস্পষ্ট ট্যাগ। আমার মনে হয়, আপনারা অনেকেই এই ট্যাগের সংস্পর্শে এসেছেন, যদিও এটা খুব কমই ব্যবহৃত হয়। (এটা সত্যি যে, আমি এই নিবন্ধটি গবেষণা শুরু করার আগে কখনও এই ট্যাগটি দেখিনি।) মূলত, ট্যাগটি এমন একটি জায়গা নির্দিষ্ট করতে আপনাকে অনুমতি দেয় যেখানে আপনি মনে করেন যে, এখানে একটি লাইন বিরতি হয়তো কার্যকর হতে পারে, তবে কেবলমাত্র যদি প্রয়োজন হয়। এই ট্যাগটি অনন্য, এটি প্রয়োজন হলে, লাইনব্রেক সন্নিবেশ করার জন্য ব্রাউজারের বিবেচনার উপর নির্ভর করে। আপনি যদি অনুভূমিক স্ক্রলবার না এড়িয়ে লেআউট তৈরি করতে চান, তাহলে এটি নিখুঁত পছন্দ।

যদি একই প্রভাব অর্জন করতে চান তবে <wbr> ট্যাগ ব্যবহার না করেও আপনি চেষ্টা করতে পারেন। এটি উল্লেখ্য যে, এই ট্যাগগুলির মধ্যে কোনোটিই সমস্ত ব্রাউজারগুলিতে পূর্ণ সমর্থন করে না। কোন কোন ব্রাউজার ট্যাগটি সমর্থন করে তা দেখতে Quirksmode এর এই নিবন্ধটি চেক করুন।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.