এইচটিএমএল ট্যাগ <ডিভ> এবং <স্প্যান> এর মধ্যে পার্থক্য কী?


543

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

উত্তর:


582

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

উদাহরণ স্বরূপ:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

মনে রাখবেন যে কোনও ইনলাইন উপাদানের মধ্যে ব্লক-স্তরের উপাদান স্থাপন করা অবৈধ so

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... অবৈধ।


সম্পাদনা: এইচটিএমএল 5 হিসাবে কিছু ব্লক উপাদান কিছু ইনলাইন উপাদানের ভিতরে রাখা যেতে পারে। একটি সুন্দর পরিষ্কার তালিকা জন্য এখানে MDN রেফারেন্স দেখুন । <span>উপরেরটি এখনও অবৈধ, যেমন কেবল ফ্রেসিং সামগ্রী গ্রহণ করে এবং <div>প্রবাহ সামগ্রী content


আপনি কিছু দৃ concrete় উদাহরণ চেয়েছিলেন, তাই আমার বোলিং ওয়েবসাইট বোলসকে থেকে নেওয়া হয়েছে :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

ঠিক আছে, কি হচ্ছে?

আমার পৃষ্ঠার শীর্ষে, আমার একটি যৌক্তিক বিভাগ রয়েছে, "শিরোনাম"। যেহেতু এটি একটি বিভাগ, তাই আমি একটি ডিভ ব্যবহার করি (উপযুক্ত আইডি সহ)। এর মধ্যে আমার কয়েকটি বিভাগ রয়েছে: ব্যবহারকারী বার এবং আসল পৃষ্ঠা শিরোনাম। শিরোনাম উপযুক্ত ট্যাগ ব্যবহার করে h1। ইউজারবার, একটি বিভাগ হওয়ায় এটি একটিতে আবৃত div। এর মধ্যে, ব্যবহারকারীর নামটি একটিতে আবৃত থাকে span, যাতে আমি শৈলীর পরিবর্তন করতে পারি। আপনি দেখতে পাচ্ছেন, আমি spanশিরোনামে প্রায় 2 টি অক্ষরও জড়িয়ে রেখেছি - এটি আমার স্টাইলশীটে তাদের রঙ পরিবর্তন করতে দেয়।

এছাড়াও নোট করুন যে এইচটিএমএল 5 এ উপাদানগুলির একটি বিস্তৃত নতুন সেট অন্তর্ভুক্ত রয়েছে যা সাধারণ পৃষ্ঠার কাঠামো যেমন নিবন্ধ, বিভাগ, ন্যাভি ইত্যাদির সংজ্ঞা দেয় includes

এইচটিএমএল 5 কার্যনির্বাহী খসড়ার ৪.৪ অনুচ্ছেদ তাদের তালিকাভুক্ত করে এবং তাদের ব্যবহার সম্পর্কে ইঙ্গিত দেয়। এইচটিএমএল 5 এখনও একটি কার্যকরী অনুষঙ্গ, তাই কিছুই এখনও "চূড়ান্ত" নয়, তবে এটি অত্যন্ত সন্দেহজনক যে এই উপাদানগুলির কোনওটি কোথাও চলছে। একটি জাভাস্ক্রিপ্ট হ্যাক রয়েছে যা আপনি যদি IE এর কিছু পুরানো সংস্করণে এই উপাদানগুলি স্টাইল করতে চান তবে আপনাকে ব্যবহার করতে হবে - document.createElementআপনার উত্সে এই উপাদানগুলির কোনও নির্দিষ্ট হওয়ার আগে আপনাকে প্রতিটি উপাদানগুলির একটি তৈরি করতে হবে । এমন একটি গ্রন্থাগার রয়েছে যা আপনার জন্য এটি যত্ন নেবে - একটি দ্রুত গুগল অনুসন্ধান html5shiv চালু হয়েছে


