লিঙ্কগুলি (<a> ট্যাগ) এবং শিরোনামগুলি (<h1> ট্যাগ) কীভাবে ওয়েব স্ট্যান্ডার্ডে মিশ্রণ করবেন?


95

ওয়েব মান অনুযায়ী 1 শিরোনামের সাথে একটি লিঙ্ক তৈরি করার সঠিক কোডটি কী?

তাই কি

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

বা

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

ধন্যবাদ

উত্তর:


143

ওয়েব মান অনুসারে আপনাকে ব্লক উপাদানগুলিকে ইনলাইন উপাদানগুলিতে রাখার অনুমতি নেই।

হিসাবে h1একটি ব্লক উপাদান এবং aএকটি ইনলাইন উপাদান সঠিক উপায় হল:

<h1><a href="#">This is a title</a></h1>

এখানে একটি লিঙ্ক রয়েছে যাতে আপনি আরও শিখতে পারেন: w3 ভিজ্যুয়াল বিন্যাসের মডেল

যাইহোক, একটি ব্যতিক্রম আছে যে এইচটিএমএল 5 এ অ্যাঙ্কর ট্যাগগুলিতে ব্লক-স্তরীয় উপাদানগুলি (যেমন div, pবা h*) মোড়ানো কার্যকর valid অ্যাঙ্করগুলি ব্যতীত অন্যান্য ইনলাইন উপাদানগুলিতে ব্লক-স্তরের উপাদানগুলিকে মোড়ানো এখনও মানগুলির বিরুদ্ধে যায় না।


19
এইচটিএলএম 5 এ এটি পরিবর্তিত হয়েছে। উভয় উদাহরণ বৈধ হবে - বৈধতাW3.org
আটাদজ

সুন্দর. এটি করা একটি সহজ ভুল এবং উভয়ই তার যৌক্তিকতাটিকে বৈধতা দেবে যে প্রাকৃতিকভাবে ইনলাইন উপাদানগুলি ব্লক স্তরের উপাদানগুলির বংশধর হতে হবে।
বিগমাডল্ফ

@ পুশপ্লেবাং - আমি বলব যে হেডারের কোনও অংশ ক্লিকযোগ্য বলে মনে করা হয় না যদি না আপনি লিঙ্কে শিরোনামটি लपेटানো আরও বেশি অর্থপূর্ণ হন (আমি এটির জন্য কোনও ব্যবহারের ক্ষেত্রে ভাবতে পারি না)। নির্বিশেষে, এটি উভয়ই এইচটিএমএল 5 এ সমর্থিত।
aaaaaa

48

এইচটিএমএল 5 এই বিষয়টিকে আপডেট করেছে: অন্য প্রশ্নের অধীনে বলা আছে যে, এ এর ​​সাথে ব্লক-স্তরের উপাদানগুলিকে মোড়ানো ঠিক আছে: https://stackoverflow.com/a/9782054/674965 এবং এখানে: http://davidwalsh.name/html5- উপাদান-লিঙ্ক


8
এই উত্তরটি এখন গৃহীত উত্তরের চেয়ে অনেক বেশি প্রাসঙ্গিক
জোশ ডেভেনপোর্ট

@ জোশডেভেনপোর্ট গ্রহণযোগ্য উত্তরটি প্রতিফলিত করার জন্য আপডেট করা হয়েছে
ড্যান-ক্লাসন

2

আমি যতদূর বুঝতে পেরেছি HTML5 আপনাকে লিঙ্ক ট্যাগগুলিতে ব্লক স্তরের উপাদানগুলিকে মোড়ানোর অনুমতি দেয় allow তবে, পুরানো ব্রাউজারগুলিতে বাগগুলি প্রদর্শিত হতে পারে। আমি ফায়ারফক্স 3.6.18 এর সাথে মুখোমুখি হয়েছি এবং মোজ-আরএস-শিরোনাম = "" আমার কোডে .োকানো হয়েছে। এভাবে আমার স্টাইলগুলি ভেঙে গেল। যদি আপনি চারপাশের কোনও কাজের বিষয়ে যত্নশীল হন তবে লিংক ট্যাগগুলিকে ডিভস-এ মোড়ানো করতে পারেন। অতিরিক্ত কোড কেন কাজ করে তার একটি আরও ভাল ব্যাখ্যা নীচে প্রদান করে http://oli.jp/2009/html5- block-level-links/


2

a > h1 পাঠ্য নির্বাচন করতে অসুবিধা সৃষ্টি করবে

পাঠ্য নির্বাচনের সমস্যা

যেহেতু উভয়ই HTML5 এ সম্পূর্ণ বৈধ, তাই এটি ব্যবহার করা ভাল h1 > a

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