Здравствуйте! В этой статье подведем итоги предыдущих статей.
В прошлых статьях я вас знакомил с языком гипертекстовой разметки html5 (напомню, язык предназначен для разметки элементов которые браузер вам отображает на мониторе вашего устройства ПК, ноутбук, планшет или сотовый телефон), так же язык таблицы каскадных стилей CSS3 (напомню, помогает стилизовать и разместить элементы обозначенные html5). Так же я наглядно показывал и расписывал как создать блок сайта и блок с меню или списком.
В итоге мы с такими знаниями можем составить структуру DOM и с помощью стилей уже будет готовая сверстанная страница сайта(пока локально если же некоторые не решили это опробавать уже на хостинге и разместить в интернете). DOM это своего рода структура дерева вашего сайта обозначенная в представлении html5. Приведу пример, Всегда важно перед тем как сверстать сайт по нужному вам макету поделить его на как минимум на три части (которые должны отобразиться в браузере). Как правило это голова, тело и подвал. Это самые основные ветки вашего дерева DOM, про css3 щас не думаем.
<<Голова>> Как правило в голове должно находиться таким элементам как логотип, название, слоган, вид деятельности сайта и меню. Так же в некоторых сайтах встречаются и контактные данные месенджеры или соцсети, адрес или контактные телефоны. Вот несколько веток одной из основной ветки вашего DOMa.
<<Тело>> Можно сказать ваш информационный контент сайта. Там может быть все что угодно, но обращаем внимание на то что тело иногда может поделиться на три основные ветки DOMa. Это правая колонка, допустим новости или акции. Основной контент это там где уже предлагают или описывают саму основную тематику сайта. В левой колонке может находиться список товара или пунктов какого либо рода которая вас приведет на одну из страниц сайта(в зависимости от того куда написали адрес ссылки, это может быть и не обязательно ваш сайт). В основном контенте может и не быть колонок по сторонам. В более современных сайтах как бы такое делается только на внутренних страницах а как правило главная страница далеко может отличаться от внутренних. На главной странице в теле могут поставить слайдер с разными спец предложениями, при добавлении пиара ставят различного рода преимущества (мол почему с нами выгодно), без вступительного каталога или галереи тоже редко кто обходится, тут же ниже могут и поставить блок с новостями или новинками по акции ну и в итоге можно разместить блок с логотипами партнеров с какими работают или отзывами.
<<Подвал>> Ну подвал особо может не отличаться от головы, так как там в принципе находится тоже самое что и в голове. Так же может быть меню но иногда и ставят список, могут находиться контактные данные, могут присутствовать счетчики посещаемости или информеры. Единственно чем голова от подвала отличается так то что в подвале могут находиться такие блоки как Copyright или авторское право на сайт. В голове такое не размещается. Так же не то что спорный вопрос но имеет небольшое разногласие это блок с картой. Он может находиться отдельно между телом и подвалом внизу или же в самом подвале с контактными данными.
Ну как бы вы уже более ли менее знаете что такое DOM. Не помешало бы узнать что такое семантика. Когда вы взялись верстать не забывайте ветки дома называть своими именами, если вы состовляете голову то было бы правильно её обозначить тегом <header></header>. Если это тело то тег <article></article>. А если подвал то <footer></footer>. Просто взять одними <div></div> напечатать html разметку тоже как бы будет не правильно в плане SEO хотя бы. Это другая наука, в скором будущем и её разберем. А так уже на существующем могу простой пример привести: к примеру вы сверстали страничку в css просто селектор обозначили .soc_content и придали стили. Тут другой верстальщик залез в вашу писанину смотрит, во стили прописаны так себе. Давай я щас свой файл подключу и обозначу селектор html body header div .soc_content и все ваши стили слетели пока вы к значению свойства не припишите important. Что крайне не рекомендуется, когда вы делаете рекомендуюмую разметку DOMa и пропишете адрес как можно максимальнее к селектору как я примером ниже показал. То другой если залезет в ваш код ему существующие стили будет сложно переделать(там ему уже придется прописывать important или уже в ваш файл залезти и менять свойства и значения в вашем селекторе) а вы уже сможете понять что в вашем коде ковырялись со стороны. Незнаю как вам а я в сам сайт не лезу я сразу смотрю на код, так как у меня можно так сказать, собственная подпись(по своему индивидуально прописываю код, так как там определенного правильного метода нет, они все правильные). Тут по сути главно одно усвоить, вещи называть своими именами(я про теги). Так же не забываем что у каждого тега должны присутствовать атрибуты. Почему? когда сдаете сайт его будут проверять на валидацию, там если вы не сделали семантично и валидатор вам выдал ошибки. Это может означать одно, сайт вы в сети интернет запустите но в плане SEO вам удачи не видать так как многие поисковики на это смотрят.
Подведем итоги, структура DOM и семантика нужны без них ваш сайт сможет потерпеть такое же фиаско как TITANIC при первом же заплыве.