আমি <span> এর পরিবর্তে আইকনগুলির জন্য <i> ট্যাগ ব্যবহার করব? [বন্ধ]


571

আমি ফেসবুকের উত্স দেখেছি, তারা <i>ট্যাগটি আইকন প্রদর্শনের জন্য ব্যবহার করে ।

এছাড়াও, আজ আমি টুইটারের বুটস্ট্র্যাপে নজর রেখেছি। এটি <i>আইকন প্রদর্শনের জন্য ট্যাগও ব্যবহার করে ।

কিন্তু,

থেকে HTML5 এর বৈশিষ্ট :

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

তারা <i>আইকন প্রদর্শনের জন্য ট্যাগ ব্যবহার করছেন কেন ?

এটা কি খারাপ অভ্যাস নয়?

নাকি আমি এখানে কিছু মিস করছি?

আমি spanআইকন প্রদর্শনের জন্য ব্যবহার করছি এবং এটি এখনও পর্যন্ত আমার জন্য কাজ করছে বলে মনে হচ্ছে।

হালনাগাদ:

বুটস্ট্র্যাপ 3 এখন spanআইকনগুলির জন্য ব্যবহার করে । অফিসিয়াল ডক


5
উদাহরণ: উত্তর টুইটারে টুইট নিচে তীর: <i class="sm-reply"></i>
কে - এসই খারাপ

2
কেন <span>ব্যবহার করা উচিত নয় ?
যশবন্ত

6
আমার কাছে মনে হয় যে সেম্যাটিক্স এবং অ্যাক্সেসযোগ্যতার জন্য, আইএমজি ট্যাগ সর্বদা ওয়েল পাঠ্য সহ আইকনগুলির জন্য ব্যবহার করা উচিত।
নরোজ করুন

12
@ নরোজ আমার এই বিষয়টি গ্রহণ করুন হ'ল আইকনগুলির জন্য ব্যবহৃত চিত্রগুলি সামগ্রীর অংশ নয়, তবে পৃষ্ঠার স্টাইলের (উদাহরণস্বরূপ, গরু সম্পর্কে উইকিপিডিয়া পৃষ্ঠায় একটি গরুর চিত্র নয়)। সুতরাং এগুলি সিএসএসে সংজ্ঞায়িত করা উচিত, কোনও ইমগ ট্যাগের চিত্র হিসাবে নয়।
সিজেস্টুয়ার্ট

6
আমি মনে করি না যে এইচটিএমএল 5 এর অর্থ সংক্রান্ত সিদ্ধান্তগুলি "মতামত ভিত্তিক" বিবেচনা করা উচিত।
হারুন

উত্তর:


596

তারা <i>আইকন প্রদর্শনের জন্য ট্যাগ ব্যবহার করছেন কেন ?

কারন এটাই:

  • সংক্ষিপ্ত
  • আমি আইকনটির জন্য দাঁড়িয়েছি (যদিও এইচটিএমএলে নেই)

এটা কি খারাপ অভ্যাস নয়?

ভয়াবহ অনুশীলন। এটি শব্দার্থবিজ্ঞানের তুলনায় পারফরম্যান্সের একটি জয়।


87
টুইটারের বুটস্ট্র্যাপ শেখার এটি আমার প্রথম দিন এবং খারাপ লাগছে যে তারা সেরা অনুশীলনগুলি অনুসরণ করছে না।
যশবন্ত

25
কিছু লোক এমনকি আরও এগিয়ে যান এবং অন্যান্য উপাদানগুলির অপব্যবহার করে, যেমন <tt>= টুলটিপ এবং আরও ... ... এটিএসএমওহে খুঁজে পেতে আমাকে সাহায্য করতে চান? "এইচটিএমএল-উপাদানগুলির অর্থগত অপব্যবহারের বিরুদ্ধে"
ক্রিস্টফ

18
এই ওয়েবসাইটগুলিতে প্রতিদিন লক্ষ লক্ষ পৃষ্ঠা দেখা হয় viewed যদি তারা প্রতিবার এই অনুশীলন সহ কোনও ক্লায়েন্ট কোনও পৃষ্ঠার জন্য 100 বার বাইট ডেটা সংরক্ষণ করে তবে তারা ব্যান্ডউইথের একটি উল্লেখযোগ্য পরিমাণ সংরক্ষণ করে save
ডালমাস

62
100 বাইট সংরক্ষণ করতে তাদের 16 আইকন অন্তর্ভুক্ত করতে হবে এবং সংক্ষেপণ সক্ষম করতে হবে না
কোয়ান্টিন

7
ব্যবহারের সঙ্গে ligatures ব্যবহার iআইকন প্রদর্শন করে ট্যাগ শব্দার্থিক হয়। প্রকৃতপক্ষে, গুগল iএর উপাদান আইকন সহায়তায় লিগচারগুলির সাথে ট্যাগটি ব্যবহারের পরামর্শ দেয় ।
অস্ট

269

আমি কিছুটা দেরি করে এখানে লাফিয়ে যাচ্ছি, তবে নিজেই চিন্তা করার সময় এই পৃষ্ঠাটি জুড়ে এসেছি। অবশ্যই আমি জানি না কীভাবে ফেসবুক বা টুইটার এটির ন্যায্যতা জানায়, তবে এটির মূল্য কী তা জন্য এখানে আমার নিজস্ব চিন্তা প্রক্রিয়া process

শেষ পর্যন্ত, আমি এই সিদ্ধান্তে পৌঁছেছি যে এই অনুশীলনটি অযৌক্তিক নয় (এটি কি কোনও শব্দ?)। প্রকৃতপক্ষে, সংক্ষিপ্ততা এবং "আইকনটির জন্য আই" এর দুর্দান্ত সংস্থান ছাড়াও আমি মনে করি যে যখন কোনও সরল <img>ট্যাগ ব্যবহারিক না হয় তখন আইকনের পক্ষে এটি আসলে সবচেয়ে সার্থক পছন্দ ।

1. ব্যবহারটি অনুমানের সাথে সামঞ্জস্যপূর্ণ।

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

যদি, তীর চিহ্নের পরিবর্তে, টুইটার ব্যবহার করা হয় <i>shout out</i>বা <i>[Japanese character for reply]</i>(একটি ইংলিশ পৃষ্ঠায়), তবে এই অনুমানের সাথে সামঞ্জস্য থাকবে। তাহলে কেন হবে না <i>[reply arrow]</i>? (আমি এখানে কঠোরভাবে এইচটিএমএল শব্দার্থবিজ্ঞানের কথা বলছি, অ্যাক্সেসযোগ্যতা নয়, যা আমি যাব))

যতদূর আমি দেখতে পাচ্ছি, আইকন ব্যবহারের দ্বারা স্পষ্টভাবে লঙ্ঘিত হওয়া স্পেসের একমাত্র অংশটি হ'ল "পাঠ্যের স্প্যান" বাক্যাংশ (যখন ট্যাগটিতে টেক্সটও থাকে না)। এটা পরিষ্কার যে <i>ট্যাগটি মূলত পাঠ্যের জন্য বোঝানো হয়, তবে এটি ট্যাগের সামগ্রিক অভিপ্রায়টির সাথে তুলনা করে খুব ছোট্ট একটি বিশদ বিবরণ। এই ট্যাগটির জন্য গুরুত্বপূর্ণ প্রশ্নটি এতে কোন ফর্ম্যাটটির বিষয়বস্তু রয়েছে তা নয়, তবে সেই সামগ্রীর অর্থ কী।

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

সুতরাং এই বিষয়টির লেখকরা এটিকে স্পষ্ট করার জন্য ভাবেন নি (বা পছন্দ করেছেন) যা বোঝায় তা করার থেকে আমাদের হাত বেঁধে দেওয়া উচিত নয় এবং ট্যাগের চেতনার সাথে সামঞ্জস্যপূর্ণ। <a>ট্যাগ মূলত অন্য কোথাও ব্যবহারকারী নিতে, কিন্তু এখন এটি একটি লাইটবক্স পপ আপ পারে জন্যই ছিল। বড় হুফ, ঠিক আছে? যদি অনুমানটি ধরা পড়ার আগে কেউ যদি ক্লিক করে একটি লাইটবক্স কীভাবে পপআপ করতে পারে তা বুঝতে পেরেছিলেন তবে তাদের <a>ট্যাগটি ব্যবহার করা উচিত <span>ছিল না, যদিও এটি বর্তমান সংজ্ঞাটির সাথে পুরোপুরি সামঞ্জস্যপূর্ণ ছিল না - কারণ এটি নিকটে এসেছিল এবং ছিল এখনও ট্যাগের স্পিরিটের সাথে সামঞ্জস্যপূর্ণ ("আপনি এখানে ক্লিক করলে কিছু হবে")। একই <i>জিনিস - আপনি এর মধ্যে যে ধরণের জিনিস রাখুন বা সৃজনশীলতার সাথে আপনি এটি ব্যবহার করেন,

2. <i>ট্যাগ যোগ করা একটি আইকন উপাদানে শব্দার্থিক অর্থ।

একটি আইকন শ্রেণি নিজেই বহন করার বিকল্প বিকল্পটি হ'ল <span>, যার অবশ্যই কোন অর্থার্থিক অর্থ নেই। যখন কোনও মেশিন <span>এটিতে কী রয়েছে তা জিজ্ঞাসা করে , তখন এটি বলে, "আমি জানি না anything কিছু হতে পারে।" তবে <i>ট্যাগটি বলে, "আমার কাছে সাধারণ উপায়ের চেয়ে কিছু বলার ভিন্ন উপায় বা সম্ভবত কোনও অপরিচিত শব্দ রয়েছে" " এটি "আমার কাছে একটি আইকন রয়েছে" এর মতো নয় তবে এটি এটির চেয়ে অনেক বেশি কাছাকাছি <span>!

৩. অবশেষে, সাধারণ ব্যবহার সঠিক করে।

উপরের পাশাপাশি, মেশিন পাঠকরা (সার্চ ইঞ্জিন, স্ক্রিন রিডার বা যাই হোক না কেন) যে কোনও সময়ে ফেসবুক, টুইটার এবং অন্যান্য ওয়েবসাইটগুলি <i>আইকনগুলির জন্য ট্যাগটি ব্যবহার করে তা বিবেচনায় নেওয়া শুরু করতে পারে considering কোড থেকে প্রয়োজনীয় অর্থ বের করে নেওয়ার বিষয়ে যতটুকু তারা চিন্তা করে ততই তারা সেই অনুমানের বিষয়ে চিন্তা করে না। সুতরাং তারা সাধারণ ব্যবহারের এই জ্ঞানটি কেবল "এখানে একটি আইকন থাকতে পারে" রেকর্ড করার জন্য বা সিএসএসে অর্থের ইঙ্গিত দেওয়ার জন্য নজর কেড়ে দেওয়ার মতো আরও কিছু উন্নত করার মতো কিছু করতে পারে, বা কে জানে। সুতরাং আপনি যদি <i>আপনার ওয়েবসাইটে আইকনগুলির জন্য ব্যবহার করতে চান তবে আপনি অনুমানের চেয়ে বেশি অর্থ প্রদান করতে পারেন।

তদ্ব্যতীত, যদি এই ব্যবহারটি ব্যাপক আকার ধারণ করে, ভবিষ্যতে এটি সম্ভবত অনুমানের অন্তর্ভুক্ত হবে। তারপরে আপনি নিজের কোডটি দিয়ে যাচ্ছেন, এর পরিবর্তে <span>এর কোডগুলি দিয়ে দিন <i>! সুতরাং অনুমানের দিক বলে মনে হচ্ছে কী তা নিয়ে বুদ্ধিমান হতে পারে বিশেষত এটি যখন বর্তমান অনুমানের সাথে স্পষ্টভাবে বিরোধী না হয়। সাধারণ ব্যবহার চারদিকে অন্যান্য উপায়ের চেয়ে ভাষার নিয়মকে বেশি নির্দেশ করে। আপনি যদি যথেষ্ট বয়স্ক হন, আপনি কি মনে রাখবেন যে শব্দটি নতুন ছিল তখন "ওয়েবসাইট" সরকারী বানান ছিল? অভিধানগুলি জোর দিয়েছিল সেখানে অবশ্যই একটি স্থান থাকতে হবে এবং ওয়েবকে অবশ্যই মূলধন করতে হবে। এর জন্য শব্দার্থক কারণ ছিল। তবে সাধারণ ব্যবহার বলেছিল, "যাই হোক না কেন, এটি বোকামি I'm আমি 'ওয়েবসাইট' ব্যবহার করছি কারণ এটি আরও সংক্ষিপ্ত এবং আরও ভাল দেখাচ্ছে" " এবং অনেক আগে,

৪. সুতরাং আমি এগিয়ে যাচ্ছি এবং এটি ব্যবহার করছি।

সুতরাং, <i>অনুমানের কারণে মেশিনগুলিকে আরও অর্থ প্রদান করা হয়, এটি মানুষের আরও অর্থ প্রদান করে কারণ আমরা সহজেই "আই" কে "আইকন" এর সাথে সংযুক্ত করি এবং এটি কেবল একটি অক্ষর দীর্ঘ। উইন! এবং আপনি যদি <i>ট্যাগের ভিতরে বা তার ঠিক পাশের (টুইটারের মতো) সমতুল্য পাঠ্যকে অন্তর্ভুক্ত করার বিষয়টি নিশ্চিত করে থাকেন, তবে স্ক্রিন পাঠকরা বুঝতে পারবেন কোথায় উত্তর দিতে ক্লিক করতে হবে, সিএসএস লোড না হলে লিঙ্কটি ব্যবহারযোগ্য, এবং ভাল পাঠক মানব পাঠক দৃষ্টিশক্তি এবং একটি শালীন ব্রাউজার একটি সুন্দর আইকন দেখায়। এই সমস্ত কথা মাথায় রেখে, আমি খারাপ দিকটি দেখছি না।


33
তবে ইতিমধ্যে অপব্যবহার না করে এটি করার উপায় <i>রয়েছে: বোতাম বা লিঙ্কগুলি সহ যে কোনও পাঠ্য উপাদান ব্যবহার করুন এবং ব্যাকগ্রাউন্ড গ্রাফিক এবং কিছু প্যাডিং ব্যবহার করে একটি আইকন যুক্ত করুন, এটি একইভাবে ব্যবহার করা হচ্ছে <i>। এইচটিএমএল দেখতে লাগবে <a ...>Reply</a>, যা শব্দার্থক, স্টাইলযুক্ত পৃষ্ঠাটি একটি আইকনও দেখায়। আইকনটি যদি একমাত্র, প্রাথমিক উপাদান হয় তবে এটি একটি হওয়া উচিত <img src="..." alt="Reply">
ছদ্মবেশ

36
@ হোলি, আপনি একে একে সম্পূর্ণ ভিন্ন দিকে নিয়ে গিয়েছিলেন তবে দুঃখিত, আপনি বলেছেন প্রতিটি রেখার সাথে আমি একমত নই।
যশোবন্ত

11
ইম্পেটিনেস (এমনকি একটি আইকন ) ও পাঠ্য নয় , এবং পাঠ্যটি বিশেষত রচনাটিতে রচিত।
রাই-

17
বিশেষে স্পেকে লেখাটির অর্থ জ্যাক। আপনি এটি জানেন এবং অন্য সবাই এটি জানেন। এটি একটি গাইড। বেশি কিছু না. আপনি কি ভাবেন যে আইই স্পেকটির প্রতি যত্নশীল? তারা ভাল হচ্ছে। আপনি কি মনে করেন যে প্রতিটি একক ব্রাউজারই অনুমানটি নিখুঁত করার চেষ্টা করছে? আপনি কি মনে করেন যে গ্রহের প্রত্যেকে <কোড> নেভ, শিরোনাম, পাদচরণ, বিভাগ, একপাশে, ... এন </ কোড> সঠিকভাবে ব্যবহার করছেন? নাঃ। আমি সেই পৃষ্ঠাতে যাচ্ছি যেখানে <code> <ডি ক্লাস = "সাইডবার"> </code> এর প্রতিস্থাপন একদিকে রয়েছে এবং আপনি কী জানেন? লোকেরা যেভাবে ব্যবহার অব্যাহত রাখে তা হ'ল ভবিষ্যতে "শব্দার্থক" সংজ্ঞা দেওয়া যায়।
o_O

