<a> (অ্যাঙ্কর ট্যাগ) ব্যবহারের জন্য href বৈশিষ্ট্য ব্যতীত বৈধ?


152

আমি একটি সাইট তৈরির জন্য টুইটার বুটস্ট্র্যাপ ব্যবহার করেছি এবং এর কার্যকারিতা অনেকটাই জিনিস মোড়কের উপর নির্ভর করে <a>, এমনকি যদি তারা কেবল জাভাস্ক্রিপ্ট কার্যকর করতে চলেছে। href="#"বুটস্ট্র্যাপের ডকুমেন্টেশনগুলির পরামর্শ অনুসারে কৌশলটি নিয়ে আমার সমস্যা হয়েছিল, তাই আমি একটি আলাদা সমাধান খুঁজতে চেষ্টা করছিলাম।

তবে তারপরে আমি কেবলমাত্র hrefবৈশিষ্ট্যটি পুরোপুরি সরিয়ে দেওয়ার চেষ্টা করেছি । আমি ব্যবহার করছি <a class='bunch of classes' data-whatever='data'>, এবং জাভাস্ক্রিপ্ট বাকি হ্যান্ডেল। এবং এটি কাজ করে।

তবুও কিছু আমাকে বলছে যে আমার এটি করা উচিত নয়। রাইট? আমার অর্থ, প্রযুক্তিগতভাবে <a>কোনও কিছুর লিঙ্ক হওয়ার কথা, তবে আমি কেন পুরোপুরি নিশ্চিত নই কেন এটি সমস্যা। অথবা এটা?


উত্তর:


245

<a>Nchor উপাদান কেবল অথবা কিছু বিষয়বস্তু থেকে একটি ভিত্তিভূমি। মূলত এইচটিএমএল স্পেসিফিকেশন নামক অ্যাঙ্কার্স ( <a name="foo">) এবং লিঙ্কযুক্ত অ্যাঙ্কার্স ( <a href="#foo">) এর জন্য অনুমোদিত।

নামকৃত অ্যাঙ্কর ফর্ম্যাটটি কম ব্যবহৃত হয়, কারণ খণ্ড সনাক্তকরণকারী এখন একটি [id]বৈশিষ্ট্য নির্দিষ্ট করতে ব্যবহৃত হয় (যদিও পিছনের সামঞ্জস্যের জন্য আপনি এখনও [name]বৈশিষ্ট্য নির্দিষ্ট করতে পারেন )। বৈশিষ্ট্যবিহীন একটি <a>উপাদান [href]এখনও বৈধ

যতদূর শব্দার্থবিজ্ঞান এবং স্টাইলিং সম্পর্কিত, এটির কোনও বৈশিষ্ট্য <a>না থাকলে উপাদানটি কোনও লিঙ্ক ( :link) নয় [href]। এর একটি পার্শ্ব-প্রতিক্রিয়া হ'ল ডিফল্টরূপে কোনও <a>উপাদান [href]ট্যাব ক্রমে থাকবে না।

আসল প্রশ্নটি হ'ল <a>একমাত্র উপাদানটি একটি এর উপযুক্ত উপস্থাপনা কিনা <button>। শব্দার্থক স্তরে, a linkএবং a এর মধ্যে একটি স্বতন্ত্র পার্থক্য রয়েছে button

একটি বোতাম এমন একটি জিনিস যা ক্লিক করা হলে কোনও ক্রিয়া ঘটে।

একটি লিঙ্ক একটি বোতাম যা বর্তমান নথিতে নেভিগেশন পরিবর্তনের কারণ হয়ে থাকে causes যে নেভিগেশনটি ঘটে তা হ'ল খণ্ডন শনাক্তকারী ( #foo) এর ক্ষেত্রে নথির মধ্যে সরে যেতে বা url ( /bar) এর ক্ষেত্রে একটি নতুন দস্তাবেজে স্থানান্তরিত হতে পারে ।

যেহেতু লিঙ্কগুলি একটি বিশেষ ধরণের বোতাম হয় তাই তারা প্রায়শই তাদের ক্রিয়াগুলি বিকল্প কার্য সম্পাদন করতে ওভাররাইড করে। অ্যাঙ্করটিকে বোতাম হিসাবে ব্যবহার করা ধারাবাহিকতার দিক থেকে ঠিক, যদিও এটি শব্দার্থগতভাবে সঠিক নয় quite

যদি আপনি শব্দার্থবিজ্ঞান এবং একটি <a>উপাদান (বা <span>, বা <div>) একটি বোতাম হিসাবে ব্যবহারের অ্যাক্সেসযোগ্যতা সম্পর্কে উদ্বিগ্ন হন তবে আপনার নিম্নলিখিত বৈশিষ্ট্য যুক্ত করা উচিত:

<a role="button" tabindex="0" ...>...</a>

বোতাম ভূমিকা ব্যবহারকারী যে বিশেষ উপাদান একটি ওভাররাইড যাই হোক না কেন শব্দার্থবিদ্যা জন্য অন্তর্নিহিত উপাদান ছিল পারে একটি বাটন হিসাবে গণ্য করা হচ্ছে বলে।

জন্য <span>এবং <div>উপাদান, আপনার জন্য জাভাস্ক্রিপ্ট কী শ্রোতাকে যোগ করতে পারেন Spaceবা Enterট্রিগার clickইভেন্ট। <a href>এবং <button>উপাদানগুলি ডিফল্টরূপে এটি করে তবে নন-বোতামের উপাদানগুলি তা করে না। কখনও কখনও এটি ট্রিগারটিকে clickএকটি আলাদা কীতে বাঁধতে আরও বোধগম্য হয় । উদাহরণস্বরূপ, কোনও ওয়েব অ্যাপ্লিকেশনটিতে "সহায়তা" বোতামটি আবদ্ধ হতে পারে F1


1
@ যাকারি, [role="button"]কিছু কংক্রিট করেন না, আপনাকে ক্লিক ইভেন্টটি শুনতে হবে (তবে আপনি জেএস বোতামটি তৈরি করতে যাই হোক না কেন) এটি সহায়িকা নেভিগেশন (ওরফে স্ক্রিন পাঠক) এর জন্য ব্যবহার করা উচিত যাতে স্ক্রিন রিডার উপাদানটির আসল অর্থবোধক মানের পরিবর্তে বোতাম হিসাবে উপস্থাপন করতে পারে knows যোগ করা [tabindex]ট্যাবিং ক্রমের সাথে উপাদান যুক্ত করে। বিশেষ পরিস্থিতিতে আপনি ট্যাবিং ক্রমে নেভিগেশনযোগ্য বোতামটি প্রয়োজন / প্রয়োজন নাও পেতে পারেন, সুতরাং এটি একটি alচ্ছিক বৈশিষ্ট্য। ইতিমধ্যে বোতামযুক্ত উপাদানগুলির [role="button"]এটি অনর্থক হিসাবে দরকার নেই ।
zzzzBov

Href ছাড়াই এবং নাম ছাড়াই অ্যাঙ্কর ট্যাগ থাকা কি বৈধ এইচটিএমএল? আমাদের অ্যাপ্লিকেশনটিতে আমাদের কিছু মুছে ফেলা লিঙ্ক রয়েছে যা অক্ষম করা আছে (সুতরাং কোনও href বৈশিষ্ট্য নয়), তবে এখনও ব্যবহারকারীর কাছে দেখানো হয়েছে।
জোশুয়া মুহিম

1
@ জোশুয়ামুহিম, আমি আশা করি আপনি কিছু মনে করবেন না তবে আমি আপনার প্রশ্নটি পৃথক একা একা প্রশ্ন হিসাবে পোস্ট করেছি
zzzzBov

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

@ মীর, আপনি যদি ব্যবহার না করেন তবে আপনার [href]সম্ভবত <span>বোতামটি ব্যবহার করা উচিত ।
zzzzBov

45

আমি মনে করি আপনি এখানে আপনার উত্তরটি খুঁজে পেতে পারেন: href অ্যাট্রিবিউট ব্যতীত কোনও অ্যাঙ্কর ট্যাগটি নিরাপদ?

এছাড়াও আপনি যদি href এর সাথে কোনও লিঙ্ক অপারেশন না করতে চান তবে আপনি এটি ব্যবহার করতে পারেন:

<a href="javascript:void(0);">something</a>

3
আসলে হওয়া উচিতjavascript:undefined
rybo111

2
@ rybo111 আপনি ঠিক বলেছেন তবে আমি অকার্যকর (0) পছন্দ করি; এটি ভাল দেখায় কারণ। আমি আমার ক্লায়েন্টদের জিনিসগুলি "অপরিজ্ঞাত" ;-) হিসাবে দেখতে পছন্দ করি না
অ্যালেক্স

9
<a href="javascript:;">text</a>?
দিয়নেওয়ালা

javascript:;আই 6 এ রোলওভার এফেক্ট এবং এমনকি জিআইএফ অ্যানিমেশনগুলির মতো জিনিসগুলি ভাঙ্গতে ব্যবহৃত হয়। এবং কোনও লিঙ্ক ক্রিয়াকলাপের মতো নিবেদিত এইচটিএমএল উপাদান নেই button। একই সময়ে, এজেএক্স লিঙ্কগুলির মতো জিনিসগুলি hrefজেএস ব্যর্থ হলে ফ্যালব্যাক ক্রিয়াকলাপের জন্য তাদের ব্যবহার করতে পারে ।
ইলিয়া স্ট্রেলটসিন

14

হ্যাঁ, কোনও hrefবৈশিষ্ট্য ছাড়াই অ্যাঙ্কর ট্যাগ ব্যবহার করা বৈধ

যদি aউপাদানটির কোনও hrefবৈশিষ্ট্য না থাকে, তবে উপাদানটি এমন কোনও স্থানধারককে উপস্থাপন করে যেখানে লিঙ্কটি অন্যথায় রাখা হতে পারে, যদি এটি প্রাসঙ্গিক হত, কেবলমাত্র উপাদানটির বিষয়বস্তু নিয়ে।

হ্যাঁ, আপনি ব্যবহার করতে পারেন classএবং অন্যান্য গুণাবলীর কিন্তু আপনি ব্যবহার করতে পারবেন না target, download, rel, hreflang, এবংtype

target, download, rel, hreflang, এবং typeবৈশিষ্ট্যাবলী যদি href বৈশিষ্ট্যটির উপস্থিত নেই অবশ্যই বাদ দিতে হবে।

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

অতিরিক্তভাবে, আপনার বিভিন্ন আচরণ এবং স্টাইলিংয়ের জন্য নজর রাখা উচিত (যেমন কোনও আন্ডারলাইন নেই, কোনও পয়েন্টার কার্সার নয়, একটি নয় )।:link

উত্স: ডাব্লু 3 সি এইচটিএমএল 5 প্রস্তাবনা


এটি "এজ কেস শব্দার্থবিজ্ঞান" সম্পর্কে খুব বেশি নয় তবে অ্যাক্সেসযোগ্যতার বিষয়ে, এটি নিশ্চিত করে যে প্রতিবন্ধী ব্যক্তিরা কোনও ওয়েবসাইটের বিষয়বস্তু ব্যবহার করতে এবং বুঝতে পারে
neiya

3

এটা বৈধ। আপনি উদাহরণস্বরূপ, এটি মডেলগুলি প্রদর্শন করতে (বা অনুরূপ জিনিস যা প্রতিক্রিয়া দেখায় data-toggleএবং data-targetবৈশিষ্ট্যগুলি) ব্যবহার করতে পারেন।

কিছুটা এইরকম:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

এখানে আমি ফন্ট-দারুণ আইকনটি ব্যবহার করি, যা কোনও মডেল দেখানোর জন্য aট্যাগের চেয়ে ট্যাগ হিসাবে ভাল button। এছাড়াও, সেটিংস role="button"পয়েন্টারটিকে একটি ক্রিয়াকলাপে পরিবর্তিত করে। হয় hrefবা ছাড়া role="button", কার্সার পয়েন্টার পরিবর্তন হয় না।


2
এই ক্ষেত্রে আপনার একটি বোতাম ব্যবহার করা উচিত। এটি শব্দার্থক এবং অ্যাক্সেসযোগ্যতার উভয় অবস্থান থেকেই আরও উপযুক্ত। অ্যাঙ্করগুলি আপনাকে কোনও জায়গায় নিয়ে যাওয়া উচিত, কোনও ক্রিয়া সম্পাদন করা উচিত নয়। এছাড়াও, আপনি কেন পুরো অ্যাঙ্করটি লুকিয়ে রাখছেন aria-hidden? আইকন, হতে পারে, তবে স্ক্রিন রিডার ব্যবহারকারীদের হ্রাসযুক্ত অভিজ্ঞতা থাকা উচিত নয়।
ইশারউড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.