| Тег для создания таблицы.
|
|
|
Определяет тело таблицы.
|
| |
|
Создает ячейку таблицы.
|
|
|
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
|
|
|
Создает большие поля для ввода текста.
|
|
|
Определяет нижний колонтитул таблицы.
|
|
|
Создает заголовок ячейки таблицы.
|
|
|
Определяет заголовок таблицы.
|
|
|
Определяет дату/время.
|
|
|
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
|
| |
| Создает строку таблицы.
|
|
|
Добавляет субтитры для элементов и .
|
|
|
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
|
| |
Создает маркированный список.
|
|
|
Выделяет переменные из программ, отображая их курсивом.
|
|
|
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
|
|
|
Указывает браузеру возможное место разрыва длинной строки.
|
В HTML5 для структуры кода введено несколько новых тегов:
,
,
,
,
, которые заменяют в некоторых случаях привычный
. Хотя кажется, что особой разницы между тегами
и
нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают
, для них это типовой тег разметки - замени его на
и смысл не поменяется. Другое дело
, робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.
Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.
Давайте для начала сделаем шапку сайта с помощью тега
(пример 6.2).
Пример 6.2. Использование
Попытка добавить в стилях фон к тегу
ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display
, тогда они начнут корректно выводиться (пример 6.3).
Пример 6.3. Шапка сайта
HTML5
CSS 2.1
IE 7+
IE 9+
Cr
Op
Sa
Fx
header {
display: block;
background: #00B0D8 url(images/header-gradient.png) repeat-x;
}
Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в
такой код.
document.createElement("header");
Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).
Пример 6.4. Скрипт для IE
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(",");
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.
Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.
Пример 6.5. Скрипт для IE
Все указанные скрипты должны располагаться в коде перед CSS.
Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:
установить доктайп
;
включить скрипт из примера 6.4 или 6.5;
в стилях для новых тегов установить display
: block
.
Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.
Пример 6.6. Использование тега
HTML5
IE
Cr
Op
Sa
Fx
article
Следы невиданных зверей
История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.
Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».
Пример 6.7. Использование
HTML5
IE
Cr
Op
Sa
Fx
aside
document.createElement("aside");
document.createElement("article");
aside {
background: #f0f0f0; /* Цвет фона */
padding: 10px; /* Поля */
width: 200px; /* Ширина сайдбара */
float: right; /* Обтекание слева */
}
article {
margin-right: 240px; /* Отступ справа */
display: block; /* Блочный элемент */
}
Экономьте электричество
Хороший язык
Чья палка больше
История о том, как приходилось экономить электричество,
какие меры для этого принимались, и куда оно на самом деле уходило.
Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).
Пример 6.8. Использование
HTML5
IE
Cr
Op
Sa
Fx
figure
document.createElement("figure");
document.createElement("figcaption");
figure {
background: #5f6a72; /* Цвет фона */
padding: 10px; /* Поля вокруг */
display: block; /* Блочный элемент */
width: 150px; /* Ширина */
float: left; /* Блоки выстраиваются по горизонтали */
margin: 0 10px 10px 0; /* Отступы */
text-align: center; /* Выравнивание по центру */
}
figcaption {
color: #fff; /* Цвет текста */
}
Софийский собор
Польский костёл
Содержит описание для тега
. Тег
должен быть первым или последним элементом в группе.
Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).
Пример 6.9. Использование
HTML5
IE
Cr
Op
Sa
Fx
footer
Персональный сайт Кристины Ветровой
Добро пожаловать!
Рада приветствовать вас на своем сайте.
Copyright Кристина Ветрова
Определяет «шапку» сайта или раздела.
Используется для группирования заголовков веб-страницы или раздела (пример 6.10).
Пример 6.10. Использование
HTML5
IE
Cr
Op
Sa
Fx
hgroup
Кристина Ветрова
Персональный сайт
Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в
обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов
в документе. Запрещается вкладывать
внутрь
.
Пример 6.11. Использование
HTML5
IE
Cr
Op
Sa
Fx
nav
Чебурашка и крокодил Гена
Чебурашка | Гена |
Шапокляк | Лариска
Добро пожаловать!
Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег
внутрь другого.
Пример 6.12. Использование
HTML5
IE
Cr
Op
Sa
Fx
section
Съёмки фильма Полипропилен
История о том, как снимали фильм, где герои отдыхали на пляже,
потом пришёл антагонист, избил протагонистов, сбросил их в бассейн,
и что из этого получилось.
Хороший язык
История о том, как проходила студия изучения языка эсперанто,
в то время, как над ней, на веранде велась студия приколистов,
где травились анекдоты, и что из этого получилось.
Помечает текст внутри тега
как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера
, либо задаваться через атрибут datetime
(пример 6.13).
Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.
Для каждой единицы существует своя заданная форма и ограничения.
- Год — задается четырьмя цифрами (1860).
- Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
- День — две цифры от 01 до 31.
- Час — две цифры от 00 до 23.
- Минуты — две цифры от 00 до 59.
- Секунды — две цифры от 00 до 59.
- Часовой пояс — часы и минуты с указанием знака плюс или минус.
Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.
Пример 6.13. Использование
HTML5
IE
Cr
Op
Sa
Fx
time
1957-10-04 запущен первый искусственный спутник Земли.
1960-08-19 первый полёт собак в космос.
1961-04-12 первый полёт человека в космос.
1963-06-16 первый полёт женщины-космонавта.
1969-07-21 высадка человека на Луну.
Стандарт HTML5
это язык для структурирования и представления материалов в сети Интернет, который был представлен и рекомендован к использованию в 2014 году. На сегодняшний момент практически все браузеры поддерживают большую часть нововведений HTML5 , однако не стоит забывать, что развитие языка продолжается и Консорциум Всемирной паутины продолжает изменять и совершенствовать пятую версию.
Обратите внимание, что начиная пятой версии язык HTML5 представлен не просто как язык структурирования, но и как язык представления, что отражено в семантической верстке, т.е. HTML теперь используется в новом качестве.
Принятие стандарта HTML5
привело к уменьшению разброса существующих технологий верстки. Так, до данного стандарта повсеместно использовались версии 4.01 HTML и стандарты XHTML 1.0 и 1.1, в результате чего страницы были представлены смесью данных технологий, что усложняло работу браузера по интерпретации страниц.Для стандарта HTML5 введен новый doctype:
Рассмотрим основные изменения которые следует учесть в первую очередь:
согласно HTML5, язык html является независимым от регистра символов, поэтому теги можно писать с любыми сочетаниями строчных и прописных букв: , , — данные написания являются правильными и равнозначными.
html5 объединяет две технологии html и xhtml, как следствие устраняется возможность смешанных правил написания кода. Если раньше можно было встретить написания непарных тегов:
так и
так и
то в стандарте html5 правильным написанием является:
Изменения в тегах: устаревшие и адаптированные элементы
Перечисление всех изменений в тегах невозможно в рамках одного занятия, поскольку изменения в стандарте затронуло огромное количество тегов, поэтому давайте рассмотрим основные изменения, которые понадобятся нам в работе.
Гиперссылка
Пример
которая в предыдущих стандартах вызывала ошибки, поскольку строчных элемент оборачивал блочный, в HTML5 валидна.
Одним из самых популярных вопросов начинающих верстальщиков является: «Как сделать гиперссылку на блоке div?
». И чаще всего отвечали: «Используйте JS». Как видно из примера, в HTML5 можно просто вложить внутрь гиперссылки нужные блоки.
Теги и
В HTML 5 были возвращены теги (делает шрифт жирным) и (курсив). В современной интерпретации, данные теги служат только для визуального оформления и не несут смысловой нагрузки.
Тег small
Тег использовался в предыдущих версиях для задания размера шрифта, меньше чем основной текст (антиподом ему был тег big – который увеличивал размер шрифта). Разные отображения в различных браузерах привели к вытеснению данного элемента тегом span, который значительно удобнее в использовании.
В HTML5
тег был возвращен, однако его интерпретация изменилась, теперь он используется для оборачивания текста, который должен быть на странице, однако не должен отвлекать внимания от основного содержимого, и быть как можно менее заметным. Аналог – текст по сноскам, или различные условия акций. Визуально также уменьшает размер шрифта текста, который оборачивает.
Тег address
В отличие от предыдущих версий HTML в пятой редакции используется только для указания контактных данных автора материалов. Не используйте тег для указания контактных данных на сайте организации (для этого следует применять микроформаты и микроданные).
Как уже упоминалось, в рамках данного урока невозможно рассмотреть все изменения в тегах, выше мы рассмотрели адаптированные теги, теперь перечислим устаревшие:
- , заменены тегом (используется для внедрения объектов);
- — заменили тегом (используется для аббревиатур);
- — заменили тегом (для внедрения проигрывателя в страницу);
- — заменили на ;
- , — заменили на теги И (для вставки листингов программ и кодов);
- — заменили на
Свойства форматирования текста , , , — убрали, вместо них следует использовать CSS для оформления.
Напомним, что многие устаревшие теги поддерживаются браузерами, однако валидацию страницы с устаревшими тегами не пройдут. Именно поэтому после окончания верстки страницы следует проверять ее на валидаторе.
HTML 5 и CSS 3 добавили в верстку огромное количество новых тегов и свойств. Посмотрите возможности анимации с новыми CSS 3 свойствами.
Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов , которым присваивали классы class или идентификаторы id для наглядности разметки (например, ). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было , стало ). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны .
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент
Категории контента:
потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов и они могут располагаться в любой части страницы.
Site description
Элемент нельзя помещать внутрь элементов , или другого элемента .
2. Элемент
Категории контента:
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри . На странице может быть несколько элементов . Не заменяет теги
или , он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты , этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
В качестве элементов панели навигации можно использовать не только элементы списков:
...
...
Также можно добавлять заголовки внутрь элемента:
...
3. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы , которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом . Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
...
Опубликовано в категорииМузыка.
0 комментариев
4. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент . В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
...
...
...
внутри
Можно создавать родительские элементы с вложенными элементами , в которых есть один или несколько элементов . Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента
Заметки о природе
...
...
Исторические заметки
...
...
5. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого)
. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: , цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
...
...
.........
6. Элемент
Категории контента:
потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов . Как каждая страница, так и каждая статья может иметь свой элемент , более того, можно поместить в элемент , чтобы указать источник цитирования.
...
@2014...
7. Элемент
Категории контента:
потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента , для отображения автора статьи — внутри тега . В браузере обычно отображается курсивом.
8. Элемент
Категории контента:
потоковое содержимое.
Элемент представляет основное содержимое документа (содержимое элемента ). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент не может быть потомком таких элементов как , , , или .
Пудель
О породе
Разновидности
Внешний вид
Характер
Copyright © 2016 Моя собака.ру
9. Элемент
Категории контента:
потоковое содержимое, корневое секционное содержимое.
Элемент представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
Осенний лес
Элемент является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
10. Элемент
Элемент — потомок элемента , не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента , высота по умолчанию равна 18px .
11. Элемент
Категории контента:
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
12. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента:
потоковое содержимое, текстовое содержимое.
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов ;
— один и более элементов , , каждый из которых предшествует или следует непосредственно за элементом .
Элементы , , и не относятся ни к одной категории контента.
Элемент определяет вложенный в него текст как базовый компонент аннотации.
Элемент выводит аннотацию к тексту сверху или снизу над ним.
Элемент отмечает вложенный в него текст как дополнительную аннотацию.
Элемент выводит альтернативный текст в случае если браузер не поддерживает элемент .