17
দুর্দান্ত যুক্তি, আমি মনে করি আপনি আমাকে বিশ্বাস করেছেন। বিশেষত বোঝা # 3, "সাধারণ ব্যবহার সঠিক করে"। সাধারণ ভাষার মতোই, যদি প্রত্যেকে যদি কোনও শব্দটি এভাবে ব্যবহার করা শুরু করে তবে এটি স্ট্যান্ডার্ড ব্যবহার হয়। এইচটিএমএল স্পেকটি আপাতত একটি বিকশিত নথি হয়ে দাঁড়িয়েছে, এবং এটিকে মেনে চলা কেবল নির্বোধ। আমার মতে প্রচলিত সম্মেলনে মেনে চলা আরও টেকসই পথ। এছাড়াও, <i> উপাদানটি এই মুহুর্তে কেবল অবহেলিত, তাই আমি এটিকে একটি নতুন, শব্দার্থিকভাবে সমৃদ্ধ জীবন উপহার দিতে পেরে ভাল লাগছে! আমি আগ্রহী যে এই ব্যবহারটি নিয়ে কীভাবে চশমাটি বিকশিত হবে, যেমন আমি মনে করি নিঃসন্দেহে এটি হবে।
যৌক্তিক শিল্পী

59

কোয়ান্টিনের জবাব স্পষ্টভাবে জানিয়েছে যে iআইকন সংজ্ঞায়িত করতে ট্যাগ ব্যবহার করা উচিত নয়।

তবে, হলি spanতার নিজের কোনও অর্থ রাখার প্রস্তাব দিয়েছে এবং ট্যাগের iপরিবর্তে তার পক্ষে ভোট দিয়েছে span

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

আমি মনে করি, সঠিক উপায়টি হবে,

<span class="icon-fb" role="img" aria-label="facebook"></span>

এটি কোনও altট্যাগের কোনও সমস্যা সমাধান করে spanএবং দৃষ্টি-প্রতিবন্ধী ব্যবহারকারীদের কাছে এটি অ্যাক্সেসযোগ্য করে তোলে। এটি শব্দার্থক এবং কোনও ট্যাগের অপব্যবহার (হ্যাকিং) করছে না।


6
@ জর্জমৌয়ার, সমস্ত স্ব-সম্মানজনক এইচটিএমএল / ওয়েব ডিজাইনাররা ওয়েল ট্যাগ সম্পর্কে যত্নশীল। চশমা একটি কারণ আছে। বিল্ডিংয়ে র‌্যাম্পগুলির মতো, Alt, শিরোনাম এবং এরিয়া ট্যাগ কোনও কারণে বিদ্যমান।
ওসিরিস

3
@ ওসিরিস এখন ধরে রেখেছে, চশমা সর্বদা বদলে যায়। আমি এটি অনুসরণ করতে ভাল সম্মত তবে আপনাকে অবশ্যই অন্তর্নিহিত অভিপ্রায়টি বিবেচনায় নিতে হবে। বলা হচ্ছে, যেহেতু এটি সন্ধান করা হয়েছে, আমি আপনার সাথে এটি কেবল স্ক্রিনরিডার / অনুপস্থিত চিত্র / সরঞ্জামদ্বারদের জন্যই নয় বলে মনে করি - সেখানে আসলেই আমার জানা ছিল না এমন একটি শব্দার্থক শব্দ রয়েছে। এমডিএন: "এই বৈশিষ্ট্যটি ছাড়াই ইঙ্গিত দেয় যে চিত্রটি সামগ্রীর মূল অংশ, তবে কোনও পাঠ্য সমতুল্য উপলব্ধ নেই this এটি রেন্ডারিং থেকে বাদ দিন "
জর্জ মাউয়ার

3
পার্শ্ব নোট হিসাবে, আমি বিশ্বাস করি যে কোনও আইকনটির জন্য সঠিক আরিয়া ভূমিকা উপস্থাপনাImg নয় ।
সিলভাইন লেরাক্স

2
@ সিলওয়াইনলেরক্স, আমি মনে করি পাঠ্যের পাশাপাশি যদি কোনও বোতামে আইকন ব্যবহার করা হয়, তবে ভূমিকা উপস্থাপনা। তবে যদি কেবল আইকনটি বোতামে ব্যবহৃত হয় (কোনও পাঠ্য নেই), তবে এর ভূমিকাটি img।
যশবন্ত

