<p> এবং <ডিভ> এর মধ্যে পার্থক্য কী?


187

<p> এবং <ডিভ> এর মধ্যে পার্থক্য কী?

এগুলি কি বিনিময়যোগ্যভাবে ব্যবহার করা যায়? অ্যাপ্লিকেশন কি কি?


31
কোনও বৈধ এইচটিএমএল / এক্সএইচটিএমএলতে, ক্রান্তিকাল বা কঠোর, আপনি <p> অন্য কোনও <p> এর ভিতরে বাসা বাঁধতে পারবেন না যাতে <ডিভ> এবং <p> বিনিময় হয় না।
বায়রান জাগ

3
বায়রান - আপনি এই "শব্দার্থক" উত্তরগুলির সাথে প্রয়োজনীয় সমস্যাটি আঘাত করেছেন। সমস্যাটি হ'ল এইচটিএমএল <p> গুলি কৃত্রিমভাবে বাধা দেয় তাই তারা আলাদা আচরণ করে। যদি সেগুলি কেবল অবরুদ্ধ উপাদানগুলির সাথে অর্থার্থক অর্থ হ'ল ঠিক। তবে কেন আপনাকে অনুচ্ছেদে কোনও চিত্র এম্বেড করা থেকে বিরত রাখবেন?
dkretz

2
@ 117700 আপনি কি গৃহীত উত্তর পরিবর্তন করার বিষয়টি বিবেচনা করেছেন?
কার্ল রিখটার

মাথায় রাখার <div></div>জন্য উন্মুক্ত এবং বন্ধ ট্যাগগুলির প্রয়োজন, <p>নির্দিষ্ট পরিস্থিতিতে নয়
মার্ক শুলথিস

উত্তর:


-26

আগের কোড ছিল

<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 ট্যাগে অন্যান্য উপাদান থাকতে পারে। পি তা করতে বাধ্য করা উচিত নয়।


3
আমি আসলে কী বলতে চাইছি তা আমি জানি না। "সাইটে": কোন সাইট? "... এটি কাজ করতে": 'কাজ' এর অর্থ কী? উদ্দেশ্যমূলক রেন্ডারিং কি?
মার্সেল করপেল

4
সম্পূর্ণরূপে আমাকে অযৌক্তিক এই ধ্বনি: pউপাদানের পারেন অন্যান্য ইনলাইন উপাদানের (এইচটিএমএল 5 এর বৈশিষ্ট আলোচনা ধারণ phrasing উপাদানের (7.3 দেখুন) ), যা এর spanতাদের একজন অনেক প্রমুখ। তদুপরি, এটি ওপি-র প্রশ্নের উত্তর নয়: এটি pএবং এর মধ্যে পার্থক্য সম্পর্কে কিছুই বলে না div। এবং দয়া করে পড়ুন মন্তব্যগুলির উত্তরগুলি কীভাবে কাজ করে?
মার্সেল করপেল

@ মার্সেলকর্পেল তখন কেন এটি গৃহীত উত্তর? বিতর্ক নয়, ভাবছেন কেন সেখানে অসঙ্গতি রয়েছে।
আনশুল

3
@ আনশুল স্পষ্টতই ওপি'র পক্ষে কিছু কাজ করেছিল, তবে এটি প্রশ্নের উত্তর দেয় না। এই উত্তরের স্কোরটি দেখুন: এই মুহুর্তে -16। আপনি যদি না জানেন তবে: ওপি হ'ল একমাত্র তিনি উত্তর গ্রহণ করতে পারবেন, তবে সম্প্রদায়ের প্রত্যেকেই উপরে বা নীচে একটি উত্তর দিতে পারে।
মার্সেল কোরপেল

ঘৃণ্য পক্ষের দেরীতে, তবে: <p>ট্যাগগুলিতে প্রায়শই অন্যান্য উপাদান থাকে, যেমন <strong>বা <em>ইত্যাদি a কোনও <p>ট্যাগের বিষয়বস্তুতে এর নামের অর্থটি হওয়া উচিত: পাঠ্যের অনুচ্ছেদ। পাঠ্যের অনুচ্ছেদে প্রায়শই অতিরিক্ত মার্কআপ থাকে। এর সাথে দূর থেকেও অস্বাভাবিক বা ভুল কিছু নেই।
ডেভ নিউটন

296

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

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

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

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

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


আমার অভিজ্ঞতাটি হ'ল আপনি যদি কিছু সামগ্রীর কিছু অংশকে অন্য কিছু সামগ্রীর চেয়ে আলাদাভাবে বিন্যাস করতে চান তবে সেগুলি দুটি শব্দার্থগতভাবে স্বতন্ত্র এবং এইভাবে যাইহোক নির্বিচারে চিহ্নিত করা উচিত । যদি OTOH, তারা শব্দার্থগতভাবে পৃথক না হয়, তবে সম্ভবত তাদের একত্র করা উচিত। উভয় ক্ষেত্রেই, বিন্যাসের উদ্দেশ্যে কোনও উপাদান যুক্ত করার দরকার নেই, কারণ প্রথম ক্ষেত্রে এটি ইতিমধ্যে সেখানে শুরু হওয়া উচিত ছিল এবং দ্বিতীয় ক্ষেত্রে কোনও বিন্যাস চলছে না। তবে আবার, আমি একজন পিউরিস্ট এবং আমার সাইটগুলি সর্বদা 1995 এর মতো ফ্ল্যাশব্যাকের মতো দেখাচ্ছে
জার্গ ডব্লু মিত্তাগ

5
আপনি যখন <p>"সামগ্রীর অনুচ্ছেদে" ব্যবহার করতে বলবেন, তখন কি সামগ্রীটি অক্ষর এবং শব্দের আকারে থাকতে হবে? আপনি কি কখনও <p>অন্য কিছু ধরণের সামগ্রী যেমন চিত্রের বর্ণনা দিতে ব্যবহার করবেন?
ডিআরএস

1
@ ডিআরএস: <p> এর জন্য অনুমোদিত সামগ্রীটি হ'ল "ফ্রেসিং সামগ্রী" যা সাধারণ চরিত্রের ডেটার সাথে মিলিত বাক্য উপাদানগুলি নিয়ে গঠিত। বিটিডব্লিউ, চিত্রগুলি ফ্রেসিং উপাদানগুলির সাথে সম্পর্কিত যাতে আপনি সেগুলিকে <p> এর ভিতরে ব্যবহার করতে পারেন। তথ্যসূত্র: w3.org/TR/html-markup/p.html এবং w3.org/TR/html-markup/common-models.html#common.elem.phrasing । এইচটিএইচ
পাওলো

2
আপনি উল্লেখ করতে ভুলে গেছেন যে আপনি ডিভের সাথে থাকতে পারলে বাসা বাঁধতে পারবেন না। যেমন "এইচটিএমএল মধ্যে লেআউট তথ্য অন্তর্ভুক্ত করবেন না" ধরণের দৃষ্টিভঙ্গি: এইচটিএমএল ফাইলটি কীভাবে দেখা উচিত তা নিয়ে বিরক্ত না করে এটি লেখা সম্ভব নয়। আপনার ক্রম এবং ডিভের নেস্টিংয়ের পছন্দটি সর্বদা একটি প্রভাব ফেলবে - আপনি যদি এমন কোনও জাভাস্ক্রিপ্ট না লিখেন যা আপনার পৃষ্ঠাটিকে ছিঁড়ে ফেলে পুনর্গঠন করে না। সুতরাং "একটি জেনেরিক ধারক হিসেবে DIV আছে এইজন্য জন্য বিশুদ্ধরূপে বিন্যাস উদ্দেশ্যে " সঠিক বাক্যে কথন হয়।
মাস্টারেক্সিলো

কি হবে যদি আমি বরং ব্যবহার করতে চাই divপরিবর্তে p?
মেলাব

66

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


10
আপনি যদি রেন্ডারিং নিয়ন্ত্রণ করতে চান তবে আপনার সিএসএস ব্যবহার করা উচিত। ব্রাউজারগুলির বর্তমান ডিফল্টগুলির উপর নির্ভর করবেন না।
মেকানিকাল শামুক

