যা আরও সঠিক: <h1> <a>… </a> </h1> বা <a> <h1>… </h1> </a>


166

উভয় <h1><a ...> ... </a></h1>এবং <a ...><h1> ... </h1></a>বৈধ এইচটিএমএল, বা শুধুমাত্র একটি সঠিক? যদি তারা উভয়ই সঠিক হয় তবে তারা কি অর্থের সাথে পৃথক হয়?

উত্তর:


155

উভয় সংস্করণ সঠিক। তাদের মধ্যে সবচেয়ে বড় পার্থক্যটি হ'ল <h1><a>..</a></h1>কেবলমাত্র শিরোনামের পাঠ্যটি ক্লিকযোগ্য হবে।

যদি আপনি <a>চারপাশে রাখেন <h1>এবং CSS displayসম্পত্তিটি block(যা এটি ডিফল্টরূপে) হয় তবে পুরো ব্লক (ধারকটির দৈর্ঘ্যের উচ্চতা <h1>এবং 100% প্রস্থের <h1>মধ্যে থাকা) ক্লিকযোগ্য হবে।

.তিহাসিকভাবে আপনি কোনও ইনলাইন উপাদানটির ভিতরে কোনও ব্লক উপাদান রাখতে পারেন নি, তবে এইচটিএমএল 5 এর ক্ষেত্রে আর এটি হবে না। আমি মনে করি যে <h1><a>..</a></h1>পদ্ধতির যদিও এটি প্রচলিত।

কেস যেখানে আপনি হেডার উপর একটি নোঙ্গর লাগাতে চান সালে চেয়ে ভাল পদ্ধতির <a id="my-anchor"><h1>..</h1></a>ব্যবহার হয় হবে idবা nameভালো অ্যাট্রিবিউট: <h1 id="my-anchor">..</h1>বা<h1 name="my-anchor">..</h1>


আরো এখানে রেফারেন্স: stackoverflow.com/questions/6061869/...
thdoan

2
<a> <h1> .. </ h1> </a> এইচটিএমএল 5 এর জন্য ভাল মনে হচ্ছে কারণ এটি স্পর্শ ডিভাইস ব্যবহারকারীদের একটি বড় ক্লিক টার্গেট দেয়, তাই না?
আকায়রা

যখন একটি শিরোনাম এবং সাবহেড উভয়ই একই বিষয়বস্তুতে লিঙ্ক করে তখন উভয়কে একইভাবে মুড়িয়ে ফেলার জন্য দৃশ্যত আরও আবেদন করা হয় <a>যাতে তারা একটি হোভারের
স্ল্যাম

26

প্রাক এইচটিএমএল 5 এ

<a><h1>..</h1></a>

বৈধতা দেওয়া হবে না। আপনি এটি এইচটিএমএল 5 এ ব্যবহার করতে পারেন তবে আমি এটি ব্যবহার করব:

<h1><a>..</a></h1>

আপনার যদি <a> এর ভিতরে <h1> এর বেশি যোগ করার প্রয়োজন না হয়


8

<a><h1></h1></a>ডাব্লু 3 সি বৈধ নয় ... মূলত, আপনি ইনলাইন উপাদানের ভিতরে ব্লক উপাদান রাখতে পারবেন না


26
এটি এইচটিএমএল 5
বৈদাস

1
ইয়াপ .. তবে একরকম আমি অনুভব করি যে কোনও লিঙ্কের ভিতরে ব্লক উপাদানগুলি স্থাপন করাইয়া মস্তিষ্কের (ব্যক্তিগত মতামত), যেমন কোনও ট্যাগ বন্ধ না করা (এইচটিএমএল 5 এ বৈধ) .. তবে ওহে! .. সম্ভবত এটি এসইও
র উপর

7

<h1><a>..</a></h1>এবং <a><h1>..</h1></a>সর্বদা প্রায় একই রকম আচরণ করেছে, যখন স্টাইল শিটগুলি রেন্ডারিংয়ে প্রভাবিত করে না। প্রায়, কিন্তু বেশ না। আপনি যদি ট্যাব কীটি ব্যবহার করে নেভিগেট করেন বা অন্যথায় কোনও লিঙ্কটিতে ফোকাস করেন তবে বেশিরভাগ ব্রাউজারগুলিতে লিঙ্কের চারপাশে একটি "ফোকাস আয়তক্ষেত্র" উপস্থিত হয়। কারণ <h1><a>..</a></h1>, এই আয়তক্ষেত্রটি কেবল লিঙ্ক পাঠ্যের চারপাশে। এর জন্য <a><h1>..</h1></a>, আয়তক্ষেত্রটি উপলব্ধ অনুভূমিক স্থান জুড়ে প্রসারিত হয়, যেহেতু মার্কআপটি aউপাদানটিকে রেন্ডারিংয়ে একটি ব্লক উপাদান করে তোলে, ডিফল্টরূপে 100% প্রস্থকে দখল করে।

নিম্নলিখিতটি দেখায় যে কীভাবে <a href=foo><h1>link</h1></a>Chrome দ্বারা একটি কেন্দ্রীভূত করা হয়:

এখানে চিত্র বর্ণনা লিখুন

