Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 5

#1 snow

snow

    Прохожий

    Топикстартер
  • Участник
  • 0
    9 сообщ.

Отправлено 11 Октябрь 2018 в 08:07

Необходимо сверстать блок отзывов

 

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

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

		<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>

 


  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1016
    3 719 сообщ.

Отправлено 11 Октябрь 2018 в 10:19

Чем меньше тегов - тем лучше (это моя философия, не претендует на истину).
Иногда, но не всегда, даже в угоду семантики.
Однако, в данном случае имеет смысла задуматься о применение figure и figcaption.

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

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

#3 snow

snow

    Прохожий

    Топикстартер
  • Участник
  • 0
    9 сообщ.

Отправлено 11 Октябрь 2018 в 10:31

Чем меньше тегов - тем лучше (это моя философия, не претендует на истину).
Иногда, но не всегда, даже в угоду семантики.
Однако, в данном случае имеет смысла задуматься о применение figure и figcaption.

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

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

 

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

 

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

 

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


  • 0

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1016
    3 719 сообщ.

Отправлено 11 Октябрь 2018 в 11:01

Каким вариантом будет легче прописать CSS код?

Это вам решать

Видел у многих верстальщиков на ютубе и читал во многих статья, что для семантики лучше использовать именно списки (теги ul, li), так как пауки лучше индексируют сайт.

Думаю что списки надо прописывать там, где они нужны.
Была когда-то верстка "no div, no float, no clear, no hack, no joke".
Интересная штука была в середине нулевых. Особенно для новичков.
Вся сделана на списках.
Но оправдана ли она? Нет. Поэтому этот сайт с этой вёрсткой ушёл и небытие и у верстальщиков запомнился как вёрстка "for fun".
Вот упоминание о ней
https://habr.com/post/31520/
 

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

Читайте внимательно, я на это ответил.
 

И продолжите пожалуйста свою мысль про теги 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 Со временем на такое уже не особо обращаешь внимание. Тут ещё должно быть "как удобно" потом всё это заверстать и в будущем расширять. В голове ещё много вариантов, но не стал предлагать.
  • 1

#5 snow

snow

    Прохожий

    Топикстартер
  • Участник
  • 0
    9 сообщ.

Отправлено 11 Октябрь 2018 в 11:16

Приму к сведению советы. Спасибо за помощь, буду учится далее...


  • 0

#6 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1016
    3 719 сообщ.

Отправлено 11 Октябрь 2018 в 11:52

Давно я улыбался с вёрстки майл.ру, там было больше 20 вложенных div. И ничего, жили же как-то они.
Если посмотреть сейчас любой крупный сайт, который учит нас как жить (гугл, яндес и т.д.), то там о семантике вообще ни какой речи нет.

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

 

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


  • 0



Похожие темы Свернуть

  Название темы Форум Автор Статистика Последнее сообщение
Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей