উত্তর:
উভয় সংস্করণ সঠিক। তাদের মধ্যে সবচেয়ে বড় পার্থক্যটি হ'ল <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>
<a><h1></h1></a>
ডাব্লু 3 সি বৈধ নয় ... মূলত, আপনি ইনলাইন উপাদানের ভিতরে ব্লক উপাদান রাখতে পারবেন না
<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>
a
id
<h2 id=foo>...</h2>
"There is seldom a good reason to make a heading or text in a heading a link"
-> আমি অবশ্যই এটির সাথে একমত নই। সেখানে আসলে একটি হয় অনেক শিরোনাম একটি লিঙ্ক তৈরি করতে ভাল কারণ। দেওয়া উদাহরণ: ব্লগ পোস্টগুলির একটি তালিকা, যেখানে প্রতিটি শিরোনামের পাশাপাশি একটি লিঙ্ক। বা নিজেই চেকআউট করুন: প্রথম পৃষ্ঠার সমস্ত প্রশ্ন h3
উপাদান এবং একটি লিঙ্ক। যাইহোক, ভাল ব্যাখ্যা;)
এইচ 1 উপাদানগুলি হ'ল ব্লক স্তর উপাদান এবং অ্যাঙ্করগুলি ইনলাইন উপাদান। আপনার ব্লক স্তর স্তরের মধ্যে একটি ইনলাইন উপাদান থাকার অনুমতি রয়েছে তবে অন্যভাবে নয়। আপনি যখন বাক্সের মডেল এবং এইচটিএমএল অনুমানটি বিবেচনা করবেন তখন তা বোধগম্য হয়।
সুতরাং উপসংহারে সর্বোত্তম উপায় হ'ল:
<h1><a href="#">Link</a></h1>
আপনি কি হাইপারলিংক <a href="…">
/ ব্যবহার করতে চান a:link
, বা আপনি আপনার শিরোনামে একটি অ্যাঙ্কর যুক্ত করতে চান? যদি আপনি কোনও অ্যাঙ্কর যুক্ত করতে চান তবে আপনি কেবল একটি আইডি নির্ধারণ করতে পারেন <h1 id="heading">
। তারপরে আপনি এটি লিঙ্ক করতে পারেন page.htm#heading
।
আপনি যদি শিরোনামটিকে ক্লিকযোগ্য করে তুলতে চান (একটি লিঙ্ক), প্রথমে <h1><a></a></h1>
/ h1 > a
- ব্লকলেভেল উপাদানগুলি ব্যবহার করুন এবং ভিতরে elementsুকিয়ে আনুন উপাদান
এছাড়াও, শৈলীর শ্রেণিবিন্যাসের পার্থক্য রয়েছে। আপনার যদি এটির মতো থাকে <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;}