obiPlabon

সিম্যান্টিক মার্কাপ (Semantic Markup)

সিম্যান্টিক মার্কাপকে সহজভাবে সংজ্ঞায়িত করলে, বলতে হয় অর্থপূর্ণ মার্কাপ অর্থাৎ যে মার্কাপের নির্দিষ্ট অর্থ আছে।

যেমন, আমরা যদি HTML এ লিখি <span>What is Semantic Markup?</span> তাহলে এই মার্কাপ কিন্তু কোন অর্থ বহন করেনা কারণ এই মার্কাপ দেখে বোঝা যাচ্ছে না এটি আসলে কী! এটি হেডিং, নাকি প্যারাগ্রাফ, নাকি লিংক, নাকি অন্যকিছু? কিন্তু আমরা যদি লিখি <h1>What is Semantic Markup?</h1>। তাহলে এটি দেখেই কিন্তু আমরা বুঝতে পারি যে এটি হচ্ছে লেভেল ওয়ান হেডিং যা মূলত একটি পেজের প্রাইমারী হেডিং হিসেবে ব্যবহার হয়।

আবার আমরা কিন্তু চাইলে <span>What is Semantic Markup?</span> এই অর্থহীন মার্কাপকেও অর্থপূর্ণ করতে পারি ক্লাস সিলেক্টর ব্যবহার করে। যেমন <span class="heading-level-1">What is Semantic Markup?</span> এবং তখন যে কেউ এই কোড পড়লে বুঝতে পারবে যে এটি হচ্ছে লেভেল ওয়ান হেডিং এবং সাথে আমরা কিন্তু .heading-level-1 এর জন্য যথাযথ CSS স্টাইল লিখে এর ভিজুয়াল পার্থক্যটাও দূর করতে পারি। তাহলে এ থেকে আমরা একটি বিষয় বুঝতে পারছি যে সিম্যান্টিক মার্কাপের সাথে ভিজুয়াল আউটপুটের কোন সম্পর্ক নেই! কারণ ভিজুয়াল বিষয়টি নিয়ন্ত্রণ করে CSS। তাই আমরা চাইলে প্যারাগ্রাফ কে হেডিং, হেডিংকে লিস্ট এবং লিস্ট কে লিংক হিসেবে দেখাতে পারি। যেমনঃ আমরা যদি বুটস্ট্রাপের বাটন লক্ষ্য করি, তাহলে শুধু মাত্র দেখে কিন্তু বোঝার উপায় নেই কোনটি form এর বাটন, কোনটি button আর কোনটি লিংক (Anchor tag)।

মার্কাপের ব্যবহারকারী (Markup User)

আমরা যে HTML মার্কাপ লিখি তার সর্বশেষ ব্যবহারকারী হল মানুষ! আর মানুষ সেটা ব্যবহার করে ব্রাউজার, স্ক্রিন রিডার, ফিড রিডার, সার্চ ইঞ্জিন বট এসবের মাধ্যমে (আলোচনার সুবিধার জন্য সবগুলিকে একসাথে User Agent হিসেবে ডাকি)। সব মানুষ যেহেতু HTML পারেননা এবং পারলেও সেটা সহজবোধ্য নয় তাই User Agent মার্কাপকে মানুষের কাছে সহজবোধ্য করে উপস্থাপন করে, এবং একেক User Agent উপস্থাপনার কাজটা একেকভাবে করে। যেমন- স্ক্রিন রিডার পড়ে শোনায়, ব্রাউজার CSS এর মাধুরী মিশিয়ে উপস্থাপন করে, আর সার্চ বট মার্কাপ পড়ে কন্টেটকে একটা স্ট্রাকচার্ড সিস্টেমে সাজিয়ে রাখে, যেনো সার্চ ইঞ্জিনে গিয়ে সার্চ দেয়া মাত্রই সেটা সার্চারের কাছে চলে যায়।

সিম্যান্টিক মার্কাপের গুরুত্ব (Importance of Semantic Markup)

আমরা পূর্বেই জেনেছি ভিজুয়াল আউটপুটের সাথে সিম্যান্টিক মার্কাপের কোন সম্পর্ক নেই। তাহলে কার সাথে আছে? মোটামুটি বাকি সবার সাথেই! চলুন তাহলে জেনে নেই যেসব কারণে সিম্যান্টিক মার্কাপ লিখবঃ

• (Search Engine Friendly) সার্চ ইঞ্জিন ফ্রেন্ডলিঃ SEO (Search Engine Optimization) টার্মের সাথে আমরা কমবেশি সবাই পরিচিত। আর সার্চ ইঞ্জিন ফ্রেন্ডলি মার্কাপ SEO -র জন্য ভীষণ সহায়ক। আমরা কিন্তু সার্চ ইঞ্জিনকে আরও স্ট্রাকচার্ড কন্টেন্ট দিতে পারি মাইক্রোডাটা, মাইক্রোফরম্যাট (Micro Format), স্কিমা (Schema) এসব ব্যবহার করে।
• (Accessible) এ্যাক্সেসিবলঃ আমাদের মার্কাপ ব্যবহারকারী সকল মানুষ কিন্তু সমান নয়। কেউ হয়তো চোখে দেখেন না, আবার কেউ হয়তো অস্পষ্ট দেখেন। এধণের ব্যবহারকারীরা মূলত স্ক্রিনরিডার ব্যবহার করে থাকেন। আর স্ক্রিন রিডার সিম্যান্টিক মার্কাপকে সঠিকভাবে পড়তে পারে। আমরা কিন্তু কন্টেন্টকে আরও এ্যাক্সেসিবল করতে পারি WAI-ARIA অনুসরণ করে। আপনি WAI-ARIA লিখে গুগল করলে পর্যাপ্ত পরিমাণ রিসোর্স পাবেন এ বিষয়ে জানার জন্য।
• (Maintainable Codebase) মেইন্টেনেবল কোডবেজঃ এই বিষয়টির সাথে মোটামুটি সবাই পরিচিত। যেহেতু সিম্যান্টিক মার্কাপ দেখে সহজেই বোঝা যায় এর উদ্দেশ্য কি, তাই এটি সহজেই মেইন্টেইন করা যায়। যার ফলে অনেক পুরনো কোডবেজে কিংবা টিমে কাজ করতে সুবিধা হয়।

সিম্যান্টিক মার্কাপের উদাহরণ (Example of Semantic Markup)

Sensible Code

টিমে কাজ করার জন্য এবং নিজের জন্যও সিম্যান্টিক মার্কাপ লেখার পাশাপাশি Sensible Markup / Sensible Code লেখাও জরুরী। Sensible দিয়ে বোঝানো হয় যে আমরা যা লিখছি তা যৌক্তিক কিনা। যেমন আমরা যে class বা id সিলেক্টর লিখছি তা যৌক্তিক কিনা। দেখা গেলো একটি বাটন লাল রঙয়ের হবে বিধায় আমরা ক্লাসের নাম দিলাম btn-red অথবা red-button। এটি কিন্তু Sensible হল না। আমাদের সবারই ধারনা আছে যে বাটন রেড হয় ডিলেট কিংবা এই জাতীয় বিষয় বুঝানোর জন্য। তাই নামটি হওয়া উচিৎ btn-delete / button-delete / delete-button এরকম। ক্লাসের নাম নির্বাচনের সময় দেখতে কি রকম হবে তা না ভেবে লজিক্যালি / ফাংশনালি কি করবে সেদিক থেকে চিন্তা করা উচিৎ।

— ধন্যবাদ 🙂