Могут ли якоря использоваться вместо контейнеров div? - PullRequest
Новая
       5

Могут ли якоря использоваться вместо контейнеров div?

0 голосов
/ 25 февраля 2019

Есть ли причина не использовать тег привязки вместо тега div в качестве контейнера?

Текущий код: 

<a href="#page1.html">
    <div id="container">
        <span>Some content</span>
    </div>
</a>

Предложенный код: 

<a href="#page1.html">
    <span>Some content</span>
</a>

Вот демоверсия, которая запускается: 

.myClass {
  opacity: 1;
  position: absolute;
  left: 50px;
  top: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 148px;
  white-space: nowrap;
  text-align: left;
  font-family: Comic Sans MS;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: rgba(112, 112, 112, 1);
  outline: 1px dashed red;
}

.class2 {
  top: 60px;
}
<a href="#page1.html">
  <div id="container" class="myClass">
    <span>Some content</span>
  </div>
</a>


<a href="#page1.html" class="myClass class2">
  <span>Some content</span>
</a>

1 Ответ

0 голосов
/ 25 февраля 2019

Это совершенно верно в HTML5 : 

<a href="#page1.html">
    <div id="container">
        <span>Some content</span>
    </div>
</a>

Единственное отличие состоит в том, что значение по умолчанию для якорного тега display равно inline, а значение по умолчанию div равно block.

From w3.org :

Элемент a может быть обернут вокруг целых абзацев, списков, таблиц и т. Д., Дажецелые разделы, если внутри нет интерактивного содержимого (например, кнопок или других ссылок).Этот пример показывает, как это можно использовать для превращения всего рекламного блока в ссылку: 

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

upadted answer

Единственная разница между использованием divи span внутри якоря - их display ... как вы можете видеть в приведенном ниже примере, промежутки отображаются встроенными, а div отображаются как элементы блока (конечно, вы можете изменить отображение по умолчанию в css): 

<a href="#">
    <span>inline element1</span>
</a>

<a href="#">
    <span>inline element2</span>
</a>


<a href="#page1.html" class="myClass class2">
  <div>block elemnt1</div>
</a>

<a href="#page1.html" class="myClass class2">
  <div>block elemnt2</div>
</a>
...