Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Семантическая разметка
|
|
Для начала необходимо сказать несколько слов о семантике в целом. К сожалению в рамках данного курса мы не можем позволить себе подробное описание этой области знаний, поэтому постараемся акцентироваться только на ключевых моментах.
Семантика, как научная дисциплина, изучает значение единиц языка. В IN под семантикой понимается формализация конструкций языков программирования.
Попробуем разобраться в том, что же это значит уже в контексте HTML и веб - разработки.
Мы упоминали о том, что большинство веб - страниц создается по определенному шаблону: шапка сайта, полоса навигации, блок основного содержимого и т.д.
В HTML5 предусмотрен ряд тегов, позволяющих явно указать что тот, или иной контент относится к определенной части веб - страницы, либо указывающих на то, чем контент является (цитата, время и дата и т.п.).
Очевидно, что "потребителями" подобной разметки являются не пользователи сайтов, ведь тегов они не видят. Суть семантической разметки – упрощение машинной обработки содержимого сайтов, к примеру, для лучшего "понимания" сайта поисковыми роботами.
Помимо уже сказанного можно выделить следующие преимущества семантической разметки:
- Повышается доступность, т.к. страницы сайта не потеряют своей структуры даже при отключенном или неподдерживаемом CSS.
- Контент страниц сайта будет понятен для людей, читающих сайты с помощью специальных программ для чтения с экрана.
- Семантическая разметка оказывает положительное влияние на поисковые системы, т.к. их роботам не составляет труда индексировать страницы и определять истинное значение тех или иных фрагментов текста.
- Значительно упрощается дальнейшая поддержка подобным образом сверстанного сайта, снижаются затраты на редизайн.
- Уменьшается вес страниц сайта, повышается читабельность кода сайта за счет его компактности, увеличивается скорость загрузки страниц сайта.
Таким образом, HTML теги могут быть разделены на семантические и теги представления.
К семантическим тегам относятся любые теги, указывающие на суть их содержимого. Приведем список наиболее часто встречающихся семантических тегов:
| Таблица 14.1. | |
| Тег | Описание |
| a | предназначен для создания cсылки или якоря |
| abbr | указывает, что содержимое тега является аббревиатурой |
| acronym | указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово) |
| address | содержит информацию об авторе |
| area | применяется внутри контейнера < map > для создания карты-изображения. Определяет параметры активных зон-ссылок на карте |
| base | указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы |
| bdo | устанавливает направление вывода текста (справа налево, слева направо) |
| blockquote | выделяет цитату (как правило длинную). Отображается с увеличенным отступом |
| body | определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы |
| button | создает на форме кнопку |
| caption | создает заголовок таблицы. Отображается над таблицей вне рамки. Элемент таблицы |
| cite | используется, чтобы указать источник цитаты или ее автора. Как правило, оформляется курсивом |
| code | обозначает текст, как код программы или формулу |
| col | позволяет задать общие свойства сразу для всего столбца таблицы |
| colgroup | позволяет задать общие свойства сразу для нескольких столбцов таблицы |
| dd | используется при создании списка определений вместе с <dl> и <dt>. Задает определение термина |
| del | обозначает текст, как удаленный. Может выступать как строчный или как блочный элемент в зависимости от контекста |
| dfn | выделяет в тексте термин |
| div | выделяет логический блок. Один из основных элементов блочной верстки |
| dl | используется при создании списка определений вместе с <dt> и <dd> |
| dt | используется при создании списка определений вместе с <dl> и <dd> |
| em | используется для акцентирования внимания |
| fieldset | предназначен для группировки элементов формы |
| form | создает форму на странице. Форма применяется для обмена данными между пользователями и сервером |
| h1, h2, h3, h4, h5, h6 | используются для создания заголовков |
| head | заголовок документа, содержит информацию о текущем документе |
| html | тег-контейнер, заключающий в себе все содержимое страницы, кроме doctype, который должен быть расположен перед тегом <html> |
| img | добавляет на страницу изображение |
| input | позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге |
| ins | обозначает текст, добавленный в новой версии документа. Может выступать как строчный или как блочный элемент в зависимости от контекста |
| kbd | обозначает текст набираемый на клавиатуре или сочетания клавиш |
| label | позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши |
| legend | определяет заголовок для элементов форм, сгруппированных в контейнере тега <fieldset> |
| li | создает элемент списка |
| link | устанавливает связь с внешними документами, чаще всего с таблицами стилей |
| map | тег-контейнер для создания карты-изображений |
| meta | содержит метаданные - техническое описание документа в виде пар "имя-значение". Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств |
| noscript | содержит текст, который выводится браузером |
| object | используется для внедрения на страницу различных объектов (как правило медиафайлов) |
| ol | создает нумерованный список |
| optgroup | тег-контейнер для тегов <option>. Объединяет их в группу |
| option | задает отдельную строку списка в теге <select> |
| p | предназанчен для создания абзацев |
| pre | определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки |
| q | выделяет в тексте цитату |
| samp | обозначает текст, как код программы или формулу |
| script | добавляет на страницу скрипт |
| select | создает элемент выбора значений |
| span | используется в основном для оформления и/или назначения уникального идентификатора (id) определенному фрагменту текста |
| strong | логически выделяет, усиливает текст. |
| style | задает таблицу стилей |
| table | определяет таблицу |
| tbody | применяется для группировки строк, с целью задать общее форматирование |
| td | задает ячейку таблицы |
| textarea | определяет многострочное поле для ввода. |
| tfoot | применяется для определения строки, которая будет отображаться внизу таблицы |
| th | определяет ячейку-заголовок таблицы |
| thead | применяется для определения строки/строк, которые будут отображаться вверху таблицы |
| title | определяет заголовок документа |
| tr | определяет строку таблицы |
| ul | создает маркированный список |
| var | обозначает имя переменной |
Нами приведен не полный список семантических тегов, более того этот список вряд ли когда - нибудь будет полным, к примеру можно вспомнить о микроформатах (см. список материалов для самостоятельного изучения).
Важно запомнить одно, если вы логически верно используете HTML - теги при создании сайтов, т.е. выделяется специализированными тегами заголовки, абзацы, цитаты, адреса, контейнеры, задаете имена таблиц и т.п., то фактически, вы семантически размечаете ваш документ.
Date: 2015-07-22; view: 547; Нарушение авторских прав