Семантические тэги. Определение, примеры.

Семантическая разметка

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

Семантика, как научная дисциплина, изучает значение единиц языка. В IN под семантикой понимается формализация конструкций языков программирования.

Попробуем разобраться в том, что же это значит уже в контексте HTML и веб - разработки.

Мы упоминали о том, что большинство веб - страниц создается по определенному шаблону: шапка сайта, полоса навигации, блок основного содержимого и т.д.

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

Очевидно, что " потребителями" подобной разметки являются не пользователи сайтов, ведь тегов они не видят. Суть семантической разметки – упрощение машинной обработки содержимого сайтов, к примеру, для лучшего " понимания" сайта поисковыми роботами.

Помимо уже сказанного можно выделить следующие преимущества семантической разметки:

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

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

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

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

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

Таким образом, HTML теги могут быть разделены на семантические и теги представления.

К семантическим тегам относятся любые теги, указывающие на суть их содержимого.

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

10) Виды вёрстки. Табличная, блочная, адаптивная. Плюсы и минусы.

Преимущества блочной html верстки (верстки дивами):

+ Все свойства блоков задаются в таблице стилей, что облегчает html-код.

+ Слои-блоки можно накладывать друг на друга, что облегчает расположение элементов на веб-странице.

+ Более быстрая загрузка страниц с блочной версткой (верстка div’ами) по сравнению со страницами табличной верстки.

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

Недостатки табличной html верстки:

- Таблицы нельзя наложить друг на друга, что создает определенные трудности при верстке сложных по дизайну страниц.

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

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

Адаптивная верстка включает в себя понятие адаптивного веб-дизайна, введенного Этаном Маркоттом в майской статье 2010 г. Адаптивный веб-дизайн или Responsive Web Design представляет собой технологию создания веб-страниц, оптимизированных для работы с различными устройствами, имеющими доступ в Интернет. Адаптивность подразумевает автоматическое изменение контента и структуры сайта под заданное устройство. Как выглядит «оптимизированный» сайт, например, по отношению к планшету в сравнении с лэптопом? – элементы страницы уплотнены, контент частично сокращен, присутствует не вся графика, баннеры переместились в нижнюю часть экрана, на сайте появился вертикальный скроллинг, все это происходит без потери в качестве, информация представлена более компактно.

Адаптивный веб-дизайн подразумевает использование следующих техник:

Резиновый макет на основе пропорций (fluid grids) – тип макета переменных, частный случай фиксированного типа макета, который позволяет переносить макет на реальный сайт таким, каким он создавался в редакторе HTML.

Резиновые изображения (fluid images), позволяющие менять свои размеры под родительский блок.

Media queries – часть стандарта CSS, позволяющая применять стили на основе информации о разрешении устройства.

Mobile first – использование этого принципа при создании адаптивного сайта предполагает движение в логике «от мобильных устройств – к обычным компьютерам», чтобы технически предусмотреть приоритеты отображения того или иного контента.

При разработке адаптивного сайта должны учитываться не только особенности браузеров, но и различных операционных систем и разрешений экрана. Использование таких технологий, как JavaScript, различных CSS стилей, jQuery-плагинов для адаптации меню и др. являются неотъемлемыми инструментами в работе над созданием адаптивного сайта. В результате мы получаем автоматическое распознавание разрешения экрана воспроизводящего устройства, его типа, управление подключением/отключением различных элементов, анимации, изменение размера шрифтов и ширины блоков. Универсальность веб-сайта для различных устройств является конечной целью. Несомненным преимуществом является то, что адаптивные сайты учитывают возможности отдельных платформ. Кроме того, адаптивный сайт – наилучший выбор, с точки зрения алгоритмов Google.