AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

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

В чем преимущество из ниже предоставленных вариантов, и как это влияет на 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>


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

Фишка в семантике или что?
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 2
anatoly_kulikov
@anatoly_kulikov
Веб-разработчик
Никакой разницы нет. По семантике здесь ошибок нет, во всяком случае валидатор w3c ничего плохого не видит.

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

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

Вероятно, так сделано было из-за технической задачи, которую преследовал разработчик.
Ответ написан
@pawok
В 1-ом варианте задается несколько анкоров ссылке - Картинка, Заголовок новости, 12.12.12.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы