Семантические Ссылки в html?

Question

[Alibek Kulseitov]

В чем преимущество из ниже предоставленных вариантов, и как это влияет на SEO?

Вариант 1:

<a href="news">
	<img src="news.jpg" alt="">
	<div class="news__title">Заголовок новости</div>
	<div class="news__date">12.12.12</div>
</a>

Вариант 2:

<div href="news">
	<a href="news__link"></a>
	<img src="news.jpg" alt="">
	<div class="news__title">Заголовок новости</div>
	<div class="news__date">12.12.12</div>
</div>

Но во втором варианте ссылке прописывается абсолютная позиция и растягивается на весь блок карточки новости.

Фишка в семантике или что?

Comments

[Сергей delphinpro]

второе семантически неверно. как к этому относятся поисковые системы, я не знаю, но скринридер, например, не сможет нормально озвучить ссылку.
вот если aria-label к ссылке добавить, тогда норм будет. но это не точно.

[Сергей delphinpro]

прогоните через NVDA и проверьте как оно звучит. Если все понятно (не глядя на экран), то норм.

[Сергей delphinpro]

<div href="news">
  <a href="news__link"><span class="sr-only">Заголовок новости</span></a>
  <img src="news.jpg" alt="">
  <div class="news__title">Заголовок новости</div>
  <div class="news__date">12.12.12</div>
</div>

вот так, думаю, будет норм. sr-only - это класс из бутстрапа.

[Сергей delphinpro]

а лучше так:

<div href="news">
  <img src="news.jpg" alt="">
  <div class="news__title">Заголовок новости</div>
  <div class="news__date">12.12.12</div>
  <a href="news__link"><span class="sr-only">читать далее</span></a>
</div>

все-таки чтение идет последовательно, сверху вниз. для читалки такая разметка будет как-будто с ссылкой "читать далее"

[Alibek Kulseitov]

Сергей delphinpro, то есть первый вариант лучше так как читалка будет читать весь блок?

[Сергей delphinpro]

Alibek Kulseitov, первый ваш, и последний мой одинаковы. тут нужно елать выбор, исходя из потребностей верстки.

[Сергей delphinpro]

В первом вашем варианте может возникнуть проблема, если это не новость, а, допустим, карточка товара в каталоге, и внутри нее есть еще ссылки или кнопки - быстрый заказа, добавить в корзину, выбрать количество и т.д. Тут определенно стоит выбрать последний вариант.

Answer 1

[Анатолий Куликов]

Никакой разницы нет. По семантике здесь ошибок нет, во всяком случае валидатор w3c ничего плохого не видит.

В первом случае карточка новости заворачивается в ссылку и нажатие на любой элемент внутри неё происходит переход по ссылке.

Во втором случае ссылка просто растягивается на всю ширину блока для того, чтобы пользователь не промахнулся мимо и попал по ссылке в любом случае. При этом ссылка является дочерним элементом по отношению к карточке новости.

Вероятно, так сделано было из-за технической задачи, которую преследовал разработчик.

Answer 2

[pawok]

В 1-ом варианте задается несколько анкоров ссылке - Картинка, Заголовок новости, 12.12.12.

Во 2-ом варианте задается нужный анкор в самой ссылке , чаще всего туда ставится "Заголовок новости".

Второй вариант для SEO предпочтительнее, так как картинка (её альт) и дата публикации новости не являются важными ключевыми словами.