আমি নিশ্চিত নই যে আইটেমগুলির তালিকা করার সময় আমাকে কেবল ডিভ ব্যবহার করে উল-লি বনাম কেন ব্যবহার করতে হবে। আমি উভয়কে দেখতে দেখতে একইরকম করতে পারি তাই নিরবচ্ছিন্ন তালিকায় বনাম ডিভাইস তৈরির কার্যকরী সুবিধা কোথায়?
উত্তর:
শব্দার্থত শুদ্ধতার জন্য। এইচটিএমএলটিতে জিনিসের তালিকা প্রকাশ করার ক্ষমতা রয়েছে এবং এটি গুগল রোবট, স্ক্রিন পাঠক এবং সমস্ত উপায়ে ব্যবহারকারীদের যারা সাইটের উপস্থাপনা সম্পর্কে এককভাবে যত্নবান না হন তারা আপনার সামগ্রী আরও ভালভাবে বুঝতে পারে।
আমি নিশ্চিত না কেন আইটেমের তালিকা করার সময় আমাকে কেবল ডিভ ব্যবহার করে উল-লি বনাম ব্যবহার করতে হবে। আমি উভয় চেহারা একই হতে পারে
আপনার প্রশ্নের মূল শব্দটি এখানে রয়েছে: "চেহারা"। আপনি কি তাদের ব্রেইল পাঠক ব্যবহার করে অন্ধ লোকদের জন্য একই টাইপ করতে পারেন ? আপনি কি তাদের পাঠ্য থেকে স্পিচ সংশ্লেষ ব্যবহার করে অন্ধ লোকদের জন্য একই শব্দ করতে পারেন ? আপনি কি এখনও তাদের কাস্টম ক্লায়েন্ট-সাইড সিএসএস ব্যবহারকারী-স্টাইলশিট ব্যবহার করে দৃষ্টি প্রতিবন্ধীদের জন্য একই দেখতে তৈরি করতে পারেন?
"চেহারা", শব্দটি একটি খুব বিপজ্জনক শব্দ - আপনি যখন এইচটিএমএল সম্পর্কিত ব্যবহার করেন, সমস্ত অ্যালার্ম আপনার মাথাতে চলে যায়। এইচটিএমএল একটি হাইপারমিডিয়া ডকুমেন্টের অর্থগত কাঠামো বর্ণনা করার জন্য একটি ভাষা। একটি শব্দার্থিক গঠন না আছে একটি "চেহারা" এটি একটি বিমূর্ত ধারণা রয়েছে।
এমনকি যদি আপনি এই সমস্ত শব্দার্থক হোকসপোকাসের বিষয়ে চিন্তা না করেন এবং অন্ধ লোকদের সম্পর্কে আপনার চিন্তা না করেন তবে এটিকে বিবেচনা করুন: গুগল, ইয়াহু, এমএসএন এবং কো এর চোখ নেই, তারা আপনার রেন্ডার করা সিএসএসের দিকে "তাকান" না don't ।
আপনার প্রশ্নের সরাসরি উত্তর: কার্যকরী সুবিধা হ'ল ডিভগুলি তাদের নিজের থেকে সামান্য অর্থ বোঝায়, অন্যদিকে উল লিস স্পষ্টভাবে বোঝায় "এটি আইটেমের একটি অ / আদেশযুক্ত তালিকা" "
"শব্দার্থবিজ্ঞান" শব্দটি বোঝায় যেভাবে আপনি বিদ্যমান কাঠামোর অন্তর্নিহিত অর্থটি সুস্পষ্ট অর্থ তৈরি করতে ব্যবহার করেন। এইচটিএমএল এমন ট্যাগগুলি নিয়ে গঠিত যার অর্থ কিছু জিনিস নিজেরাই। এবং সেগুলি ব্যবহারের জন্য প্রতিষ্ঠিত বিধি / নির্দেশিকা / উপায় রয়েছে যাতে আপনার প্রকাশিত এইচটিএমএল ডকুমেন্টটি আপনাকে এটি বোঝাতে চাইছে তা জানায়।
আপনি যদি আপনার দস্তাবেজটিতে কিছু তালিকাভুক্ত করেন, তবে একটি আদেশযুক্ত তালিকা (উল) বা একটি আনর্ডারড তালিকা (ওএল) যুক্ত করুন add অন্যদিকে, পৃষ্ঠা বিভাগ (ডিআইভি) উপাদানটি একটি নির্দিষ্ট এবং পৃথক সামগ্রী সামগ্রী তৈরি করতে ব্যবহৃত হয়।
DIV আছে উপাদান "ভাগ করা হয়।" আপনি যখন কোনও পৃষ্ঠার দিকে তাকান, সেখানে সামগ্রী উপাদান, পাদলেখ, শিরোনাম, নেভিগেশন, মেনু, ফর্ম ইত্যাদির মতো নির্দিষ্ট অংশ থাকে এবং আপনি এই বিভাগগুলি তৈরি করতে ডিভ ট্যাগ ব্যবহার করতে পারেন । প্রায়শই, পৃষ্ঠাগুলি ভিজ্যুয়াল বিন্যাসের সাথে মিল রাখে, তাই সিএসএসে আপনার লেআউটটি কাটাতে সুস্পষ্ট পৃষ্ঠা বিভাগগুলি (ডিআইভি) ব্যবহার করা একটি প্রাকৃতিক ফিট। এই ভাবে ডিভ ট্যাগগুলি স্ট্রাকচারাল হয়ে যায়।
আপনি যদি ডিভ ট্যাগটি অপব্যবহার করে বা অতিরিক্ত ব্যবহার করেন তবে এটি অযৌক্তিক অর্থ এবং কোড ব্লাট তৈরি করতে পারে।
বিষয়গুলিকে বিভ্রান্ত করার জন্য: গুগল তাদের তালিকাভুক্ত অনুসন্ধান ফলাফলগুলিকে "ভাগ" করতে h3 এবং div ব্যবহার করে । উল> লি> এইচ 3 + ডিভ
সুতরাং যখন আপনি সমস্ত শৈলী বন্ধ করেন (ফায়ারফক্স ডাব্লু / ওয়েব ডেভেলপার সরঞ্জামদণ্ডে Shift + Cmd / Crtl + S), ডিভগুলি চলে যেতে হবে এবং প্রাকৃতিকভাবে স্ট্যাক করা উচিত। আপনার নগ্ন এইচটিএমএল এখনও স্পষ্ট শ্রেণিবদ্ধের সাথে একটি দুর্দান্ত পৃষ্ঠা রেন্ডার করবে: উপরে থেকে নীচে, সর্বাধিক গুরুত্বপূর্ণ সামগ্রী এবং তালিকাভুক্ত আইটেমগুলির জন্য বুলেট এবং সংখ্যাসমূহের তালিকা। এবং শীর্ষের কাছে একটি লিঙ্ক যুক্ত করা ভাল ধারণা (অদৃশ্য ব্যবহারকারীদের জন্য) যা আপনাকে এখানে এড়াতে দেয়: প্রধান সামগ্রী, গুরুত্বপূর্ণ ফর্ম বা প্রধান শিরোনাম (সামগ্রীর টেবিলের মতো)।
অবশেষে, মনে রাখবেন যে আপনি কোনও নথি তৈরি করছেন। সমস্ত ভিজ্যুয়াল এফেক্ট ব্যতীত এটি এখনও একটি জরুরী নথি হওয়া উচিত।
ব্যবহার <li>বা ব্যবহার সম্পর্কে অনেক কথা আছে তবে একটি <div>মন্তব্য এই ট্যাগগুলির মধ্যে থাকা সামগ্রীর একটি দৃ example় উদাহরণ দেয়নি। আমার অনুভূতিটি হ'ল <ul>এবং <li>এটি সত্যই গুরুত্বপূর্ণ নয় কারণ আমি আপনাকে শেষবার বলতে পারি না যে আমি আসলে কোনও ওয়েবসাইট, সংবাদপত্র বা ম্যাগাজিনে অনলাইনে বা মুদ্রণে জিনিসগুলির একটি "তালিকা" পড়েছি।
<div>অনেক বেশি বহুমুখী। আপনি যদি একটি কেকের জন্য উপাদানগুলি তালিকাভুক্ত করেন তবে হ্যাঁ এটি একটি তালিকা। আপনি যদি হাইকিং ট্রিপে প্যাক করার জন্য জিনিসগুলি তালিকাভুক্ত করেন তবে হ্যাঁ এটি একটি তালিকা।
তবে ব্যবহারকারীর-রূপ সম্পর্কে কী, উদাহরণস্বরূপ, এটি এমন কিছু এলোমেলো জিনিসকে তালিকাবদ্ধ করে যা সত্যিকারের তালিকা নয়, অনুচ্ছেদগুলির একটি সিরিজও নয় বা সমস্ত "শিরোনাম"। কিছু জিনিস তারিখ, কিছু চেকবক্স এবং কিছু পাঠ্য। যদি আপনি আমাকে জিজ্ঞাসা করুন, এটি ভাগ। কোনও অন্ধ ব্যক্তিকে যদি এটির সাথে চিহ্নিত করা হয় <ul>এবং <li>তারা "এখানে একটি তালিকা ..." শুনেছিল যে এটি কেবল স্টাফের একটি হজ-পডেজ নয়, তবে এটি সত্যিই একটি তালিকা নয় mis
আপনি যে সামগ্রীটি ভিতরে রাখতে চান তার জন্য আপনার উপযুক্ত ট্যাগ ব্যবহার করা উচিত। এর অর্থ এই নয় যে উল / লি তালিকার জন্য আরও উপযুক্ত। এর অর্থ হ'ল আপনাকে নিজের তালিকার বিষয়বস্তুটি বিবেচনা করতে হবে এবং এটি কোনও আনর্ডার্ড / অর্ডার করা হয়েছে বা সংজ্ঞা তালিকা কিনা তা দেখতে হবে।
আর একটি যুক্তি হ'ল আপনি যখন সিএসএস অক্ষম করেন। ব্রাউজারটি এটির ডিফল্ট স্টাইলিং রেন্ডার করবে যা বিকল্প ব্রাউজিং ডিভাইসগুলি ব্যবহৃত হয় কিনা তা দেখতে এটি আরও ভাল করে তোলে। এটি অ্যাক্সেসিবিলিটি বাড়ায়।
আমি ব্যক্তিগতভাবে শব্দার্থবিজ্ঞানের জন্য লি পছন্দ করি। উত্সটি দেখার সময় আপনি তাত্ক্ষণিকভাবে দেখতে পাবেন যে কোনও কিছুর দ্বারা লিপানো থাকলে আপনার কোনও তালিকার তালিকা রয়েছে। একটি ডিভ সংগ্রহ কোনও শব্দার্থক অর্থ প্রদান করে না, এবং সাধারণত তালিকার একমাত্র শব্দার্থকগুলি "লিস্ট আইটেম" এর মতো সিএসএস ক্লাস দ্বারা প্রবর্তিত হয়। যা স্পষ্টতই এই বিষয়টি নির্দেশ করে যে একটি লি প্রথম স্থানে ব্যবহার করা উচিত ছিল।
আপনার উপস্থাপনার যুক্তিতে যদি কোনও লুপ থাকে তবে আমি সর্বদা একটি ডিভের চেয়ে লির পক্ষে চাই।
<li> এর অর্থ তালিকার একটি আইটেম এবং এটি পার্সার (ব্রাউজার, অনুসন্ধান ইঞ্জিন, মাকড়সা) জানতে দেয় যে আপনি আইটেমগুলি তালিকাবদ্ধ করছেন listing আপনি এলআই এর পরিবর্তে ডিআইভি ব্যবহার করতে পারেন তবে p অংশীদাররা কখনই জানতে পারবেন না যে এই আইটেমগুলি তালিকাভুক্ত হচ্ছে এবং ডিআইভি এটির একটি ব্লক ব্যতীত সত্যিকার অর্থে কোনও কিছুই বর্ণনা করে না।
এটি প্রকল্পের উপর নির্ভর করে। আমি সম্প্রতি একটি প্রকল্প করেছি যা একটি তালিকা ব্যবহার করে মেনু তৈরি করেছে। তারা স্লাইডিং / ফেইডিংয়ের মতো একগুচ্ছ প্রভাব যুক্ত করতে চেয়েছিল এবং একাধিক স্তরের সাথে এটি সংযোগযোগ্য করতে চেয়েছিল।
এই ক্ষেত্রে, ডিআইভির অনেক বেশি উপযুক্ত ছিল। আমি শিশু ডিভ এর জন্য ধারক তৈরি করতে এবং পছন্দসই প্রভাবগুলি অর্জন করতে jQuery প্রয়োগ করতে সক্ষম হয়েছি।
আপনার প্রকল্পে এখনও এই প্রয়োজনীয়তা না থাকলেও, ভবিষ্যতে আপনি কীভাবে এটি পরিবর্তন করতে পারেন তা ভেবে বুদ্ধিমানের হতে পারে ...
ব্যবহার <li>(যেখানে উপযুক্ত) হ্রাস <div>ট্যাগ স্যুপ আপনি এখন প্রায়ই ওয়েব পেজ, যা ডেভেলপারদের সাহায্য করে অনেক আউট মাঝে দেখতে পাচ্ছি।
এমন নয় যে <div>এর খারাপ, কিন্তু যখনই একটি ট্যাগ overused পরার (যেমন <div>প্রায়ই হয়), এটি সম্পূর্ণই বেহুদা হচ্ছে বিন্দু ট্যাগের শব্দার্থিক অর্থ dilutes। আমি সম্প্রতি আমাদের ওয়েব অ্যাপ্লিকেশনটির সিএসএস / ইউআই-তে সহায়তা করার জন্য নিয়োগপ্রাপ্ত ঠিকাদারের কাছ থেকে এটি শিখেছি এবং এইচটিএমএল কোডের পঠনযোগ্যতা / রক্ষণাবেক্ষণের ক্ষেত্রে এটি যে পার্থক্য করেছে তা আমার কাছে অত্যন্ত লক্ষণীয়।
যদি আপনার যত্ন নেওয়া সমস্ত কিছু যদি ন্যূনতম প্রচেষ্টা সহ একটি নির্দিষ্ট উপায়ে দেখতে তালিকাগুলি পেতে থাকে তবে এটি ইতিমধ্যে একটি নো-ব্রেইনার: <li>টাইপ করার চেয়ে একটি চরিত্রের চেয়ে কম <div> এবং এটির সমাপনী ট্যাগটি এইচটিএমএলে .চ্ছিক।
শব্দার্থক সম্পর্কে প্রত্যেকে যা বলেছিল তা ছাড়াও এটি।
আপনার প্রশ্নের উত্তর ইতিমধ্যে দেওয়া হয়েছে আমি আমার দুটি সেন্ট এখানে যুক্ত করতে চাই। আমি এমন একটি প্রকল্পে কাজ করছিলাম যেখানে আমি ব্যাকএন্ড যুক্তি করছিলাম এবং আমার ডেটা আমার ডিজাইনার দ্বারা তৈরি পৃষ্ঠার টেম্পলেটে একত্রিত করা হচ্ছে। তিনি পৃষ্ঠায় প্রতিটি ধরণের তালিকার প্রতিনিধিত্ব করতে উল এবং লি ট্যাগ ব্যবহার করেছিলেন, যার কয়েকটি উইজেট ছিল। ডেটা এমন একটি সেন্টিমিটার থেকে আসছিল যেখানে ব্যবহারকারীরা এইচটিএমএল ট্যাগের মাধ্যমে সমৃদ্ধ পাঠ্য প্রবেশ করতে পারে। ব্যবহারকারীরা যখন তাদের সামগ্রীতে তালিকাগুলি তৈরি করা শুরু করেছিলেন তখন তালিকাগুলি আর বুলেটযুক্ত লাইস্টের মতো পুরো পৃষ্ঠাটি স্ক্রু করে দেওয়ার মতো দেখায় না।
পাঠ শিখেছে: জেনেরিক সিএসএস নির্বাচনকারীদের সাথে তালিকার ট্যাগগুলি ব্যবহার করবেন না যদি আপনার সামগ্রীতে নিজেই এইচটিএমএল থাকতে পারে।
উল লি সম্পর্কে আরেকটি বিষয় হ'ল; আপনি একটি ধারক হিসাবে উল ব্যবহার করতে পারেন যা আপনাকে স্টাইল শ্রেণি সেট করতে সহায়তা করে
<ul class="myHebe">
<li><a href="#">.net</a></li>
<li><a href="#">.net</a></li>
</ul>আমি যখন উল ব্যবহার করি তখন আমি এই প্যাটার্নটি পছন্দ করি
.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitemsঅবশ্যই এটি নির্ভর করে যে আমরা এটি কীভাবে ব্যবহার করতে চাই এবং কীভাবে এটি পছন্দ করি। এটি আমার পছন্দ মত
আশা সাহায্য করে ধন্যবাদ