tag - html কিভাবে কাজ করে




<P> এবং<div> এর মধ্যে পার্থক্য কি? (8)

<P> এবং <div> এর মধ্যে পার্থক্য কি?

তারা বিনিময়ে ব্যবহার করা যেতে পারে? অ্যাপ্লিকেশন কি?


<p> একটি অনুচ্ছেদের প্রতিনিধিত্ব করে এবং <div> একটি 'বিভাগ' উপস্থাপন করে, আমি মনে করি প্রধান পার্থক্য হল divs semantically 'অর্থহীন', যেখানে একটি <p> হিসাবে পাঠ্য সম্পর্কিত কিছু উপস্থাপন করতে অনুমিত হয়।

উদাহরণস্বরূপ আপনি নিছক <p> s থাকতে চান না, যেহেতু এটি অনেক অর্থাত্ত্বিক ধারণা (উদ্ধৃতির অর্থে ব্যতীত) তৈরি করবে না তবে লোকেরা পৃষ্ঠা সজ্জাতে নেস্টেড <div> s ব্যবহার করে।

Wikipedia মতে

এইচটিএমএল-এ, স্প্যান এবং ডিভ উপাদানগুলি ব্যবহৃত হয় যেখানে কোনও নথির অংশগুলি অন্য HTML উপাদানগুলির মাধ্যমে শব্দগতভাবে বর্ণনা করা যায় না।


'পি' শব্দগতভাবে পাঠ্য, অনুচ্ছেদের জন্য সাধারণত ব্যবহৃত হয়।

'div' একটি ওয়েবপেজে ব্লক বা এলাকার জন্য ব্যবহার করা হয়। উদাহরণস্বরূপ এটি একটি হেডারের এলাকা তৈরি করতে ব্যবহার করা যেতে পারে।

সম্ভবত interchangebly ব্যবহার করা যেতে পারে, কিন্তু আপনি না করা উচিত।


আগের কোড ছিল

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

তাই আমি এটা পরিবর্তন করতে হবে

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

এটা সহজ সমাধান ছিল। এবং উপরের কোডের জন্য সিএসএস

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

সুতরাং div ট্যাগ অন্যান্য উপাদান থাকতে পারে। P যে করতে বাধ্য করা উচিত নয়।


একটি p ট্যাগ একটি অনুচ্ছেদের জন্য, সাধারণত টেক্সট জন্য ব্যবহৃত হয়। একটি div ট্যাগ বিভাগের জন্য, এবং সাধারণত টেক্সট বিভাগ তৈরি করার জন্য ব্যবহৃত হয়।


তাদের শব্দগত পার্থক্য রয়েছে - একটি <div> উপাদানটি <div> একটি ধারক বর্ণনা করার জন্য ডিজাইন করা হয়েছে তবে একটি <p> উপাদানটি কোনও অনুচ্ছেদের বর্ণনা করার জন্য ডিজাইন করা হয়েছে।

Semantics সব পার্থক্য করতে। এইচটিএমএল একটি মার্কআপ ভাষা যার মানে এটি মার্কআপের গ্রাহকের কাছে অর্থপূর্ণ এমন উপায়ে সামগ্রীটিকে "মার্ক আপ" করার জন্য ডিজাইন করা হয়েছে। বেশিরভাগ ডেভেলপার বিশ্বাস করে যে নথির সেমেন্টিক্সগুলি ডিফল্ট শৈলী এবং রেন্ডারিং যে এই উপাদানগুলিতে ব্রাউজারগুলি প্রয়োগ করে কিন্তু এটি এমন নয়।

আপনার সামগ্রী চিহ্নিত করার জন্য আপনি যে উপাদানগুলি চয়ন করেন তা সামগ্রীটির বর্ণনা করা উচিত। এটি কীভাবে দেখানো উচিত তার উপর ভিত্তি করে আপনার নথিটি চিহ্নিত করবেন না - এটির উপর ভিত্তি করে এটি চিহ্নিত করুন।

আপনি একটি জেনেরিক ধারক প্রয়োজন হলে বিশদভাবে লেআউট উদ্দেশ্যে তারপর একটি <div> ব্যবহার <div> । যদি আপনি কোন অনুচ্ছেদের বর্ণনা করার জন্য একটি উপাদান প্রয়োজন হয় তবে <p> ব্যবহার <p>

দ্রষ্টব্য: এটি বুঝতে গুরুত্বপূর্ণ যে <div> এবং <p> উভয়ই ব্লক-লেভেল উপাদান যা অর্থাত্ বেশিরভাগ ব্রাউজার তাদের একই রকম আচরণ করবে।


দুটি উপাদান মধ্যে একমাত্র পার্থক্য শব্দার্থবিদ্যা। উভয় উপাদানগুলি ডিফল্টভাবে সিএসএসের নিয়ম প্রদর্শন করে: ব্লক (এভাবে ব্লক লেভেল) তাদের কাছে প্রয়োগ করা হয়; আরো কিছু (কিছু ক্ষেত্রে কিছুটা অতিরিক্ত মার্জিন ব্যতীত)। যাইহোক, পূর্বে হিসাবে, তারা উভয় semantics পদে ব্যাপকভাবে ভিন্ন।

<p> উপাদান, এর নামটি কিছুটা বোঝায়, অনুচ্ছেদের জন্য। সুতরাং, আপনি যখন অনুচ্ছেদ পাঠ্যের ব্লক তৈরি করতে চান তখন <p> ব্যবহার করা উচিত।

তবে <div> উপাদানটি তাত্পর্যপূর্ণভাবে অর্থহীন নয় এবং তাই জেনারিক ব্লক-লেভেল উপাদান হিসাবে ব্যবহার করা যেতে পারে - সাধারণত, লোকেরা লেআউটের মধ্যে এটি ব্যবহার করে কারণ এটি অর্থহীনভাবে অর্থহীন এবং সাধারণভাবে আপনার যা কিছু প্রয়োজন তা ব্যবহারের জন্য ব্যবহার করা যেতে পারে জন্য একটি ব্লক স্তরের উপাদান।

আরো বিস্তারিত জানার জন্য লিঙ্ক


DIV একটি জেনেরিক ব্লক স্তরের ধারক যা অন্যান্য ডিভি উপাদান সহ অন্য কোনও ব্লক বা ইনলাইন উপাদানের অন্তর্ভুক্ত থাকতে পারে, যেখানে P অনুচ্ছেদের (পাঠ্য) মোড়ানো হয়।


<p> একটি অনুচ্ছেদের ইঙ্গিত করে এবং সেমিকানিক মানে।

<div> কেবল অন্যান্য সামগ্রীর জন্য একটি ব্লক ধারক।

যে কোনও <p> যেতে পারে <div> যেতে পারে তবে বিপরীত সত্য নয়। <div> ট্যাগগুলিতে শিশু হিসাবে স্তরের স্তরের উপাদান থাকতে পারে। <p> উপাদানগুলি করতে পারে না।

এইচটিএমএল DTD এ একটি চেহারা।

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->




html