উত্তর:
div
একটি ব্লক উপাদানspan
একটি ইনলাইন উপাদান ।এর অর্থ হ'ল শব্দার্থকভাবে এগুলি ব্যবহার করার জন্য, ডিভগুলি একটি নথির অংশগুলি মোড়ানোর জন্য ব্যবহার করা উচিত, যখন স্প্যানগুলি টেক্সট, চিত্রগুলি ইত্যাদির ছোট অংশগুলিকে মোড়ানোর জন্য ব্যবহার করা উচিত
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
<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 চালু হয়েছে ।
div
এবং span
শব্দার্থভাবে ব্যবহার করতে পারেন না । div
অর্থহীন জেনেরিক ব্লক স্তর উপাদান যখন span
অর্থহীন জেনেরিক ইনলাইন উপাদান।
কেবলমাত্র সম্পূর্ণতার জন্য, আমি আপনাকে এটি সম্পর্কে এটি চিন্তা করার জন্য আমন্ত্রণ জানাচ্ছি:
<p>
একটি অনুচ্ছেদ, একটি <li>
একটি তালিকা আইটেম ইত্যাদি and ইন্ডেন্ট ব্যবহার করে<blockquote>
বিষয়বস্তু একটি উদ্ধৃতি ছিল কিনা তা হয়েছে।<div>
এবং <span>
কারণ, অন্যথায়, লোকেরা সেই উপাদানগুলির অপব্যবহার করতে ফিরে যেতে পারে যার অর্থ রয়েছে।এখানে ইতিমধ্যে ভাল, বিস্তারিত উত্তর আছে, কিন্তু কোনও চাক্ষুষ উদাহরণ নেই, সুতরাং এখানে একটি দ্রুত চিত্রণ দেওয়া আছে:
<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>
একটি ইনলাইন ট্যাগ।
<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>
প্রকৃত গুরুত্বপূর্ণ পার্থক্যটি ইতিমধ্যে ক্রিসের উত্তরে উল্লেখ করা হয়েছে। তবে, এর প্রভাবগুলি সকলের কাছে সুস্পষ্ট হবে না।
একটি ইনলাইন উপাদান হিসাবে, <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>
"ব্লক উপাদান" এর তাত্পর্য নিহিত তবে কখনও স্পষ্ট করে বলা হয়নি। আমরা যদি সমস্ত তত্ত্বকে অগ্রাহ্য করি (তত্ত্বটি ভাল) তবে নিম্নলিখিতটি একটি বাস্তববাদী তুলনা। অনুসরণ:
<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.
এটি দেখায় যে কেবলমাত্র কোনও ডিভই ইনলাইন ব্যবহার করা উচিত নয় , এটি কেবল পছন্দসই প্রভাব ফেলবে না।
অন্যান্য উত্তরে উল্লিখিত হিসাবে, ডিফল্টরূপে div
একটি ব্লক উপাদান হিসাবে রেন্ডার করা span
হবে , যখন এর প্রসঙ্গে ইনলাইন রেন্ডার করা হবে। তবে উভয়েরই কোনও অর্থগত মূল্য নেই; আপনাকে স্টাইলিং এবং কোনও প্রদত্ত সামগ্রীর সামগ্রীতে একটি পরিচয় প্রয়োগের অনুমতি দেওয়ার জন্য এগুলি বিদ্যমান exist শৈলীগুলি ব্যবহার করে, আপনি div
একটি span
বিপরীত এবং বিপরীত মত একটি অভিনয় করতে পারেন ।
এর জন্য দরকারী স্টাইলগুলির মধ্যে div
একটিinline-block
উদাহরণ:
inline-block
গেম ওয়েব প্রকল্পগুলিতে আমি একটি দুর্দান্ত সাফল্য ব্যবহার করেছি ।
ডিভ একটি ব্লক উপাদান এবং স্প্যানটি একটি ইনলাইন উপাদান এবং এর প্রস্থ এটির সামগ্রীর উপর নির্ভর করে যেখানে ডিভ হয় না
আমি বলব যে আপনি যদি এই পৃষ্ঠাটি দেখতে কিছু স্প্যানিশ জানেন তবে সঠিকভাবে ব্যাখ্যা করা হয়েছে।
যাইহোক, একটি দ্রুত সংজ্ঞাটি হবে div
বিভাগগুলি বিভক্ত span
করার জন্য এবং অন্য ব্লক উপাদানগুলির মতো কোনও উপাদানকে কিছু ধরণের স্টাইল প্রয়োগ করার জন্য div
।
কীভাবে span
বনাম হতে পারে তার সাথে কিছু historicalতিহাসিক প্রসঙ্গ যোগ করতে চেয়েছিলেনdiv
এর ইতিহাস span
:
জুলাই 3, 1995-এ, বেঞ্জামিন সিডাব্লু সিটেলার কিছু নির্দিষ্ট ব্লকে স্টাইল প্রয়োগ করার জন্য একটি জেনেরিক পাঠ্য ধারক ট্যাগ প্রস্তাব করেন । স্টাইলশীটের সাথে ব্যবহার করা ব্যতীত রেন্ডারিং নিরপেক্ষ। পাঠ্যতা, অর্থ সম্পর্কে বনাম চারপাশে একটি বিতর্ক রয়েছে। বার্ট বোস ক্লাস অ্যাট্রিবিউট (শহর, ব্যক্তি, তারিখ ইত্যাদির মান সহ) এর মাধ্যমে উপাদানটির এক্সটেনসিবিলিটি প্রকৃতির উল্লেখ করছেন। পল প্রেসকড চিন্তিত যে উভয় উপাদানই অপব্যবহার করা হবে। তিনি "যে কোনও নতুন উপাদান পুরানোতে থাকা উচিত" উল্লেখ করে এবং "আমরা যদি কোনও শব্দার্থবিজ্ঞানহীন একটি ট্যাগ তৈরি করি তবে এটি যে কোনও জায়গায় ভুল হওয়া ছাড়া যে কোনও জায়গায় ব্যবহার করা যেতে পারে text এমন লেখার বিরোধিতা করছেন।আমাদের অবশ্যই লেখকদের তাদের ডকুমেন্টের শব্দার্থকে সঠিকভাবে ট্যাগ করতে বাধ্য করতে হবে। আমাদের অবশ্যই সম্পাদক বিক্রেতাদের তাদের ইন্টারফেসে সেই পছন্দটি স্পষ্ট করতে বাধ্য করতে হবে। "
আরএফসির খসড়া থেকে যা প্রবর্তন করে span
:
প্রথমত, অন্য যে কোনও উপাদান যথাযথ নয় এমন ক্ষেত্রে ল্যাং এবং বিআইডিআই বৈশিষ্ট্যগুলি বহন করতে জেনেরিক কনটেনারের প্রয়োজন; স্প্যানের একাদশটি সে উদ্দেশ্যে প্রবর্তিত হয়।
এর ইতিহাস div
:
ডিআইভির উপাদানগুলি বিভাগের শ্রেণিবিন্যাস হিসাবে এইচটিএমএল নথি কাঠামো গঠনে ব্যবহার করা যেতে পারে।
...
এইচটিএমএল 3.0 ডিআইভি উপাদানটির জন্য সমর্থন যোগ করার আগে সেন্টার নেটস্কেপ দ্বারা প্রবর্তিত হয়েছিল। এটি ব্যাপকভাবে স্থাপনার কারণে এটি এইচটিএমএল ৩.২ এ ধরে রাখা হয়েছে।
সংক্ষেপে, উভয় উপাদানই আরও শব্দার্থ-জেনেরিক ধারক প্রয়োজন থেকে উদ্ভূত হয়েছিল। স্ট্যানের <text>
পাঠ্যের উপাদানগুলির জন্য স্প্যানকে আরও জেনেরিক প্রতিস্থাপন হিসাবে প্রস্তাব করা হয়েছিল । ডিভ পৃষ্ঠাগুলি বিভক্ত করার সাধারণ উপায় হিসাবে প্রস্তাবিত হয়েছিল <center>
এবং কেন্দ্র-সারিবদ্ধকরণ সামগ্রীর জন্য ট্যাগ প্রতিস্থাপনের অতিরিক্ত সুবিধা ছিল । পৃষ্ঠা বিভাজক হিসাবে ইতিহাসের কারণে ডিভ সবসময়ই একটি ব্লক উপাদান হয়ে থাকে। স্প্যান সবসময়ই একটি ইনলাইন উপাদান হয়ে থাকে কারণ এর আসল উদ্দেশ্যটি পাঠ্য স্টাইলিং ছিল এবং আজ ডিভ এবং স্প্যান উভয়ই যথাক্রমে ডিফল্ট ব্লক এবং ইনলাইন প্রদর্শন বৈশিষ্ট্যযুক্ত জেনেরিক উপাদান হিসাবে উপস্থিত হয়েছে।
এইচটিএমএলে এমন ট্যাগ রয়েছে যা সামগ্রীতে কাঠামো বা শব্দার্থ যুক্ত করে। উদাহরণস্বরূপ <p>
ট্যাগটি অনুচ্ছেদ চিহ্নিত করতে ব্যবহৃত হয়। আর একটি উদাহরণ <ol>
অর্ডার করা তালিকার ট্যাগ।
উপরে বর্ণিতভাবে যখন এইচটিএমএলে কোনও উপযুক্ত ট্যাগ উপলব্ধ নেই, তখন সাধারণত ট্যাগ <div>
এবং <span>
ট্যাগগুলি অবলম্বন করা হয়।
<div>
ট্যাগ উভয় আগে ও পরে একটি লাইন বিরতি আছে একটি দস্তাবেজের একটি blocklevel অধ্যায় / বিভাগের চিহ্নিত করতে ব্যবহৃত হয়।
যেখানে ডিভ ট্যাগ ব্যবহার করা যেতে পারে তার উদাহরণগুলি শিরোনাম, পাদচরণ, নেভিগেশন ইত্যাদি However তবে এইচটিএমএল 5 এ এই ট্যাগগুলি ইতিমধ্যে সরবরাহ করা হয়েছে।
<span>
ট্যাগ একটি নথি একটি ইনলাইন অধ্যায় / বিভাগের চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণস্বরূপ একটি উপাদানটিতে ইনলাইন চিত্রগুলি যুক্ত করতে একটি স্প্যান ট্যাগ ব্যবহার করা যেতে পারে।
মনে রাখবেন, মূলত এবং সেগুলি কোনও কার্য সম্পাদন করে না। তারা কেবল তাদের ট্যাগ দ্বারা কার্যকারিতা সম্পর্কে সুনির্দিষ্ট নয় ।
এগুলি কেবল সিএসএসের সহায়তায় কাস্টমাইজ করা যায়।
এখন এটি আপনার প্রশ্নে আসছে:
এইচটিএমএলে একটি অনুচ্ছেদে বলুন, কিছু স্টাইলিং সহ স্প্যান ট্যাগ এক লাইনের অভ্যন্তরে ধরে রাখা কার্যকর হবে। এটি 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>
আপনার প্রয়োজনের ভিত্তিতে কখন ব্যবহার করা উচিত তা উভয়েরই সময় এবং কেস রয়েছে।
আশা করি উত্তরটি পরিষ্কার হয়ে যাবে। ধন্যবাদ.