Чи правильне введення діва всередину якіря?

Я чув, що введення елемента блоку всередині вбудованого елемента - це гріх HTML:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

Але що робити, якщо ви стилізуєте зовнішній якор, як display:blockу таблиці стилів? Це все-таки неправильно? Специфікація HTML 4.01 для елементів на рівні блоку та вбудованих елементів, здається, так:

Аркуші стилів надають засоби для визначення візуалізації довільних елементів, включаючи, чи елемент відображається як блок або вбудований. У деяких випадках, наприклад, стиль вбудовування для елементів списку, це може бути доречно, але, як правило, автори не рекомендують таким чином змінювати традиційну інтерпретацію елементів HTML.

Хтось має якісь подальші поради щодо цього питання?

Залежно від версії HTML, яку ви надаєте:

• HTML 5 зазначає, що<a>елемент "може бути обгорнутий цілими абзацами, списками, таблицями тощо, навіть цілими розділами, доки в ньому немає інтерактивного вмісту (наприклад, кнопок або інших посилань)".

• HTML 4.01 визначає, що<a>елементи можуть містити лише вбудовані елементи . A<div>- це блок-елемент , тому він може не відображатися всередині<a>.

  Звичайно, ви можете вільно стилізувати вбудований елемент таким чином, що він здається блоком або дійсно стилем блоку, щоб він був наданий в рядку. Використання термінів inlineі blockв HTML означає ставлення елементів до смислової структури документа, тоді як ті самі терміни в CSS більше пов'язані з візуальною стилізацією елементів. Якщо ви роблячи вбудовані елементи без обмежень, це добре.

  Однак ви повинні переконатися, що структура документа все-таки має сенс, коли CSS відсутній, наприклад, при доступі за допомогою допоміжної технології, такої як зчитувач екрана, або ж коли її оглядає могутній Googlebot.

Ні, це не буде підтверджено, але так, як правило, він буде працювати в сучасних браузерах. Коли це говориться, використовуйте проліт всередині свого якоря, а також встановіть display: blockна ньому, що, безумовно, буде працювати всюди, і воно підтвердиться!

Документ W3C не використовує такі поняття, як помилка та гріх , але він використовує такі, як надає засоби , може бути доцільним і не рекомендується .

Власне, у другому пункті розділу 4 специфікація 4.01 розміщує свої слова наступним чином

У цьому документі ключові слова "ОБОВ'ЯЗКОВО", "НЕ ПОВИННІ", "ПОТРІБНО", "ПОТРІБНО", "НЕ ПОТРІБНО", "ПОТРІБНО", "НЕ БУДЕ", "РЕКОМЕНДОВАНО", "МОЖУ" та "ОПЦІЙНО" інтерпретувати так, як описано в [RFC2119]. Однак для читабельності ці слова не містяться в усіх великих літерах цієї специфікації.

Зважаючи на це, я вважаю, що остаточне твердження міститься в елементах рівня 7.5.3 та блоках , де це написано

Як правило, вбудовані елементи можуть містити лише дані та інші вбудовані елементи.

Умова "загалом", як видається, вносить достатньо двозначності, щоб сказати, що HTML 4.01 дозволяє вбудованим елементам містити елементи блоку.

Безумовно, CSS2 має значення властивості відображення, вбудований блок , який, схоже, підходить до описаної вами мети. Я не впевнений, чи це колись широко підтримувалося, але, здається, хтось передбачив необхідність такої поведінки.

Здається, DTD тут менш прощає, але текст DTD відповідає специфікації:

Специфікація HTML 4.01 включає додаткові синтаксичні обмеження, які неможливо виразити в DTD.

В іншому коментарі ви пропонуєте зробити блок активним, загорнувши його в якір. Я не вірю, що HTML це забороняє, і CSS це чітко дозволяє. Отже, щоб відповісти на головне запитання про те, чи це колись правильно, я кажу так. За мірками це іноді правильно.

Із специфікацією HTML5 ... Тепер можна розмістити елемент рівня блоку всередині вбудованого елемента. Тому зараз цілком доречно помістити "div" або "h1" всередину елемента "a".

Ви не можете помістити <div>всередину <a>- це недійсний (X) HTML.

Незважаючи на те, що ви стилюєте проміжок із відображенням: блок, ви все одно не можете помістити елементи рівня блоку всередину нього: (X) HTML все ще повинен підкорятися (X) HTML DTD (який би ви не використовували), незалежно від того, як CSS змінює речі.

Браузер, ймовірно, відображатиме його так, як вам хочеться, але це не робить його правильним.

На веб- сайті http://www.w3.org/TR/REC-html40/sgml/dtd.html є DTD для HTML 4 . Цей DTD є машинно оброблюваною формою специфікації, з обмеженням, що DTD керує XML та HTML 4, особливо "перехідним" ароматом, дозволяє багато речей, які не є "законними" XML. Але я вважаю, що це наближається до кодифікації намірів специфікаторів.

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Я б інтерпретував теги, перелічені в цій ієрархії, як загальну кількість дозволених тегів.

Хоча специфікація може сказати "вбудовані елементи", я впевнений, що це не передбачається, що ви зможете обійти наміри, оголосивши тип відображення елемента блоку вбудованим. Вбудовані теги мають різну семантику, незалежно від того, як ви можете ними зловживати.

З іншого боку, мені здається, що інтригуюче, що включення, specialздається, дозволяє вкладати Aелементи вкладення . Мабуть, є якась чітка формулювання в специфікації, яка забороняє це, навіть якщо це синтаксично правильне XML, але я не буду цього робити далі, оскільки це не тема питання.

Елементи рівня блоку, як-от, <div>можна обернути <a>тегами в HTML5. Хоча A <div>вважається контейнером / обгорткою для вмісту потоку, а <a>s вважаються вмістом потоку згідно з MDN . Семантично може бути краще створити вбудовані елементи, які виступають як елементи рівня блоку.

Якщо ви хочете уникнути смислових проблем з розміщенням знаків всередині тегів якоря, просто розмістіть тег прив’язки на тому ж рівні, що і діви, оберніть їх усім контейнером з позицією: відносно, зробіть позицію тега прив’язки: абсолютною та розгорніть її на наповнити контейнер. Крім того, якщо він не знаходиться в кінці потоку вмісту, переконайтеся, що ви кидаєте туди z-індекс, щоб розмістити його над вмістом.

Як було запропоновано, я додав код розмітки:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

І css:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Якщо ви збираєтеся докласти зусиль для створення <a>блоку, чому б не поставити <a>всередину діл, будучи блоковим елементом, це дасть вам такий же ефект.

Якщо ви зміните його на елемент блочного стилю, то ні, він більше не "неправильний", але він, ймовірно, не перевірить. Але не має сенсу робити те, що ти робиш. Вам слід або просто зберегти тег прив’язки як елемент рівня блоку без внутрішнього поділу, або поставити div на зовнішній стороні.

Це неправильно. Використовуйте проліт .

Я думаю, що більшу частину часу, коли люди задають це питання, вони створюють сайт лише з divs, і зараз один з div повинен бути посиланням.

Я бачив, як хтось використовує прозоре порожнє зображення, PNG, всередині тега прив’язки просто для того, щоб зробити посилання всередині div, і зображення було такого ж розміру, як і div.

Насправді дуже сумно ... але це працює ...

ви можете досягти цього, додавши ":: перед" псевдоелемент

Чистий фокус CSS;)

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Так само, як вигадка.

Якщо ваша мета полягає в тому, щоб зробити ваш дивний клік, ви можете використовувати jQuery / Java Script.

Визначте свій div так:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

Потім ваш jQuery буде реалізований так:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

Це також може працювати для кількох дівок - відповідно до коментаря Тома в цій темі