Один вопрос

Один вопрос: при семантической разметке, дивы в формах, являлись бы логически-связанными частями блока – секциями, или стоило бы их оставить дивами, как маленькие элементы?

    <div class="half-width">
            <label for="Date-of-Birth">Дата рождения</label>
            <input type="text" id="Date-of-Birth" class="date">
        </div>
        <div class="half-width">
            <label for="color">Цвет</label>
            <select id="color">
                <option>Рыжий</option>
            </select>
        </div>

Перефразируйте, пожалуйста. Что вы имеете в виду под “маленькие элементы”?

div — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов (Знакомство с HTML5 / Разделы страницы. Теги article и section). На данный момент, я не всегда понимаю, когда нужно использовать тег section, а когда div, поэтому пытаюсь разбираться на конкретных примерах. В примере кода, я больше склонен к использованию секции, т.к. вижу связь между элементами формы и считаю их зависимыми друг от друга.

Обертка для всего представленного в фрагменте кода была бы section, а для поля с подписью - как и показано, просто div. (по моему мнению)

Получается, что каждый блок в форме, мог бы быть секцией, что привело бы к нагромождению в коде, ради разделения на смысловые фрагменты.

Интересно, стоит ли оно того(я вообще в целом о использовании семантических тегов)?

Если вы верстаете по html5, то использование семантических тегов обязательно. А что значит “стоит” в данном случае? Разве это так затратно по времени или морально?

Думаю, тут больше вопрос не о затраченном времени, а в размере кода. Например, мне пока страшно смотреть на html-страницы сайтов, где по 1000 и больше строк, в ужатом виде. Главный вопрос – какую пользу принесут мне эти теги, при верстке реального сайта, помимо понимания того, какое логическое значение имеет фрагмент кода?

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

1 лайк

Обязательно прочитаю.

Прежде всего, семантическую разметку любят поисковые машины, я полагаю, что изначально для них это и было придумано. Я не думаю, что это особо помогает верстальщику или программисту, скорее даже запутывает. КОгда у нас на сайте 10 секшенов, а может и более, то все они превращаются в мутную массу, особенно если не вы их сами расставляли. Если уж и ориентироваться в 1000 строках кода, то по названию классов(если они нормально придуманы), а еще лучше если все модули интерфейса страницы разбиты на отдельные папки и файлы и у вас есть доступ к таким источникам до превращения их в длинную колбасу(до сжатия). Создавать лишние папки и файлы боятся те, кто не знают что такое сборщик проекта. При наличии автоматизированной сборки проекта с участием билдера, создавать новые папки и файлы приятно, так как потом приятно в них ориентироваться. А вот роботы ориентируются на вашей странице быстрее при наличии семантической разметки, так как они натыкаются именно на колбасу и им надо ее поскорей скушать(они очень занятые машиныи ведь им надо ко всем успеть зайти в гости пока не стемнеет), они быстрей обрабатывают страничку, Видя ее структуру, индексируют, а значит отмечают в своей голове - о да, это то что мы любим, а значит ранжируют сайт выше. Но наша задача не запутать роботов. поэтому если мы сами не уверены, то лучше использовать старый добрый див, дабы не навредить. Исходя из этого, когда мы пишем семантическую разметку мы как бы общаемся с роботом и это полагаю, главное что надо иметь в виду. Поэтому заключать раздел или статью в див нет смысла. мы сначала говорим роботу тут старый див, а потом в этом старье еще его убеждаем найти крутые разделы, пыщущие css3 анимацей и нашими знаниями в этой области. А надо так - Робот заходит на страницу, парсит теги верхнего уровня и сразу понимает из каких частей состоит ваш сайт… и ему плевать на всякие побочные плюшки которые есть на вашем сайте, ему надо быстро словить главную мысль вашего сайта, чтобы потом выдать релевантный ответ на запроссы миллионов пользователей.

3 лайка

Суть уловил. Всё-таки смысл использовать эти теги есть.

Пока мучаюсь со своим макетом, постоянно возникают вопросы, на которые сам себе не могу ответить и google иногда тоже. Есть контейнер центровки содержимого – div. Он обычно находится на верхних уровнях и поэтому большая часть HTML-документа будет находиться внутри этого тега. И тут возникает вопрос – имеет ли смысл использовать семантическую разметку внутри этого дива? Сейчас у меня такое впечатление: в старую обертку засовываем модную разметку.

Код покажите…

Примером может быть любой макет, где отцентровано содержимое, на верхних уровнях кода.

<section class="stock">
			<div class="container">
				<div class="mens-wear stock-item"> 
					<a href="#">
						<img src="./images/men's-wear.png" alt="men's-wear" width="670" height="570">
					</a>
				</div>	
				<div class="womens-wear stock-item">
					<a href="#">
						<img src="./images/women's-wear.png" alt="women's-wear" width="494" height="320">
					</a>
				</div>
				<div class="baby-shop stock-item" alt="baby-shop" width="494" height="245">
					<a href="#">
						<img src="./images/baby-shop.png">
					</a>
				</div>
			</div>
		</section>

Как я понял, в дивы нет смысла запихивать секционные элементы. Но див с классом контейнер является необходимым почти при любой вёрстке. И тут мне не совсем понятно, как размечать код внутри этого дива?

Тоже можно разметить семантически. Например, элемент товара может быть <article>, если подойдет.

Можно, по сути, каждая категория(элемент) из ассортимента товаров может быть независимой от своих “соседей”. Но меня больше заботит то, как будет видеть эти элементы поисковик, внутри контейнера центровки, ведь контейнер – обычный див.