Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






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

⇐ ПредыдущаяСтр 35 из 65Следующая ⇒

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

Семантика, как научная дисциплина, изучает значение единиц языка. В 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 - теги при создании сайтов, т.е. выделяется специализированными тегами заголовки, абзацы, цитаты, адреса, контейнеры, задаете имена таблиц и т.п., то фактически, вы семантически размечаете ваш документ.


⇐ Предыдущая30313233343536373839Следующая ⇒





Date: 2015-07-22; view: 590; Нарушение авторских прав


mydocx.ru - 2015-2025 year. (0.078 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию