<img> ট্যাগটি সঠিকভাবে কীভাবে বন্ধ করবেন?


122
<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

এর মধ্যে কোনটি গুলি সঠিক?


6
প্রশ্নটি হল "কোনও <img> ট্যাগ সঠিকভাবে কীভাবে বন্ধ করবেন?" যা একটি আসল প্রশ্ন এবং উত্তরগুলি কার্যকর। এই প্রশ্নটি বন্ধ করা উচিত হয়নি।

3
প্রশ্নটি বর্তমানে ঠিক আছে। এটা না অসম্পূর্ণ, মাত্রাতিরিক্ত বিস্তৃত, অথবা rhetorial, দ্ব্যর্থক অস্পষ্ট। নীচে একটি দুর্দান্ত উত্তর আছে।
ডেভিড জে।

নিম্নলিখিত উত্তরগুলির মধ্যে কোনটি সঠিক তা আমি জানি না, তবে মজার বিষয় হল ফায়ারফক্সের কোড পরিদর্শক ট্যাগের শেষে </ i>> যোগ করেন যদি আপনি এটি না রাখেন। এবং আই না। এটি আমার মহাবিশ্বে তাৎপর্যপূর্ণ।
চিওয়দা

পিএস ড্রিমওয়েভার /> এক্সএইচটিএমএল ট্যাগ সন্নিবেশ করায়।
চিভদা

উত্তর:


50
<img src='stackoverflow.png' />

সূক্ষ্মভাবে কাজ করে এবং ট্যাগটি সঠিকভাবে বন্ধ করে। altদৃষ্টি প্রতিবন্ধী লোকদের জন্য বৈশিষ্ট্য যুক্ত করার জন্য সেরা ।


4
এটি সঠিক যে <img />[এক্স] এইচটিএমএল / এক্সএমএলে বৈধ, যদিও আজকাল এক্সএইচটিএমএলটির ব্যবহার খুব বিরল এবং যদি আপনার সার্ভারটি পৃষ্ঠাগুলি পরিবেশন করে তবে text/htmlআপনাকে যা ভাবতে হবে তা হল বৈধ এইচটিএমএল লেখা। এইচটিএমএল অ্যাপ্লিকেশনটি এক্সএইচটিএমএলে স্থানান্তরিত করার মত সমস্যাগুলি শূন্যের নিকটে।
ফ্যাব্রেসিও মাট্টি

1
উপরের উত্তরটি ডাব্লু 3 সি এর এইচটিএমএল চেকারের সাথে বৈধতা প্রমাণ করতে ব্যর্থ হবে যদি 4.01 ট্রানজিশনাল বা তারও বেশি লক্ষ্য করে target ডাব্লু 3 সি মার্কআপ বৈধকরণ পরিষেবাও দেখুন । আমি বিশ্বাস করি উপরের উত্তরটির জন্য এইচটিএমএল 5 বা এক্সএইচটিএমএল প্রয়োজন। বৈধতা ব্যর্থতা এড়ানোর জন্য, আপনাকে এটি ব্যবহার করতে হবে <img src='stackoverflow.png'>(যদি তা আপনার কাছে গুরুত্বপূর্ণ হয়)।
jww

1
@ ফ্যাব্রেসিওম্যাটé আপনি প্রকৃত ব্যবহারে মারাত্মকভাবে অল্প মূল্যবান xhtml। সংস্থাটি যত বড়, তারা সম্ভবত এইচটিএমএল থেকে এক্সএইচটিএমএল, বা এক্সএইচটিএমএল (সহজে / দ্রুত পার্সিংয়ের জন্য) এর মতো html5 ফর্ম্যাট করে বা আপনি মাইক্রোডাটা, বা ixbrl এর মতো বর্ধিত মার্কআপের সাথে কাজ করেন।
রবার্ট ম্যাককি

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

রব - 6 বছর আগে একটি সমস্যা ছিল। এটি এটি ঠিক করে ফেলেছিল। অনুমান এখন ব্রাউজারগুলি আরও ভাল
এড হিল

163

এটি একটি বৈধ HTML5 এবং এটি বন্ধ না করে এটি একেবারে ঠিক। এটি একটি তথাকথিত শূন্য উপাদান:

<img src='stackoverflow.png'>

নিম্নলিখিতটি বৈধ এক্সএইচটিএমএল ট্যাগ। তাদের বন্ধ করতে হবে। পরবর্তীটি এইচটিএমএল 5 এও ভাল আছে:

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

5
এটি কেবল বৈধ HTML5 নয়, HTML4 তেও বৈধ valid আপনি যেমন বলেছিলেন তেমন এইচটিএমএলকে স্ব-ক্লোজিং "শূন্য" উপাদানগুলির প্রয়োজন হয় না। সুসংগত উত্তরের জন্য +1।
ফ্যাব্রেসিও মাট্টু

2
এইচটিএমএল 5 বা এক্সএইচটিএমএল 4.01 ট্রানজিশনাল বা তারও বেশি লক্ষ্য করে যদি ডাব্লু 3 সি এর এইচটিএমএল চেকারের সাথে বৈধতা দিতে ব্যর্থ হয়। ডাব্লু 3 সি মার্কআপ বৈধকরণ পরিষেবাও দেখুন । আপনাকে এটি ব্যবহার করতে হবে <img src='stackoverflow.png'>(যদি তা আপনার কাছে গুরুত্বপূর্ণ হয়)।
jww

বহু বছর পরে মন্তব্য করা হচ্ছে ... <img src="about:logo" alt="about:logo">ফায়ারফক্স 76 এর about:logoপৃষ্ঠায় ট্যাগটি দেখে বিভ্রান্ত হয়েছেন ! যদিও document.body.innerHTMLশো <img src=\"about:logo\" alt=\"about:logo\">... খুব ভাল উত্তর ...
এস.গোস্বামী

4

আসলে, এইচটিএমএল 5 এ কেবল প্রথমটি বৈধ

<img src='stackoverflow.png'>  

কেবলমাত্র শেষ দুটি এক্সএইচটিএমএলে বৈধ

<img src='stackoverflow.png'></img>  
<img src='stackoverflow.png' />

( altকঠোরভাবে প্রয়োজনীয় না হলেও, _usally_ একটি বৈশিষ্ট্যও অন্তর্ভুক্ত করা উচিত)।

এটি বলেছিল, আপনার এইচটিএমএল 5 পৃষ্ঠাটি সম্ভবত উদ্দেশ্য হিসাবে প্রদর্শিত হবে কারণ ব্রাউজারগুলি আপনার এইচটিএমএলকে এটি কী বোঝাতে চেয়েছিল তা পুনর্লিখন বা ব্যাখ্যা করবে। যে পারে এর অর্থ তা থেকে উদাহরণস্বরূপ, একটি ট্যাগ যায়,
<div />মধ্যে <div></div>। অথবা এটি কেবল চূড়ান্ত স্ল্যাশটিকে উপেক্ষা করে <img ... />
2016 দেখুন: লিগ্যাসি বৈধতার জন্য এইচটিএমএল 5 কে এক্সএইচএমএল 5.0 হিসাবে পরিবেশন করুন।
দেখুন: 2011 আলোচনা এবং অতিরিক্ত লিঙ্কগুলি এখানে, যদিও সময়ের সাথে সাথে কিছু বিট পরিবর্তিত হতে পারে

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

সুতরাং, আপনি সম্ভবত তিনটি বিকল্পের যে কোনওটির সাথে পালাতে পারবেন,
যে কোনওটির সাথে পালাতে পারবেন কেবলমাত্র প্রথমটি এইচটিএমএল 5 স্ট্যান্ডার্ডকে মেনে চলে এবং এটি এইচটিএমএল 5 যাচাইকারীর পাস করার গ্যারান্টিযুক্ত।

একটি দুর্দান্ত কৌশল হতে পারে:

  • ক্লোজিং স্ল্যাশ ছাড়াই নতুন কোড লিখুন।
  • কোডটি পুনঃ-ফ্যাক্টরি করার সময়, যখন আপনি সেগুলি জুড়ে চলেছেন তেমনই কাছের চিত্রের ট্যাগগুলি আপডেট করুন।
  • আপনি যে লেগ্যাসি ফাইলগুলিতে স্পর্শ করেন না সেগুলির ট্যাগ সম্পর্কে অতিরিক্ত চিন্তা করবেন না, যদি না কোনও নির্দিষ্ট প্রয়োজন দেখা দেয়।

এখানে ট্যাগগুলির একটি তালিকা যা এইচটিএমএল 5 এ বন্ধ করা উচিত নয় :

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen> (HTML 5.2 Draft removed)

1
এটি প্রযুক্তিগতভাবে ভুল। একটি স্ব-বন্ধের অকার্যকর উপাদান HTML এ পুরোপুরি বৈধ 5. দেখুন html.spec.whatwg.org/#start-tags যা করতে হবে <img src='stackoverflow.png' />এক্সএইচটিএমএল এবং HTML 5. কোনো সংস্করণ বৈধ
রবার্ট McKee

1
@ রবার্টএমসিকি না, এটি প্রযুক্তিগতভাবে সঠিক। ক্লোজিং স্ল্যাশ ব্যবহারের অনুমতি দেওয়া হয়েছে এবং ত্রুটি হিসাবে চিহ্নিত করা হবে না, কোনও এইচটিএমএল স্পেসিফিকেশনে কোথাও আপনি দেখতে পাবেন না যে এটি ব্যবহৃত হবে বলে নির্দিষ্ট করা আছে। পুরানো ওয়েব সাইটগুলি এক্সএইচটিএমএল / এক্সএমএল ভিত্তিক না ভাঙার অনুমতি দেওয়া হয়েছে তবে শব্দাবলীর সাহায্যে বা উদাহরণ হিসাবে আপনি যে কোনও এইচটিএমএল অনুমান প্রদর্শন করতে পারবেন না যেখানে ডাব্লু 3 সি দ্বারা নির্দিষ্ট করা হয়েছে সেখানে এই ট্যাগগুলিতে ক্লোজিং স্ল্যাশ ব্যবহার করা হবে here বা WHATWG।
রব

@ রব WHATWG নথি অনুসারে আমি 12.1.2.1.6 বিভাগে উপরে লিঙ্ক করেছি - Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.img বিভাগ 12.1.2 অনুযায়ী একটি অকার্যকর উপাদান
রবার্ট ম্যাককি

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

1
@ রব হ্যাঁ, এটি alচ্ছিক তবে এটি করার জন্য সম্পূর্ণ বৈধ। যা বিবৃতিটি Actually, only the first one is valid in HTML5প্রযুক্তিগতভাবে ভুল করে তোলে । দ্বিতীয়টি HTML5 তেও বৈধ 5 প্রয়োজনীয় নয়, তবে বৈধ। নূন তর্ক করছে যে এটি প্রয়োজনীয়। কেবলমাত্র সেই নির্দিষ্টকরণ অনুসারে, ট্যাগের স্ব-সমাপনী ফর্মটি ব্যবহার করে এক্সএইচটিএমএল এবং এইচটিএমএলের সমস্ত বর্তমান ফর্মগুলিতে বৈধ।
রবার্ট ম্যাককি

2

আপনার ব্যবহার করা উচিত ট্যাগগুলির সর্বোত্তম ব্যবহার:

<img src="" alt=""/>

এছাড়াও আপনি এইচটিএমএল 5 এ ব্যবহার করতে পারেন:

<img src="" alt="">

এই দুটি এইচটিএমএল 5 এ সম্পূর্ণ বৈধ তাদের মধ্যে একটি বাছাই করুন এবং এর সাথে আঁকুন।


প্রথমটি সর্বোত্তম নয় যে এটি কোনও এইচটিএমএল স্ট্যান্ডার্ডে নির্দিষ্ট না হওয়ার পরে দ্বিতীয়টি। প্রথমটি কেবল historicalতিহাসিক কারণে অনুমোদিত! (পুরানো ওয়েব সাইটগুলিতে এক্সএইচটিএমএল / এক্সএমএল ব্যবহারের সাথে সামঞ্জস্যতা যা ভঙ্গ হবে তা ব্রাউজারগুলি এড়াতে অস্বীকার করা উচিত))
রব

রব এখানে কী বলার চেষ্টা করছে তা নিশ্চিত নন, তবে এইচটিএমএল স্পেক উল্লেখ করে যে প্রথমটি বৈধ is
রবার্ট ম্যাককি

2

উভয়ই সঠিক উত্তর। এইচটিএমএল 5 কঠোর নিয়ম অনুসরণ করে এবং এইচটিএমএল 5 এ আমরা সমস্ত ট্যাগ বন্ধ করতে পারি। সুতরাং, এটি আপনাকে HTML5 বা এইচটিএমএল ব্যবহার এবং উপযুক্ত উত্তর অনুসরণ করার উপর নির্ভর করে depends

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

দ্বিতীয় সম্পত্তি আরও উপযুক্ত।


ত্রুটিপূর্ণ. প্রথমটি হ'ল যে কোনও এইচটিএমএল স্পেসিফিকেশনে নির্দিষ্ট করা। দ্বিতীয়টি কেবল historicalতিহাসিক কারণে অনুমোদিত তবে আবার কোথাও প্রয়োজনীয় হিসাবে নির্দিষ্ট করা হয়নি।
রব

1

- ট্যাগটি খালি এবং এতে কেবল অ্যাট্রিবিউট থাকে। - ট্যাগটিতে 'ক্লোজিং' ট্যাগ নেই।

সুতরাং,

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

উভয়ই HTML5 এ সঠিক both


প্রথম সঠিক হয়! দ্বিতীয়টি কেবল historicalতিহাসিক কারণে অনুমোদিত। (পুরানো ওয়েব সাইটগুলিতে এক্সএইচটিএমএল / এক্সএমএল ব্যবহারের সাথে সামঞ্জস্যতা যা ভঙ্গ হবে তা ব্রাউজারগুলিকে এড়িয়ে দেওয়া উচিত))
রব

1

আপনি যদি কোনও এক্সএইচটিএমএল পার্সার দিয়ে পড়ার চেষ্টা করেন তবে ক্লোজিং ট্যাগটি পাওয়া সহায়ক। একটি এজ কেস হতে পারে তবে আমি সব সময় এটি করি। এটির ফলে কোনও ক্ষতি হয় না এবং এর অর্থ আমি জানি যে আমরা এক্সএমএল পাঠকদের এমন একটি অ্যারে ব্যবহার করতে পারি যা তারা যখন কোনও ক্লোজড ট্যাগ চাপায় তখন তাকাবে না won't

আপনি যদি কখনই সামগ্রীটি বিশ্লেষণের চেষ্টা করতে যাচ্ছেন না, তবে বন্ধটি উপেক্ষা করুন।

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