2
আইটি এটি গ্রহণযোগ্য করে না! আপনি কি এটি পর্দার পাঠকদের সাথে পরীক্ষা করেছেন ?! নেটিভ প্রবেশযোগ্য সমাধান প্রতিস্থাপন <img alt="...">সঙ্গে <span role="img">তোলে সবকিছু আরও খারাপ। aria-labelস্প্যান, ফোকাসযোগ্য নয় এমন উপাদান ব্যবহার করবেন না । এটি সর্বদা প্রত্যাশিতভাবে কাজ করবে না। roleআপনি কী করছেন তা যদি জানেন না তবে ব্যবহার করবেন না । অতিরিক্ত ব্যবহার করা এআরআইএ সবার জন্য আরও খারাপ করছে। কোনও পণ্য অ্যাক্সেসযোগ্য এবং কোডটি পড়া এবং বজায় রাখা আরও কঠিন করা। এবং এসইও সম্পর্কে কি? এআরআইএ ভাল তবে বুদ্ধিমানের সাথে ব্যবহার করুন - অ্যাক্সেসিবিলিটি
ডেভেলপার- গাইড / জ্ঞান / আরিয়া / বিবাদ- অনুশীলনগুলি

12

আমার অনুমান: টুইটার লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করার প্রয়োজনীয়তাটি দেখেছে, অন্যথায় তারা :before/ :afterসিউডো-উপাদানগুলি ব্যবহার করবে ।

লিগ্যাসি ব্রাউজারগুলি আমি উল্লিখিত ছদ্ম উপাদানগুলিকে সমর্থন করে না, সুতরাং তাদের আইকনগুলির জন্য একটি প্রকৃত এইচটিএমএল উপাদান ব্যবহার করা দরকার, এবং যেহেতু আইকনগুলির একটি 'এক্সক্লুসিভ' ট্যাগ নেই, তারা কেবল <i>ট্যাগটি নিয়েছিল এবং সমস্ত ব্রাউজার সমর্থন করে যে ট্যাগ।

তারা অবশ্যই <span>আপনার মতো একটি ব্যবহার করতে পারত (যা পুরোপুরি সূক্ষ্ম), তবে সম্ভবত আমি উপরে উল্লিখিত প্লাস হিসাবে কোয়ান্টিন দ্বারা উল্লিখিত কারণগুলিও বুটস্ট্র্যাপ <i>ট্যাগটি ব্যবহার করছে ।

স্টাইলের কারণে অতিরিক্ত মার্কআপ ব্যবহার করার সময় এটি একটি খারাপ অভ্যাস, সে কারণেই ছদ্ম উপাদানগুলি আবিষ্কার করা হয়েছিল, স্টাইল থেকে সামগ্রী আলাদা করতে ... তবে যখন আপনি লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করার প্রয়োজন দেখেন, কখনও কখনও আপনি এই ধরণের কাজ করতে বাধ্য হন জিনিস।

পুনশ্চ. আইকনগুলি একটি 'i' দিয়ে শুরু হয় এবং <i>এটিতে একটি ট্যাগ রয়েছে তা সম্পূর্ণ কাকতালীয়।


3
আসলেই নয়, যদি আপনি সেখানে তাকান তবে আই এর অভ্যন্তরে কোডটি পূর্ব উপাদান হিসাবে রয়েছে
ডিসিডাজ

12

আমি এখানে সম্পূর্ণরূপে প্রত্যেকের উত্তরের সম্পূর্ণ ভিন্ন দৃষ্টিভঙ্গি গ্রহণ করি। আমাকে আমার উপসর্গটি প্রিফিক্স করতে এবং এই যুক্তি দিয়ে তর্ক করতে পারি যে কখনও কখনও মান এবং কনভেনশনগুলি ভাঙ্গা বোঝানো হয়, বিশেষত স্ট্যান্ডার্ড এইচটিএমএল লেক্সিক্যাল ট্যাগ সংজ্ঞাগুলির প্রসঙ্গে।

এটি কাস্টম উপাদানগুলি তৈরি করা থেকে বিরত করার কিছুই নেই যা এটির উদ্দেশ্য থেকে স্ব-বর্ণনামূলক।

আধুনিক ব্রাউজার এবং আইই 6+ (ডাব্লু / শিম) উভয়ই এই জাতীয় জিনিসগুলিকে সমর্থন করতে পারে:

<icon class="plus">

অথবা

<icon-add>

কেবল ট্যাগটি স্বাভাবিক করার বিষয়টি নিশ্চিত করুন:

 icon { display:block; margin:0; padding:0; border:0; ... }

এবং আপনার যদি আই 9 বা তার আগে সমর্থন করতে চান তবে একটি শিম ব্যবহার করুন (নীচের পোস্টটি দেখুন)।

এই স্ট্যাক ওভারফ্লো পোস্টটি দেখুন:

এইচটিএমএল 5 এ আপনার নিজস্ব এইচটিএমএল ট্যাগ তৈরি করার কোনও উপায় আছে কি?

আমার যুক্তি আরও জানাতে, গুগলের অ্যাংুলার ডাইরেক্টিভস এবং নতুন পলিমার প্রকল্প উভয়ই কাস্টম এইচটিএমএল ট্যাগের ধারণাটি ব্যবহার করে।


2
এবং তারপরে আপনি ডাব্লু 3 সি বৈধকারীর কাছে যান এবং প্রবেশ করুন <!doctype html> <html lang="en"> <head> <title>Hello</title> </head> <body> <icon></icon> </body> </html>এবং আপনি একটি একক ত্রুটি পেয়ে যাবেনError: Element icon not allowed as child of element body in this context.
ডিজিটাল নিনজা

6

আমি ভেবেছিলাম এটি দেখতে খুব খারাপ লাগছে - কারণ আমি সম্প্রতি একটি জুমলা টেম্পলেটটিতে কাজ করছি এবং আমি টেমপ্লেটটি ডাব্লু 3 সি ব্যর্থ করতে থাকি কারণ এটি <i>ট্যাগটি ব্যবহার করছিল এবং যেটি হ্রাস পেয়েছিল, কারণ এটির মূল ব্যবহার ছিল কোনও কিছুকে ইটালিকাইজ করা যা এখন সিএসএসের মাধ্যমে করা হয়েছে এইচটিএমএল আর নেই।

এটি সত্যই খারাপ অভ্যাস করে না কারণ আমি যখন এটি দেখি তখন আমি টেম্পলেটটির মধ্য দিয়ে গিয়ে সমস্ত <i>ট্যাগ <span style="font-style:italic">পরিবর্তে পরিবর্তিত করেছিলাম এবং তখন ভাবছিলাম কেন পুরো টেমপ্লেটটি অদ্ভুত দেখাচ্ছে।

এটি এইভাবে <i>ট্যাগটি ব্যবহার করা খারাপ ধারণা এটিই প্রধান কারণ - আপনি কখনই বুঝতে পারবেন না যে আপনার কাজটি পরে কীভাবে দেখাবে এবং "ধরে নেওয়া" যে আপনি সত্যিকার অর্থে যা করার চেষ্টা করছিলেন সেটি কোনও পাঠ্য প্রদর্শন করার পরিবর্তে পাঠকে বিচ্ছিন্ন করে দেওয়া আইকন। আমি স্রেফ একটি ওয়েবসাইটে কিছু আইকন রেখেছি এবং আমি নিম্নলিখিত কোড দিয়ে তা করেছি

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

এইভাবে আমি আমার সমস্ত আইকন এক শ্রেণিতে পেয়েছি তাই আমি যে কোনও পরিবর্তন করেছি তা সমস্ত আইকনকেই প্রভাবিত করে (বলুন যে আমি সেগুলি আরও বড় বা ছোট, বা বৃত্তাকার সীমানা ইত্যাদির চেয়েছি), Alt পাঠ্যটি স্ক্রিন পাঠকদের সেই ব্যক্তিকে কী বলার সুযোগ দেয় আইকনটি সম্ভবত "ইটালিকসে টেক্সট, ইটালিক্সের সমাপ্তি" পাওয়ার চেয়ে বেশি হয় (আমি ঠিক জানি না স্ক্রিনের পাঠকরা কীভাবে পর্দা পড়েন তবে আমি অনুমান করি এটি এরকম কিছু) এবং শিরোনামটি ব্যবহারকারীকে মাউস ওভার করার সুযোগ দেয় চিত্রটি এবং একটি সরঞ্জামদণ্ড তাদের আইটেমটি কী তা যদি তারা তা বের করতে না পারে তবে তা জানায়। ব্যবহারের চেয়ে অনেক বেশি ভাল <i>- এবং এটি ডাব্লু 3 সি স্ট্যান্ডার্ডকেও পাস করে।


