Какой вариант разметки правильный?

Статус
Закрыто для дальнейших ответов.

snow

New Member
Регистрация
19.09.2018
Сообщения
9
Необходимо сверстать блок отзывов



Какой вариант разметки правильный?


Код:
<!-- ПЕРВЫЙ вариант разметки блока комментариев -->

		<section class="comments">
			<h3 class="visually-hidden">Отзывы клиентов автосервиса SV-Shop</h3>
			<div class="avatar-author">
				<img src="img/comment/man1.png" alt="author comment">
				<p>Илья 28 лет Хабаровск</p>
			</div>
			<div class="report-author">
				<p>Заказывал тут коробку передач на Nissan GTR. Запчасть пришла быстро, с виду оригинал.</p>
			</div>

			<div class="avatar-author">
				<img src="img/comment/man2.png" alt="author comment">
				<p>Никита 25 лет Владивосток</p>
			</div>
			<div class="report-author">
				<p>Пригнал на ремонт сюда свой Nissan GTR. Все сделали без нареканий. Качественно, быстро и главное не дорого!</p>
			</div>
		</section>

<!-- ВТОРОЙ вариант разметки блока комментариев -->

		<section class="comments">
			<h3 class="visually-hidden">Отзывы клиентов автосервиса SV-Shop</h3>
			<ul class="comment-list">
				<li class="comment-item">
					<p class="name-author">Илья 28 лет Хабаровск</p>
					<p class="avatar-author"><img src="img/comment/man1.png" alt="author comment"></p>
					<p class="report-author">Заказывал тут коробку передач на Nissan GTR. Запчасть пришла быстро, с виду оригинал.</p>
				</li>
			</ul>

			<ul class="comment-list">
				<li class="comment-item">
					<p class="name-author">Никита 25 лет Владивосток</p>
					<p class="avatar-author"><img src="img/comment/man2.png" alt="author comment"></p>
					<p class="report-author">Пригнал на ремонт сюда свой Nissan GTR. Все сделали без нареканий. Качественно, быстро и главное не дорого!</p>
				</li>
			</ul>
		</section>
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Чем меньше тегов - тем лучше (это моя философия, не претендует на истину).
Иногда, но не всегда, даже в угоду семантики.
Однако, в данном случае имеет смысла задуматься о применение figure и figcaption.

Списки применять в данном случае можно, если вы обоснуете (сами себе) их целесообразность. Но не думаю, что у вас получится.

И если вы во втором варианте смогли сделать абзацы без лишних обёрток, то и в первом варианте можно избавиться от лишнего DIV.
 

snow

New Member
Регистрация
19.09.2018
Сообщения
9
BaNru сказал(а):
Чем меньше тегов - тем лучше (это моя философия, не претендует на истину).
Иногда, но не всегда, даже в угоду семантики.
Однако, в данном случае имеет смысла задуматься о применение figure и figcaption.

Списки применять в данном случае можно, если вы обоснуете (сами себе) их целесообразность. Но не думаю, что у вас получится.

И если вы во втором варианте смогли сделать абзацы без лишних обёрток, то и в первом варианте можно избавиться от лишнего DIV.
Каким вариантом будет легче прописать CSS код? С тегами div или списками. Видел у многих верстальщиков на ютубе и читал во многих статья, что для семантики лучше использовать именно списки (теги ul, li), так как пауки лучше индексируют сайт. Да и вообще чем больше в HTML коде использовано разных тегов, тем лучше. Что Вы думаете по этому поводу?

И продолжите пожалуйста свою мысль про теги figure и figcaption. Что Вы думаете по этому поводу?

И если уже совсем решите помочь начинающему фронтендеру, то напишите пожалуйста код CSS? соответсвенно этому куску кода HTML. Спасибо за помощь)
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
snow сказал(а):
Каким вариантом будет легче прописать CSS код?
Это вам решать
snow сказал(а):
Видел у многих верстальщиков на ютубе и читал во многих статья, что для семантики лучше использовать именно списки (теги ul, li), так как пауки лучше индексируют сайт.
Думаю что списки надо прописывать там, где они нужны.
Была когда-то верстка "no div, no float, no clear, no hack, no joke".
Интересная штука была в середине нулевых. Особенно для новичков.
Вся сделана на списках.
Но оправдана ли она? Нет. Поэтому этот сайт с этой вёрсткой ушёл и небытие и у верстальщиков запомнился как вёрстка "for fun".
Вот упоминание о ней
https://habr.com/post/31520/

snow сказал(а):
Да и вообще чем больше в HTML коде использовано разных тегов, тем лучше. Что Вы думаете по этому поводу?
Читайте внимательно, я на это ответил.

snow сказал(а):
И продолжите пожалуйста свою мысль про теги figure и figcaption. Что Вы думаете по этому поводу?
Тоже ответил. Если боретесь за семантику, то имеет смысл использовать. На своё усмотрение. Я использую, если это не мешает простоте (количество тегов остаётся неизменным).

Если уже в полную семантику (учитывая что отзывы и может быть несколько абзацев и даже фото)
Код:
<section class="comments">
<h3>Отзывы клиентов автосервиса SV-Shop</h3>
  <header>
    <img src="img/comment/man1.png" alt="author comment">
    <h4>Илья 28 лет Хабаровск</h4>
  <header>
  <article>
    <p>Заказывал тут коробку передач на Nissan GTR. Запчасть пришла быстро, с виду оригинал.</p>
  </article>
</section>
(по хорошему img и заголовок поменять местами и убедить заказчика/дизайнера, что это пойдёт на пользу)
Либо с фигурой
Код:
<section class="comments">
<h3>Отзывы клиентов автосервиса SV-Shop</h3>
  <figure>
    <img src="img/comment/man1.png" alt="author comment">
    <figcaption>Илья 28 лет Хабаровск</figcaption>
  </figure>
  <article>
    <p>Заказывал тут коробку передач на Nissan GTR. Запчасть пришла быстро, с виду оригинал.</p>
  </article>
</section>
Я бы предпочёл первый вариант из-за заголовка. Ходят слухи, что он лучше для индексации. Плюс для артикля лучше иметь хедер и/или заголовок.

В целом: тут сколько людей - столько и мнений. Никто не даст точного ответа. Думаю даже сами разработчики поисковиков.

PS Со временем на такое уже не особо обращаешь внимание. Тут ещё должно быть "как удобно" потом всё это заверстать и в будущем расширять. В голове ещё много вариантов, но не стал предлагать.
 
  • Like
Реакции: snow

snow

New Member
Регистрация
19.09.2018
Сообщения
9
Приму к сведению советы. Спасибо за помощь, буду учится далее...
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Давно я улыбался с вёрстки майл.ру, там было больше 20 вложенных div. И ничего, жили же как-то они.
Если посмотреть сейчас любой крупный сайт, который учит нас как жить (гугл, яндес и т.д.), то там о семантике вообще ни какой речи нет.

Взять даже популярные на протяжение последних лет метатеги, которые бывает весят больше чем сама страница и дублируются (все хотят метатеги не только для гугла, но и фейсбука и прочих)...но, как начнёшь прогонять сайты через онлайн сервисы с рекомендациями по оптимизации (например pagespeed), то там он начинает орать "у вас слишком большой хедер" (или что-то такое).

Поэтому повторю: чем меньше, тем лучше. На странице семантика должна быть первичная, дальше всё по удобству. Лучше лишний div или span (не уверен - ставь их), чем не там поставленный заголовок. Но в первую очередь "чем меньше, тем лучше" - это для себя, чтобы не захламлять код, им удобнее будет управлять. И со временем, хочешь того или нет, он будет разрастаться: там надо добавить слайдер, там другую свистопердульку, там забыли добавить дату или надо поставить ссылку, и т.д.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