5
ক্রিস, আপনার পাঠ্যে একটি ভুল আছে: আপনি যদি স্প্যানের স্টাইলটি "ব্লক" হিসাবে সেট করেন, তবুও এটি ব্লক-স্তরের উপাদানটির চারপাশে মোড়ানো অবৈধ!
কনরাড রুডল্ফ

7
তাদের সাথে কোনও অর্থ সংযুক্ত না হওয়ায় আপনি ব্যবহার করতে পারেন divএবং spanশব্দার্থভাবে ব্যবহার করতে পারেন না । divঅর্থহীন জেনেরিক ব্লক স্তর উপাদান যখন spanঅর্থহীন জেনেরিক ইনলাইন উপাদান।
এপার্নেভ

9
@ অপনারভে এখনও তাদের ব্লকটিতে শব্দার্থক রয়েছে বনাম ইনলাইন উপাদানগুলি প্রবাহের নথির বিভিন্ন বিষয় বোঝায়, উভয়কে পার্সিং দৃষ্টিকোণ থেকে এবং "কী ঘটছে তা নির্ধারণ করার জন্য এই উত্সটি পড়া" থেকে।
ক্রিস মারাস্তি-জর্জি

20
"শব্দার্থবিজ্ঞান (গ্রীক সামান্টিক থেকে, স্মটিকের নিউটার বহুবচন থেকে] [১] [২] অর্থ অর্থ অধ্যয়ন। এটি শব্দ, বাক্য, চিহ্ন এবং চিহ্নগুলির সাথে সংকেতকারীদের মধ্যে সম্পর্কের উপর দৃষ্টি নিবদ্ধ করে এবং তারা কী বলে, তাদের ডোনোটটা । " "ডিভ" এবং "স্প্যান" সাইনফায়ারগুলি অবশ্যই কোনও কিছুর পক্ষে দাঁড়ায়। এইচটিএমএল স্পেকটিতে ব্লক এবং ইনলাইন উপাদানগুলির জন্য কী রয়েছে তার দুর্দান্ত ভাঙ্গন রয়েছে। w3.org/TR/html401/struct/global.html#h-7.5.3 । এইচটিএমএল 5 খসড়া এমনকি তাদের পৃথক গোষ্ঠীগুলিতে রাখে - গ্রুপিং সামগ্রী এবং পাঠ্য-স্তরের শব্দার্থকতা। dev.w3.org/html5/spec/Overview.html
ক্রিস মারাস্তি-জর্জি

16
আপনি আমাকে "
ডিভ

390

কেবলমাত্র সম্পূর্ণতার জন্য, আমি আপনাকে এটি সম্পর্কে এটি চিন্তা করার জন্য আমন্ত্রণ জানাচ্ছি:

  • এইচটিএমএলে সংজ্ঞায়িত প্রচুর ব্লক উপাদান (আগে এবং পরে লাইনব্রেক) এবং প্রচুর ইনলাইন ট্যাগ (লাইন ব্রেক নেই)।
  • তবে আধুনিক এইচটিএমএলে সমস্ত উপাদানগুলির অর্থ হওয়া উচিত : এক <p>একটি অনুচ্ছেদ, একটি <li>একটি তালিকা আইটেম ইত্যাদি and ইন্ডেন্ট ব্যবহার করে<blockquote> বিষয়বস্তু একটি উদ্ধৃতি ছিল কিনা তা হয়েছে।
  • সুতরাং, আপনি যা করার চেষ্টা করছেন তার কোনও অর্থ না থাকলে আপনি কী করবেন? এর কোন অর্থ নেই400px-প্রশস্ত কলামটির , আছে কি? আপনি কেবল আপনার পাঠ্যের কলামটি 400px প্রশস্ত করতে চান কারণ এটি আপনার ডিজাইনের জন্য উপযুক্ত।
  • এই কারণে, তারা এইচটিএমএলে আরও দুটি উপাদান যুক্ত করেছে: জেনেরিক বা অর্থহীন উপাদান <div>এবং <span>কারণ, অন্যথায়, লোকেরা সেই উপাদানগুলির অপব্যবহার করতে ফিরে যেতে পারে যার অর্থ রয়েছে।

20
এটি একটি সঠিক ব্যাখ্যা। কেন আমি উত্তর হিসাবে এটি গ্রহণ করা হয় নি অবাক।
Apnerve

16
কারণ এটি পৃষ্ঠার একেবারে নিচে
জেসন সেব্রিং

12
কেবলমাত্র একটি ভাল উত্তর গৃহীত হয় নি, এর অর্থ এই নয় যে আপনি এটিকে ভোট দিতে পারবেন না। দরকারী স্পষ্টকরণের জন্য +1।
সাইবারফোনিক

8
জেনে ভাল লাগছে, তবে এটি মূল প্রশ্নের উত্তর দেয় না, কারণ এটি ডিভ এবং স্প্যান উপাদানগুলির মধ্যে পার্থক্য ব্যাখ্যা করে না।
তেহওয়ান

216

এখানে ইতিমধ্যে ভাল, বিস্তারিত উত্তর আছে, কিন্তু কোনও চাক্ষুষ উদাহরণ নেই, সুতরাং এখানে একটি দ্রুত চিত্রণ দেওয়া আছে:

ডিভ এবং স্প্যান মধ্যে পার্থক্য

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>এটি একটি ব্লগ ট্যাগ, যখন <span>একটি ইনলাইন ট্যাগ।


16
সিএসএস ছাড়াই তাদের বিন্যাসে আলাদা প্রভাব রয়েছে! আমি এই প্রথম দেখলাম!
গ্রিনআসজেড

2
আপনাকে ধন্যবাদ, আমি এই উত্তরটিকে উঁচু করে তুলেছি কারণ এটি খুব দ্রুত উত্তর দেয় যে ডিভের একটি পরবর্তী লাইন রয়েছে
স্ক্রিপ্ট কিটি

4
আমার মতো নতুনদের ব্যাখ্যা করার জন্য আপনাকে ধন্যবাদ :-)
অরিত্র চ্যাটার্জি

73

<div>এটি একটি ব্লক-স্তর উপাদান এবং <span>একটি ইনলাইন উপাদান।

আপনি কিছু ইনলাইন পাঠ্য সহ কিছু করতে চেয়েছিলেন, <span>যেহেতু এটি একটি লাইন ব্রেক আনবে না যেতে উপায় <div>would।


যেমনটি অন্যদের দ্বারা উল্লিখিত হয়েছে, এর প্রতিটিটির সাথে কিছু শব্দার্থক নিহিত রয়েছে, সর্বাধিক উল্লেখযোগ্যভাবে সত্য যে <div>এটি নথিতে একটি যৌক্তিক বিভাগকে বোঝায়, সম্ভবত কোনও নথির কোনও অংশ বা কোনও কিছুর মতোই, একটি লা:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

1
ডিভগুলি ইনলাইন (ডিসপ্লে: ইনলাইন;) এবং স্প্যানের জন্য বিপরীতে করা যায় তবে এটি সেরা ব্যাখ্যা explanation এগুলি মোড়কের ট্যাগ হয়, স্প্যানটি সাধারণত বাক্য বা হাইলাইট করা পাঠ্যের জন্য ব্যবহৃত হয়, বিভাগগুলির জন্য ডিভ।
রস

3
আমি এই বিষয়টি সম্পর্কে সচেতন যে আপনি এটি সিএসএসের মাধ্যমে সংশোধন করতে পারেন, তবে এটি একটি অন্য প্রযুক্তি প্রবর্তন করে। এইচটিএমএল নিজে থেকেই দাঁড়াতে পারে এবং এটি যখন হয় তখন একটি ডিভ ইনলাইন হয় না এবং এটি এর খাঁটি আকারে হওয়ার ইচ্ছা হয় না।
জেসন বুটিং 16

বিভিন্ন পরিস্থিতিতে কীভাবে এইচটিএমএল উপাদানগুলি সঠিকভাবে ব্যবহার করতে হয় সে সম্পর্কে ব্যাখ্যা করার মতো কোনও ভাল বই রয়েছে।
এমকো 10

@ এমকো - আমি জানি না, সত্যি বলতে। সর্বোত্তম অভিজ্ঞতার শিক্ষক। শেষ পর্যন্ত, প্রতি "সঠিক" উত্তর নেই, কেবল আপনার পরিস্থিতি এবং আপনার উদ্দেশ্যে কাজ করে এমনটি রয়েছে। ;)
জেসন বুটিং

30

প্রকৃত গুরুত্বপূর্ণ পার্থক্যটি ইতিমধ্যে ক্রিসের উত্তরে উল্লেখ করা হয়েছে। তবে, এর প্রভাবগুলি সকলের কাছে সুস্পষ্ট হবে না।

একটি ইনলাইন উপাদান হিসাবে, <span>কেবলমাত্র অন্যান্য ইনলাইন উপাদান থাকতে পারে। নিম্নলিখিত কোডটি তাই ভুল:

<span><p>This is a paragraph</p></span>

উপরের কোডটি বৈধ নয়। ব্লক-স্তরীয় উপাদানগুলিকে মোড়ানোর জন্য, অন্য একটি ব্লক-স্তর উপাদান অবশ্যই ব্যবহার করা উচিত (যেমন <div>)। অন্যদিকে, <div>কেবল ব্লক-স্তরের উপাদানগুলি আইনী এমন জায়গায় ব্যবহার করা যেতে পারে।

তদ্ব্যতীত, এই নিয়মগুলি (এক্স) এইচটিএমএলগুলিতে স্থির হয় এবং সিএসএস বিধিগুলির উপস্থিতিতে এগুলি পরিবর্তন করা হয় না ! সুতরাং নিম্নলিখিত কোড আছে এছাড়াও ভুল!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

7
@ ফাইজান কীভাবে এটি প্রাসঙ্গিক? এটিও ভুল: প্রতিটি ব্রাউজার এই মার্কআপের জন্য ধারাবাহিক ফলাফল আনবে না। আপনি যে ডক্টাইপটি ব্যবহার করেন তার উপর নির্ভর করে (এবং, আবার ব্রাউজার), এটি কিছুটা নাও চালাতে পারে এবং পরিবর্তে একটি বৈধতা ত্রুটির দিকে পরিচালিত করে।
কনরাড রুডল্ফ

আমি দেখতে পাচ্ছি যে কিছু ব্রাউজার অবৈধ কোড চালানোর জন্য যথেষ্ট দক্ষ। কেন এটি দৌড়েছে। আপনি কি আমাকে এইচটিএমএল জন্য একটি ভাল বৈধকারীর প্রস্তাব দিতে পারেন?
ফাইজান

6
"তোমরা যা কর রক্ষণশীল এবং উদার হতে কি স্বীকার করি" en.wikipedia.org/wiki/Robustness_principle
jldupont

5
স্যুপ ক্যান্টিনে আপনাকে স্বাগতম। অ-বৈধ এইচটিএমএল খাওয়া ব্রাউজারগুলি অত্যন্ত কারণ হিসাবে অনুকূল হয় তবে পিক এইচটিএমএল পার্সারগুলি আদর্শ নয়। প্রতিটি ব্রাউজারের লবণের মূল্য (যেমন 'এইচটিএমএল'র সাথে সামঞ্জস্যপূর্ণ) এটিকে স্পষ্ট করে তুলতে কোনও ধরণের' স্যুপ 'টাইপ (অভ্যন্তরীণ) লাইব্রেরি ব্যবহার করে।
ack

8

"ব্লক উপাদান" এর তাত্পর্য নিহিত তবে কখনও স্পষ্ট করে বলা হয়নি। আমরা যদি সমস্ত তত্ত্বকে অগ্রাহ্য করি (তত্ত্বটি ভাল) তবে নিম্নলিখিতটি একটি বাস্তববাদী তুলনা। অনুসরণ:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

সৃষ্টি করে:

This paragraph has a span.

This paragraph

has
a div.

এটি দেখায় যে কেবলমাত্র কোনও ডিভই ইনলাইন ব্যবহার করা উচিত নয় , এটি কেবল পছন্দসই প্রভাব ফেলবে না।


6

অন্যান্য উত্তরে উল্লিখিত হিসাবে, ডিফল্টরূপে divএকটি ব্লক উপাদান হিসাবে রেন্ডার করা spanহবে , যখন এর প্রসঙ্গে ইনলাইন রেন্ডার করা হবে। তবে উভয়েরই কোনও অর্থগত মূল্য নেই; আপনাকে স্টাইলিং এবং কোনও প্রদত্ত সামগ্রীর সামগ্রীতে একটি পরিচয় প্রয়োগের অনুমতি দেওয়ার জন্য এগুলি বিদ্যমান exist শৈলীগুলি ব্যবহার করে, আপনি divএকটি spanবিপরীত এবং বিপরীত মত একটি অভিনয় করতে পারেন ।

এর জন্য দরকারী স্টাইলগুলির মধ্যে divএকটিinline-block

উদাহরণ:

  1. http://dustwell.com/div-span-inline-block.html

  2. সিএসএস প্রদর্শন: ইনলাইন বনাম ইনলাইন-ব্লক

inline-blockগেম ওয়েব প্রকল্পগুলিতে আমি একটি দুর্দান্ত সাফল্য ব্যবহার করেছি ।


3
যদি তাদের কোনও শব্দার্থক মান না থাকে তবে তাদের মধ্যে কেবল একটিই থাকবে। একটিতে ব্লক স্তরের বিভাগ বোঝানো হয় - অন্যটি, একটি ইনলাইন স্প্যান
ক্রিস মারাস্তি-জর্জি

3

ডিভ একটি ব্লক উপাদান এবং স্প্যানটি একটি ইনলাইন উপাদান এবং এর প্রস্থ এটির সামগ্রীর উপর নির্ভর করে যেখানে ডিভ হয় না


3

আমি বলব যে আপনি যদি এই পৃষ্ঠাটি দেখতে কিছু স্প্যানিশ জানেন তবে সঠিকভাবে ব্যাখ্যা করা হয়েছে।

যাইহোক, একটি দ্রুত সংজ্ঞাটি হবে divবিভাগগুলি বিভক্ত spanকরার জন্য এবং অন্য ব্লক উপাদানগুলির মতো কোনও উপাদানকে কিছু ধরণের স্টাইল প্রয়োগ করার জন্য div


স্প্যানিশ জানার দরকার নেই, ইংরেজি সংস্করণটি <span> - এইচটিএমএল | MDN
ব্যবহারকার 34660

3

কীভাবে spanবনাম হতে পারে তার সাথে কিছু historicalতিহাসিক প্রসঙ্গ যোগ করতে চেয়েছিলেনdiv

এর ইতিহাস span:

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

- উত্স (w3 উইকি)

আরএফসির খসড়া থেকে যা প্রবর্তন করে span:

প্রথমত, অন্য যে কোনও উপাদান যথাযথ নয় এমন ক্ষেত্রে ল্যাং এবং বিআইডিআই বৈশিষ্ট্যগুলি বহন করতে জেনেরিক কনটেনারের প্রয়োজন; স্প্যানের একাদশটি সে উদ্দেশ্যে প্রবর্তিত হয়।

- উত্স (আইইটিএফ খসড়া)

এর ইতিহাস div:

ডিআইভির উপাদানগুলি বিভাগের শ্রেণিবিন্যাস হিসাবে এইচটিএমএল নথি কাঠামো গঠনে ব্যবহার করা যেতে পারে।

...

এইচটিএমএল 3.0 ডিআইভি উপাদানটির জন্য সমর্থন যোগ করার আগে সেন্টার নেটস্কেপ দ্বারা প্রবর্তিত হয়েছিল। এটি ব্যাপকভাবে স্থাপনার কারণে এটি এইচটিএমএল ৩.২ এ ধরে রাখা হয়েছে।