এটি সূচিত করে যে আপনি যদি লিঙ্কগুলির জন্য একটি ব্যাকগ্রাউন্ড রঙ নির্ধারণ করে উপাদানগুলি স্টাইল করেন তবে প্রভাবগুলি একইভাবে পৃথক হয়।

.তিহাসিকভাবে, <a><h1>..</h1></a>এইচটিএমএল ২.০ এ অবৈধ হিসাবে ঘোষিত হয়েছিল এবং পরবর্তীকালে এইচটিএমএল স্পেসিফিকেশনগুলি অনুসরণ করে, তবে এইচটিএমএল 5 এটি পরিবর্তন করে এবং এটি বৈধ হিসাবে ঘোষণা করে। আনুষ্ঠানিক সংজ্ঞা ব্রাউজারগুলিকে প্রভাবিত করে না, কেবল বৈধতা দেয়। যাইহোক, এটি দূরবর্তীভাবে সম্ভব যে কিছু ব্যবহারকারী এজেন্ট (সম্ভবত সাধারণ ব্রাউজার নয়, তবে উদাহরণস্বরূপ বিশেষায়িত এইচটিএমএল রেন্ডারারস, ডেটা এক্সট্র্যাক্টর, রূপান্তরকারী ইত্যাদি) <a><h1>..</h1></a>সঠিকভাবে পরিচালনা করতে ব্যর্থ হয়েছে , কারণ এটি নির্দিষ্টকরণের অনুমতিপ্রাপ্ত নয়।

শিরোনামটি লিঙ্কে শিরোনাম বা পাঠ্য তৈরি করার খুব কম কারণই রয়েছে। (এটি বেশিরভাগ অযৌক্তিক এবং ব্যবহারযোগ্যতার জন্য খারাপ)) তবে উদাহরণস্বরূপ বনাম ব্যবহার করে কোনও লিঙ্কের সম্ভাব্য গন্তব্য (বা শিরোনামে পাঠ্য) তৈরি করার সময় প্রায়শই একই রকম প্রশ্ন দেখা দিয়েছে । অনুরূপ বিবেচনাগুলি এর ক্ষেত্রে প্রযোজ্য (উভয় কাজেই, পার্থক্য হতে পারে যেহেতু পরেরটি উপাদানটিকে একটি ব্লক করে তোলে এবং এইচটিএমএল 5 এর আগে কেবল পূর্বেরটিকে আনুষ্ঠানিকভাবে অনুমতি দেওয়া হয়)। কিন্তু উপরন্তু, উভয় উপায় পুরানো হয়, এবং ব্যবহার শিরোনাম উপাদান সরাসরি অ্যাট্রিবিউট এখন বাঞ্ছনীয়: ।<h2><a name=foo>...</a></h2><a name=foo><h2>...</h2></a>aid<h2 id=foo>...</h2>


8
"There is seldom a good reason to make a heading or text in a heading a link"-> আমি অবশ্যই এটির সাথে একমত নই। সেখানে আসলে একটি হয় অনেক শিরোনাম একটি লিঙ্ক তৈরি করতে ভাল কারণ। দেওয়া উদাহরণ: ব্লগ পোস্টগুলির একটি তালিকা, যেখানে প্রতিটি শিরোনামের পাশাপাশি একটি লিঙ্ক। বা নিজেই চেকআউট করুন: প্রথম পৃষ্ঠার সমস্ত প্রশ্ন h3উপাদান এবং একটি লিঙ্ক। যাইহোক, ভাল ব্যাখ্যা;)
জর্জিও

@ জিওরজিও, যেমন আপনার উল্লেখ করা এসও লিঙ্কগুলি ব্যবহারের পক্ষে খারাপ: পৃষ্ঠাটি উল্লেখ করার জন্য একটি লিঙ্ক তৈরি করা অর্থহীন এবং বিভ্রান্তিকর।
জুক্কা কে। কোরপেলা

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

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

5

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

সুতরাং উপসংহারে সর্বোত্তম উপায় হ'ল:

<h1><a href="#">Link</a></h1>

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

1

আপনি কি হাইপারলিংক <a href="…">/ ব্যবহার করতে চান a:link, বা আপনি আপনার শিরোনামে একটি অ্যাঙ্কর যুক্ত করতে চান? যদি আপনি কোনও অ্যাঙ্কর যুক্ত করতে চান তবে আপনি কেবল একটি আইডি নির্ধারণ করতে পারেন <h1 id="heading">। তারপরে আপনি এটি লিঙ্ক করতে পারেন page.htm#heading

আপনি যদি শিরোনামটিকে ক্লিকযোগ্য করে তুলতে চান (একটি লিঙ্ক), প্রথমে <h1><a></a></h1>/ h1 > a- ব্লকলেভেল উপাদানগুলি ব্যবহার করুন এবং ভিতরে elementsুকিয়ে আনুন উপাদান


1

এছাড়াও, শৈলীর শ্রেণিবিন্যাসের পার্থক্য রয়েছে। আপনার যদি এটির মতো থাকে <h1><a href="#">Heading here</a></h1>তবে অ্যাঙ্কারের শৈলীগুলি এইচ 1 উপাদানটির শৈলীগুলিকে ছাড়িয়ে যাবে। উদাহরণ:

a {color:red;font-size:30px;line-height:30px;}

ওভাররুল হবে

h1 {color:blue;font-size:40px;line-height:40px;}

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