Div and span
এইচ. টি. এম. এল-এ, ডিভি এবং স্প্যান ট্যাগগুলি একটি নথির অংশগুলি সংজ্ঞায়িত করতে ব্যবহৃত উপাদান, যাতে একটি অনন্য শ্রেণিবিন্যাসের প্রয়োজন হলে সেগুলি সনাক্তযোগ্য হয়। যেখানে অন্যান্য এইচ. টি. এম. এল উপাদান যেমন পি (অনুচ্ছেদ), এম (জোর) ইত্যাদি বিষয়বস্তুর শব্দার্থকে সঠিকভাবে উপস্থাপন করে, সেখানে স্প্যান এবং ডিভ ট্যাগের অতিরিক্ত ব্যবহার পাঠকদের জন্য আরও ভাল অ্যাক্সেসযোগ্যতা এবং লেখকদের জন্য সহজ রক্ষণাবেক্ষণের দিকে পরিচালিত করে। যেখানে কোনও বিদ্যমান এইচটিএমএল উপাদান প্রযোজ্য নয়, সেখানে স্প্যান এবং ডিভি মূল্যবানভাবে একটি নথির অংশগুলিকে উপস্থাপন করতে পারে যাতে এইচটিএমএল বৈশিষ্ট্য যেমন ক্লাস, আইডি, ল্যাং বা দির প্রয়োগ করা যায়। স্প্যান একটি নথির একটি ইনলাইন অংশকে উপস্থাপন করে, উদাহরণস্বরূপ একটি বাক্যের মধ্যে শব্দ। ডিভি একটি নথির একটি ব্লক-স্তরের অংশকে উপস্থাপন করে যেমন কয়েকটি অনুচ্ছেদ, বা এর ক্যাপশন সহ একটি চিত্র। ডিভি মানে হল বিভাজন। উপাদানগুলি শব্দার্থিক বৈশিষ্ট্যগুলিকে অনুমতি দেয় (যেমন। ল্যাং = "এন-ইউএস"), সিএসএস স্টাইলিং (যেমন, রঙ এবং টাইপোগ্রাফি), বা ক্লায়েন্ট-সাইড স্ক্রিপ্টিং (যেমন, অ্যানিমেশন, লুকানো এবং বর্ধন) প্রয়োগ করা হবে। ডিভি নথির একটি 'বিভাজন' সংজ্ঞায়িত করে, একটি ব্লক-স্তরের আইটেম যা ইনলাইন উপাদানের একটি স্প্যানের চেয়ে উপরের এবং নীচের উপাদানগুলির থেকে আরও আলাদা। উদাহরণস্বরূপ, একটি লাল অনুচ্ছেদের মধ্যে পাঠ্যের একটি নির্দিষ্ট অংশ তৈরি করতে, স্প্যানটি নিম্নরূপ ব্যবহার করা যেতে পারেঃ ইতিহাস 1995 সালে আন্তর্জাতিককরণ ওয়ার্কিং গ্রুপের দ্বিতীয় খসড়া এইচটিএমএল-আই18এন-এ স্প্যান উপাদানটি এইচটিএমএল-এ চালু করা হয়েছিল। যাইহোক, এটি এইচটিএমএল 4.01 অবধি ছিল না যে এটি এইচটিএমএল ভাষার অংশ হয়ে ওঠে, 1997 সালে এইচটিএমএল 4 ডাব্লু 3 সি ওয়ার্কিং ড্রাফটে উপস্থিত হয়। 1995 সালে, পাঠ্যের যে কোনও ইনলাইন স্প্যান চিহ্নিত করার জন্য স্প্যান চালু করা হয়েছিল, কারণ 'অন্য কোনও উপাদান উপযুক্ত না হলে ল্যাঙ্গ এবং বি. আই. ডি. আই বৈশিষ্ট্য বহন করার জন্য একটি সাধারণ ধারক প্রয়োজন।' এটি এখনও সেই সাধারণ উদ্দেশ্যটি সম্পাদন করে, যদিও তখন থেকে শব্দার্থিক উপাদানগুলির একটি আরও সমৃদ্ধ পরিসীমা সংজ্ঞায়িত করা হয়েছে এবং আরও অনেক বৈশিষ্ট্য রয়েছে যা প্রয়োগ করার প্রয়োজন হতে পারে। পার্থক্য এবং ডিফল্ট আচরণ ডিভ এবং স্প্যানের মধ্যে একাধিক পার্থক্য রয়েছে। সবচেয়ে উল্লেখযোগ্য পার্থক্য হল উপাদানগুলি কীভাবে প্রদর্শিত হয়। স্ট্যান্ডার্ড এইচটিএমএল-এ, একটি ডিভি একটি ব্লক-স্তরের উপাদান যেখানে একটি স্প্যান একটি ইনলাইন উপাদান। ডিভি ব্লক পৃষ্ঠায় একটি নথির একটি অংশকে দৃশ্যমানভাবে পৃথক করে এবং এতে অন্যান্য ব্লক-স্তরের উপাদান থাকতে পারে। স্প্যান উপাদানটিতে পার্শ্ববর্তী বিষয়বস্তুর সাথে ইনলাইন তথ্যের একটি অংশ থাকে এবং শুধুমাত্র অন্যান্য ইনলাইন-স্তরের উপাদান থাকতে পারে। বাস্তবে, উপাদানগুলির ডিফল্ট প্রদর্শন ক্যাসকেডিং স্টাইল শিট (সিএসএস) ব্যবহার করে পরিবর্তন করা যেতে পারে, যদিও প্রতিটি উপাদানের অনুমোদিত বিষয়বস্তু পরিবর্তন করা নাও হতে পারে। উদাহরণস্বরূপ, সিএসএস নির্বিশেষে, একটি স্প্যান উপাদান ব্লক-স্তরের শিশু নাও থাকতে পারে। ব্যবহারিক ব্যবহারের স্প্যান এবং ডিভ উপাদানগুলি সম্পূর্ণরূপে আবদ্ধ উপাদানগুলির একটি যৌক্তিক গোষ্ঠী বোঝাতে ব্যবহৃত হয়। ক্লাস বা আইডি অ্যাট্রিবিউট সহ স্প্যান এবং ডিভি ট্যাগ ব্যবহার করার তিনটি প্রধান কারণ রয়েছেঃ সিএসএসের সাথে স্টাইলিং বিষয়বস্তুতে লেআউট, টাইপোগ্রাফিক, রঙ এবং অন্যান্য উপস্থাপনা অ্যাট্রিবিউট প্রয়োগ করার জন্য সিএসএসের সাথে একত্রে ক্লাস বা আইডি অ্যাট্রিবিউট বহন করা এবং উপাদানগুলির জন্য সাধারণ। সিএসএস শুধুমাত্র ভিজ্যুয়াল স্টাইলিংয়ের ক্ষেত্রে প্রযোজ্য নয়ঃ যখন একটি ভয়েস ব্রাউজার দ্বারা জোরে কথা বলা হয়, তখন সিএসএস স্টাইলিং বক্তৃতা-হার, চাপ, সমৃদ্ধি এবং এমনকি একটি স্টেরিওফোনিক চিত্রের মধ্যে অবস্থানকেও প্রভাবিত করতে পারে। এই কারণগুলির জন্য, এবং আরও শব্দার্থিক ওয়েবের সমর্থনে, এইচটিএমএল-এর মধ্যে উপাদানগুলির সাথে সংযুক্ত বৈশিষ্ট্যগুলি কেবল একটি নির্দিষ্ট মাধ্যমে তাদের উদ্দেশ্য প্রদর্শন বৈশিষ্ট্যগুলির পরিবর্তে তাদের শব্দার্থিক উদ্দেশ্য বর্ণনা করা উচিত। উদাহরণস্বরূপ, এইচটিএমএল শব্দার্থগতভাবে দুর্বল, যেখানে জোর দেওয়ার জন্য একটি এম উপাদান ব্যবহার করে (ইটালিকগুলিতে পাঠ্য হিসাবে উপস্থিত), এবং আরও উপযুক্ত শ্রেণীর নাম প্রবর্তন করে। সিএসএস-এর সঠিক ব্যবহারের মাধ্যমে, এই ধরনের 'সতর্কতা' একটি পর্দায় একটি লাল, গাঢ় ফন্টে রেন্ডার করা যেতে পারে, কিন্তু যখন মুদ্রিত হয় তখন সেগুলি বাদ দেওয়া হতে পারে, কারণ ততদিনে সেগুলি সম্পর্কে কিছু করতে খুব দেরি হয়ে গেছে। সম্ভবত কথা বলার সময় তাদের অতিরিক্ত চাপ দেওয়া উচিত এবং কথা বলার হার সামান্য হ্রাস করা উচিত। দ্বিতীয় উদাহরণটি হল কেবল উপস্থাপনার পরিবর্তে শব্দার্থগতভাবে সমৃদ্ধ মার্কআপ। শব্দার্থগত স্পষ্টতা পৃষ্ঠাটিকে সাধারণ অর্থে আরও শব্দার্থগতভাবে অর্থপূর্ণ করার জন্য পৃষ্ঠার বিষয়বস্তুর অংশগুলির এই ধরনের গোষ্ঠীকরণ এবং লেবেলিং চালু করা যেতে পারে। আগামী বছর এবং দশকগুলিতে ওয়ার্ল্ড ওয়াইড ওয়েব কীভাবে বিকশিত হবে তা বলা অসম্ভব। আজকের দিনে ডিজাইন করা ওয়েব পৃষ্ঠাগুলি এখনও ব্যবহার করা যেতে পারে যখন তথ্য ব্যবস্থা যা আমরা এখনও কল্পনা করতে পারি না তা হল ওয়েবকে ট্রল করা, প্রক্রিয়াকরণ করা এবং শ্রেণীবদ্ধ করা। এমনকি আজকের সার্চ ইঞ্জিন যেমন গুগল এবং অন্যান্যরা যথেষ্ট জটিলতার মালিকানাধীন তথ্য প্রক্রিয়াকরণ অ্যালগরিদম ব্যবহার করে। কয়েক বছর ধরে, ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (ডাব্লু 3 সি) একটি বড় শব্দার্থিক ওয়েব প্রকল্প চালাচ্ছে যা পুরো ওয়েবকে আজকের এবং ভবিষ্যতের তথ্য ব্যবস্থার জন্য ক্রমবর্ধমান দরকারী এবং অর্থপূর্ণ করার জন্য ডিজাইন করা হয়েছে। মাইক্রোফর্ম্যাটস আন্দোলন শব্দার্থিক শ্রেণীর একটি ধারণা তৈরি করার একটি প্রচেষ্টা। উদাহরণস্বরূপ, মাইক্রোফর্ম্যাট-সচেতন সফ্টওয়্যার স্বয়ংক্রিয়ভাবে একটি উপাদান খুঁজে পেতে পারে এবং টেলিফোন নম্বরটি স্বয়ংক্রিয়ভাবে ডায়াল করার অনুমতি দিতে পারে। একবার এইচ. টি. এম. এল বা এক্স. এইচ. টি. এম. এল মার্কআপ কোনও পৃষ্ঠা-দর্শনার্থীর ক্লায়েন্ট ব্রাউজারে পৌঁছে গেলে, ক্লায়েন্ট-সাইড কোডকে ওয়েব পৃষ্ঠার অভ্যন্তরীণ কাঠামো (বা ডকুমেন্ট অবজেক্ট মডেল) নেভিগেট করতে হবে। এর সবচেয়ে সাধারণ কারণ হল যে পৃষ্ঠাটি ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট দিয়ে সরবরাহ করা হয় যা পৃষ্ঠাটি রেন্ডার করার পরে চলমান গতিশীল আচরণ তৈরি করবে। উদাহরণস্বরূপ, যদি 'এখনই কিনুন' লিঙ্কের উপর মাউস ঘুরিয়ে দেওয়া মানে মূল্য নির্ধারণ করা হয়, তবে পৃষ্ঠার অন্য কোথাও জোর দেওয়া হয়, জাভাস্ক্রিপ্ট কোড এটি করতে পারে, তবে জাভাস্ক্রিপ্টকে মূল্য উপাদানটি চিহ্নিত করতে হবে, যেখানেই এটি মার্কআপে রয়েছে। নিম্নলিখিত মার্কআপই যথেষ্ট হবেঃ আরেকটি উদাহরণ হল আয়াক্স প্রোগ্রামিং কৌশল, যেখানে, উদাহরণস্বরূপ, একটি হাইপারটেক্সট লিঙ্কে ক্লিক করলে জাভাস্ক্রিপ্ট কোডটি পুরো পৃষ্ঠাটি পুনরায় লোড না করে, পৃষ্ঠার মধ্যে বর্তমান মূল্যের পরিবর্তে একটি নতুন মূল্য উদ্ধৃতি প্রদর্শনের জন্য পাঠ্যটি পুনরুদ্ধার করতে পারে। যখন নতুন লেখাটি সার্ভার থেকে ফিরে আসে, তখন জাভাস্ক্রিপ্টকে অবশ্যই নতুন তথ্য দিয়ে প্রতিস্থাপনের জন্য পৃষ্ঠার সঠিক অঞ্চলটি সনাক্ত করতে হবে। স্বয়ংক্রিয় পরীক্ষার সরঞ্জামগুলিকে স্প্যান এবং ডিভ উপাদানগুলির শ্রেণী বা আইডি বৈশিষ্ট্য ব্যবহার করে ওয়েব পেজ মার্কআপ নেভিগেট করতে হতে পারে। গতিশীলভাবে তৈরি এইচ. টি. এম. এল-এ, xUnit পরিবারের সদস্য এইচ. টি. টি. পি. ইউনিটের মতো পৃষ্ঠা পরীক্ষার সরঞ্জামগুলির ব্যবহার এবং ফর্ম-চালিত ওয়েব সাইটগুলিতে প্রয়োগ করার সময় অ্যাপাচি জেমিটারের মতো লোড বা স্ট্রেস টেস্টিং সরঞ্জামগুলি অন্তর্ভুক্ত থাকতে পারে। ডিভি এবং স্প্যানের বিচক্ষণ ব্যবহার এইচটিএমএল এবং এক্সএইচটিএমএল মার্কআপের একটি গুরুত্বপূর্ণ অংশ। তবে, কখনও কখনও এগুলি অতিরিক্ত ব্যবহৃত হয়। এইচ. টি. এম. এল-এ উপলব্ধ বিভিন্ন তালিকা কাঠামো ডিভি এবং স্প্যান উপাদানগুলির একটি বাড়িতে তৈরি মিশ্রণের চেয়ে পছন্দসই হতে পারে। উদাহরণস্বরূপ, এটিঃ <উল শ্রেণী = "মেনু"> <লি> প্রধান পৃষ্ঠা </লি> <লি> বিষয়বস্তু যা প্রধান পৃষ্ঠার বিষয়বস্তু সাহায্য তৈরি করে। সাধারণত এর পরিবর্তে পছন্দসইঃ <ডিভ শ্রেণী = "মেনু"> <স্প্যান> প্রধান পৃষ্ঠা </স্প্যান> <স্প্যান> বিষয়বস্তু </স্প্যান> </স্প্যান> সহায়তা </স্প্যান> </ডিভ> যা প্রধান পৃষ্ঠার বিষয়বস্তু তৈরি করে সহায়তা ডিভ এবং স্প্যান উপাদানগুলির পরিবর্তে এইচটিএমএল-এর শব্দার্থিক ব্যবহারের অন্যান্য উদাহরণগুলির মধ্যে রয়েছে একটি ওয়েব ফর্মকে বিভক্ত করতে ফিল্ডসেট উপাদানগুলির ব্যবহার, এই ধরনের বিভাগগুলি সনাক্ত করতে কিংবদন্তি উপাদানগুলির ব্যবহার এবং ডিভের পরিবর্তে ফর্ম ইনপুট উপাদানগুলি সনাক্ত করতে লেবেলের ব্যবহার। এইচটিএমএল5 বেশ কয়েকটি নতুন উপাদান প্রবর্তন করেছে; কয়েকটি উদাহরণের মধ্যে রয়েছে হেডার, ফুটার, এনএভি এবং ফিগার উপাদান। শব্দার্থগতভাবে উপযুক্ত উপাদানগুলির ব্যবহার এইচ. টি. এম. এল নথিকে স্প্যান বা ডিভি-এর চেয়ে আরও ভাল কাঠামো প্রদান করে। আরও দেখুন এইচ. টি. এম. এল এবং এইচ. টি. এম. এল 5 এইচ. টি. এম. এল উপাদান এইচ. টি. এম. এল বৈশিষ্ট্য ক্যাসকেডিং স্টাইল শিট এবং সহায়তাঃ ক্যাসকেডিং স্টাইল শিট সি. ডি. এ. টি. এ কনটেক্সটওব্জেক্টস ইন স্প্যানস (সি. ও. আই. এন. এস) জাভাস্ক্রিপ্ট শব্দার্থিক ওয়েব রেফারেন্স বাহ্যিক লিঙ্ক গ্রুপিং উপাদানঃ ডি. আই. ভি এবং এস. পি. এ. এন উপাদান এইচ. টি. এম. এল ট্যাগ এইচ. টি. এম. এল ট্যাগ