এইচটিএমএল 3.2 স্পেক

সংক্ষেপে, উভয় উপাদানই আরও শব্দার্থ-জেনেরিক ধারক প্রয়োজন থেকে উদ্ভূত হয়েছিল। স্ট্যানের <text>পাঠ্যের উপাদানগুলির জন্য স্প্যানকে আরও জেনেরিক প্রতিস্থাপন হিসাবে প্রস্তাব করা হয়েছিল । ডিভ পৃষ্ঠাগুলি বিভক্ত করার সাধারণ উপায় হিসাবে প্রস্তাবিত হয়েছিল <center>এবং কেন্দ্র-সারিবদ্ধকরণ সামগ্রীর জন্য ট্যাগ প্রতিস্থাপনের অতিরিক্ত সুবিধা ছিল । পৃষ্ঠা বিভাজক হিসাবে ইতিহাসের কারণে ডিভ সবসময়ই একটি ব্লক উপাদান হয়ে থাকে। স্প্যান সবসময়ই একটি ইনলাইন উপাদান হয়ে থাকে কারণ এর আসল উদ্দেশ্যটি পাঠ্য স্টাইলিং ছিল এবং আজ ডিভ এবং স্প্যান উভয়ই যথাক্রমে ডিফল্ট ব্লক এবং ইনলাইন প্রদর্শন বৈশিষ্ট্যযুক্ত জেনেরিক উপাদান হিসাবে উপস্থিত হয়েছে।


2

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

উপরে বর্ণিতভাবে যখন এইচটিএমএলে কোনও উপযুক্ত ট্যাগ উপলব্ধ নেই, তখন সাধারণত ট্যাগ <div>এবং <span>ট্যাগগুলি অবলম্বন করা হয়।

<div>ট্যাগ উভয় আগে ও পরে একটি লাইন বিরতি আছে একটি দস্তাবেজের একটি blocklevel অধ্যায় / বিভাগের চিহ্নিত করতে ব্যবহৃত হয়।

যেখানে ডিভ ট্যাগ ব্যবহার করা যেতে পারে তার উদাহরণগুলি শিরোনাম, পাদচরণ, নেভিগেশন ইত্যাদি However তবে এইচটিএমএল 5 এ এই ট্যাগগুলি ইতিমধ্যে সরবরাহ করা হয়েছে।

<span>ট্যাগ একটি নথি একটি ইনলাইন অধ্যায় / বিভাগের চিহ্নিত করতে ব্যবহৃত হয়।

উদাহরণস্বরূপ একটি উপাদানটিতে ইনলাইন চিত্রগুলি যুক্ত করতে একটি স্প্যান ট্যাগ ব্যবহার করা যেতে পারে।


2

মনে রাখবেন, মূলত এবং সেগুলি কোনও কার্য সম্পাদন করে না। তারা কেবল তাদের ট্যাগ দ্বারা কার্যকারিতা সম্পর্কে সুনির্দিষ্ট নয়

এগুলি কেবল সিএসএসের সহায়তায় কাস্টমাইজ করা যায়।

এখন এটি আপনার প্রশ্নে আসছে:

এইচটিএমএলে একটি অনুচ্ছেদে বলুন, কিছু স্টাইলিং সহ স্প্যান ট্যাগ এক লাইনের অভ্যন্তরে ধরে রাখা কার্যকর হবে। এটি HTML এ লাইনের স্তর বা বিবৃতি স্তরের এক ধরণের।

উদাহরণ:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

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

ডিআইভি ব্লক স্তর

উদাহরণ:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

আপনার প্রয়োজনের ভিত্তিতে কখন ব্যবহার করা উচিত তা উভয়েরই সময় এবং কেস রয়েছে।

আশা করি উত্তরটি পরিষ্কার হয়ে যাবে। ধন্যবাদ.


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