7
<i>অবচয় করা হয় না।
ব্যবহারকারী 2867288

3
"Img" ট্যাগ হরফ আইকনগুলির জন্য কাজ করে না। আমার অর্থ এটি হয় তবে আপনার ব্রাউজারটি প্রতিবার পার্স করার সময় আপনার সাইটে অনুরোধ প্রেরণ করে।
নবীন

1
পরিবর্তে <span style="font-style:italic" />আপনি কেবল নতুন বিকল্পটি ব্যবহার করতে পারতেন -<strong />
ইভিও

@ নিউউইনো আমি বিশ্বাস করি যে আপনি বলতে চাইছেন <em> </em> যা শব্দগুলির উপর জোর দেওয়ার জন্য শব্দার্থ প্রতিস্থাপন (কেবলমাত্র তাত্পর্য প্রয়োগের চেয়ে বেশি নয়)
এমক্লোজ

আপনি প্রকৃতপক্ষে সঠিক :-)
Ewino

2

আমি যখন এটি একটি লিঙ্ক <a>ট্যাগের মধ্যে পরম অবস্থানের সাথে একটি আইকন রাখতে চেয়েছিলাম তখন এটি দরকারী হিসাবেও পেলাম ।

আমি <img>প্রথমে ট্যাগটি নিয়ে ভাবলাম , তবে লিঙ্কগুলির মধ্যে থাকা এই ট্যাগগুলির ডিফল্ট স্টাইলিংয়ে সাধারণত সীমানা স্টাইলিং এবং / অথবা ছায়া প্রভাব থাকে। এছাড়াও, <img>"এসসিআর" বৈশিষ্ট্যটি সংজ্ঞায়িত না করে ট্যাগ ব্যবহার করা ভুল বলে মনে হয় যখন আমি একটি পটভূমি-চিত্রের শৈলীর শীট ঘোষণা ব্যবহার করি যাতে চিত্রটি ভূত এবং টানতে না পারে।

এই মুহুর্তে আপনি যেমন ট্যাগগুলির কথা ভাবছেন <span>বা <i>- <i>এই ক্ষেত্রে এই ধরণের আইকনটি এতটা অর্থবোধ করে।

সব মিলিয়ে আমি মনে করি স্বজ্ঞাত হওয়ার পাশাপাশি এর উপকারিতাটি হ'ল এই ট্যাগটিকে আইকন হিসাবে কাজ করার জন্য ন্যূনতম স্টাইল শীট সমন্বয় প্রয়োজন ments


ঠিক আছে কেন আমি মনে করি এটি খারাপ অভ্যাস। Icallyতিহাসিকভাবে <B> বোল্ডের জন্য ছিল এবং <I> ইটালিকের জন্য ছিল। সুতরাং আপনি যদি <i> ব্যবহার করেন তবে আপনি একটি খালি ইটালিক ট্যাগ তৈরি করেন যা এটির জন্য নয়। এগুলি </ strong> এবং <em> দিয়ে প্রতিস্থাপন করা হয়েছিল সুতরাং আমার ধারণা প্রাকৃতিক ব্রাউজারগুলি খালি ইটালিক ট্যাগ সহ একটি পৃষ্ঠা চিহ্নিত করতে চাইবে না, এবং অন্ধদের জন্য পর্দার পাঠকদের কী, লিঙ্কের ভিতরে থাকা এই আইকনগুলিকে উচিত নয় পাঠ্য বলুন। সুতরাং <span> একটি ভাল পছন্দ হিসাবে আপনি ফন্ট-আকার শূন্য করতে এবং আইকনটিও রাখতে পারেন have
ব্যবহারকারী 1712691

1
@ ব্যবহারকারী 1712691 এটি একটি প্রচলিত পৌরাণিক কাহিনী <b>এবং <i>এগুলি যথাক্রমে <strong>এবং প্রতিস্থাপন করা হয়েছিল <em>। তবে সত্যটি হ'ল, <b>এবং <i>অবমানিত নয়, এবং নতুন শব্দার্থিক অর্থ গ্রহণ করেছেন। আরও জানার জন্য সরকারী চশমা পড়ুন ।
ছারভে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.