15
ডিভ এবং পি ট্যাগগুলির মধ্যে কী পার্থক্য রয়েছে তা প্রশ্ন জিজ্ঞাসা করা হয়েছিল। এটি যে কোনও সিএসএস রিসেট ব্যবহার না করার জন্য এটি একটি তাৎপর্যপূর্ণ, বিশেষত যেহেতু এটি কেবল একটি ব্রাউজার ব্যবহার করে এমন কারও কাছে স্পষ্ট নয়।
ceejayoz

3
স্পষ্টতার জন্য ধন্যবাদ। আমি এই সঠিক পার্থক্যটি খুঁজছিলাম যেহেতু পি ট্যাগ ব্যবহার করার ফলে শীর্ষে (এবং নীচে সম্ভবত) মার্জিনের সাথে পাঠ্য উপস্থিত হতে পারে, তাই ভাবছিলাম যে স্থানটি কোথা থেকে আসছে। জায়গা থেকে মুক্তি পেতে প্রয়োজন।
হোয়াটসনাম

@ceejayoz মার্জিন? আমরা কিভাবে এটি দেখতে পারি?
জাভা

57

<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 -->

3
সুতরাং আপনি <p> এ <h1> রাখতে পারবেন না?
Koray Tugay

8

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

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

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

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


3
শেষ বাক্যটির প্রয়োজন নেই। এই সাইটের প্রায় সমস্ত প্রশ্নের জন্য সম্ভবত গুগল করা যেতে পারে, তবে এটি মূল বিষয় নয়। মূল বিষয়টি হ'ল ভবিষ্যতে একই প্রশ্নগুলির বিকাশকারীদের জন্য একটি সংস্থান তৈরি করা।
নিকফ

হ্যাঁ, তবে তিনি কিছু প্রাসঙ্গিক তথ্য দিয়ে আলোচনা শুরু করতে পারেন, যে কোনও উপায়ে এটি সম্পাদনা করতে পারে
আশীষ আগরওয়াল

1
যেহেতু পি এবং ডিভ উভয়ই ব্লক উপাদান, তাই কেন এমন হয় যে যখন এইচ 1 এলিমেন্টটি একটি ডিভের মধ্যে বাসা বেঁধে থাকে তবে এটি শৈলীর উত্তরাধিকারী হয় তবে এপি-তে বাসা বাঁধে না কেন? আপনাকে ধন্যবাদ
ফিরতি

@ রিটার্ন -১ আপনার ক্ষেত্রে ঠিক কী ঘটে তা আমি জানি না, তবে এইচ 1 হ'ল শিরোনাম, যা বিষয়বস্তুকে ফাংশন করে না এবং তাই অনুচ্ছেদের অভ্যন্তরে অনুমোদিত হয় না। মুদ্রিত পাঠ্যটি বিবেচনা করুন - এতে শিরোনাম এবং অনুচ্ছেদ রয়েছে তবে শিরোনাম অনুচ্ছেদের অংশ নয়।
ওসকার বার্গগ্রেন

7

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


7

ডাব্লু 3.org দ্বারা ডিজাইন করা স্ট্যান্ডার্ডটি দেখতে আরও ভাল। এখানে ঠিকানা: http://www.w3.org/

একটি "ডিআইভি" ট্যাগ "পি" ট্যাগটি মোড়াতে পারে যেখানে একটি "পি" ট্যাগ "ডিআইভি" ট্যাগটি মোড়ানো করতে পারে না-এখন পর্যন্ত আমি এই পার্থক্যটি জানি। আরও অন্যান্য পার্থক্য থাকতে পারে।


5

DIVএকটি গ্রুপিং উপাদান হিসাবে চিন্তা করুন । আপনি ডিআইভি উপাদানগুলিতে উপাদান রেখেছেন যাতে আপনি তাদের প্রান্তিককরণ সেট করতে পারেন

যেখানে "p"কেবল একটি নতুন অনুচ্ছেদ তৈরি করা।


3

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

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

উইকিপিডিয়া অনুসারে

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


2

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


2

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

<div>ওয়েবপৃষ্ঠায় কোনও ব্লক বা অঞ্চলের জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ এটি একটি শিরোনামের ক্ষেত্র তৈরি করতে ব্যবহৃত হতে পারে।

এগুলি সম্ভবত বিনিময়যোগ্য হিসাবে ব্যবহার করা যেতে পারে তবে আপনার উচিত হবে না।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.