article

 
Читайте также:  Java work with images

Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.

Все указанные скрипты должны располагаться в коде перед CSS.

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

1. установить доктайп ;
2. включить скрипт из примера 6.4 или 6.5;
3. в стилях для новых тегов установить display : block .

Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.

Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др. В примере 6.6 показано добавление тега .

Пример 6.6. Использование тега

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

Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».

          
История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило.
  

Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).

Содержит описание для тега . Тег должен быть первым или последним элементом в группе.

Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).

       
Персональный сайт Кристины Ветровой
 
 
Добро пожаловать!
 
Рада приветствовать вас на своем сайте.
 
   

Определяет «шапку» сайта или раздела.

Используется для группирования заголовков веб-страницы или раздела (пример 6.10).

       
Кристина Ветрова
 
Персональный сайт
 
  

Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .

       
Чебурашка и крокодил Гена
 
  
Добро пожаловать!
 
  

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

       
Съёмки фильма Полипропилен
 
История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.
 
 
Хороший язык
 
История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.
 
  

Помечает текст внутри тега как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера , либо задаваться через атрибут datetime (пример 6.13).

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.

Для каждой единицы существует своя заданная форма и ограничения.

• Год — задается четырьмя цифрами (1860).
• Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
• День — две цифры от 01 до 31.
• Час — две цифры от 00 до 23.
• Минуты — две цифры от 00 до 59.
• Секунды — две цифры от 00 до 59.
• Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

       
Опубликовано: сегодня
 
1957-10-04 запущен первый искусственный спутник Земли.
 
1960-08-19 первый полёт собак в космос.
 
1961-04-12 первый полёт человека в космос.
 
1963-06-16 первый полёт женщины-космонавта.
 
1969-07-21 высадка человека на Луну.
  

Источник

Что такое семантическая вёрстка и зачем она нужна

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном и ) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Почему семантика важна

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает б_о_льшему количеству пользователей работать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.

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

Классический пример — расписание поезда «Сапсан» в выдаче Google.

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

Ну и представьте, насколько проще читать вместо . Или вот такой код. Смотрите, и сразу понятно, что тут и зачем.

Основные семантические теги HTML

Но в актуальной версии HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

• Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
• Особенности: желателен заголовок внутри.
• Типовые ошибки: путают с тегами и .

• Значение: побочный, косвенный для страницы контент.
• Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
• Типовые ошибки: считать тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.

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

• Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
• Особенности: этих элементов может быть несколько на странице.
• Типовые ошибки: использовать только как шапку сайта.

• Значение: основное, не повторяющееся на других страницах, содержание страницы.
• Особенности: должен быть один на странице, исходя из определения.
• Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

• Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
• Особенности: этих элементов может быть несколько на странице. Тег не обязан находиться в конце раздела.
• Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

1. Крупные смысловые блоки на каждой странице сайта. Теги: , , .
2. Крупные смысловые разделы в блоках. Теги: , , , .
3. Заголовок всего документа и заголовки смысловых разделов. Теги: - .
4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

• Получилось найти самый подходящий смысловой тег — использовать его.
• Для потоковых контейнеров — .
• Для мелких фразовых элементов (слово или фраза) — .

1. Можете дать имя разделу и вынести этот раздел на другой сайт? —
2. Можете дать имя разделу, но вынести на другой сайт не можете? —
3. Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —

Как точно не нужно делать

Не используйте семантические теги для красоты. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник