Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
|
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
|
Акроним. Используйте тег вместо него
|
|
|
Встроенный апплет. Используйте или вместо него.
|
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
|
Текст большего размера. Используйте вместо него
|
|
|
Отцентрованный текст. Используйте вместо него
|
|
|
Список директорий. Используйте |
|
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
|
Фрейм внутри . Используйте вместо него
|
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
|
Моноширный текст. Используйте вместо него
|
|
|
Подчеркнутый текст. Используйте вместо него
|
Здравствуйте гости данного блога и мои верные подписчики. С таким скоростным развитием технологий, науки и программирования, как это можно наблюдать сегодня, неудивительно, что запросы потребителей растут. А это значит, что рано или поздно появляются усовершенствованные версии программ, оборудования и главное языков.
Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.
Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!
Главнокомандующий разметкой сайтов, знаменитый html
После прочтения , а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!
Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.
Итак, для начала стоит запомнить, что html
– это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.
Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?
Тег
– это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).
Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.
Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.
Атрибуты
нужны для расширения спектра возможностей отдельного тега, а также для более гибкого управления внешним видом контейнеров. Безусловно, элементы языка разметки спокойно могут существовать и без определения атрибутов. Тогда будет задавать им форматирование по умолчанию. Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.
| Одиночные теги
|
|
|
В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени.
|
|
Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение.
|
| Парные теги
|
| Как правильно приготовить запеканку?
|
Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор.
|
Близкий родственник языка html
Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.
Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.
Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как и , отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: , , , и другие.
А теперь я хочу перечислить основные теги спецификации, к которым относятся article, aside и другие, а также описать для чего они были созданы.
Семантические теги
С появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.
Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.
Может это и было удобно с одной стороны для девелоперов, однако поисковым системам, а также браузерам приходилось туго. Поэтому было найдено решение в виде семантических тегов.
Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся , и . отвечает за определение на сайте его заголовка или заголовка текста, – за «подвал» внизу интернет-страницы, а – за навигацию сайта.
Для усвоения материала хочу, чтоб вы опробовали практический пример:
Ваш сайт
Блог для айтишников
- Пункт меню 1
- Пункт меню 2
Заголовок публикации
Текст первой статьи
Copyright любимый блогер
Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с
На HTML5, хотя все современные браузеры уже поддерживают данный стандарт. По состоянию на декабрь 2011 года стандарт все еще находится в состоянии разработки.
В HTML5 добавляет много новых синтаксических особенностей – , , и
. Эти элементы разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как , , и
разработаны для того, чтобы обогащать семантическое содержимое документа (страницы).
Новые теги HTML5
- 1. Теги разделов (article, aside, footer, header, hgroup, nav, section)
- 2. Теги группировки контента (figure, figcaption)
- 3. Теги для семантического выделения текста (bdo, mark, time, ruby, rt, rp, wbr)
- 4. Теги для вставки контента (audio, video, canvas, embed, source)
- 5. Теги для элементов форм (datalist, keygen, output, progress, meter)
- 6. Интерактивные элементы (details, summary, command, menu)
Тег
Краткое описание
|
|
Определяет статью
|
|
|
Определяет контент в стороне от основного контента страницы
|
|
|
Определяет аудио контент
|
|
|
Определяет графику
|
|
|
Определяет командную кнопку
|
|
|
Определяет данные в упорядоченный список
|
|
|
Определяет выпадающий список
|
|
|
Определяет шаблон данных
|
|
|
Определяет детали элемента
|
|
|
Определяет диалог (разговор)
|
|
|
Определяет цель события, отправляемого по серверу
|
|
|
Определяет группу медиа-контента, и их подписи
|
|
|
Определяет нижний колонтитул для раздела или страницы
|
|
|
Определяет область заголовка раздела или страницы
|
|
|
Определяет выделенный текст
|
|
|
Определяет измерения в течение заранее определенного диапазона
|
|
|
Определяет навигационные ссылки
|
|
|
Определяет вложенную точку в шаблоне данных
|
|
|
Определяет некоторые виды результата
|
|
|
Определяет ход выполнения задачи любого рода
|
|
|
Определяет правила для обновления шаблонов
|
|
|
Определяет раздел (секцию)
|
|
|
Определяет медиа-ресурсы
|
|
|
Определяет дату/время
|
|
|
Определяет видео
|
Неподдерживаемые теги:
Тег
Краткое описание
|
|
Не поддерживается.
Определяет акроним
|
|
|
Не поддерживается.
Определяет апплет
|
|
|
Не поддерживается.
Используетя вместо CSS для задания шрифта
|
|
|
Не поддерживается.
Определяет большой текст
|
|
|
Не поддерживается.
Определяет текст по центру
|
|
|
Не поддерживается.
Определяет список директорий
|
|
|
Не поддерживается.
Определяет фрейм
|
|
|
Не поддерживается.
Определяет набор фреймов
|
|
|
Не поддерживается.
Определяет поисковый индекс в документе
|
|
|
Не поддерживается.
Определяет секцию, не поддерживающую фрейм
|
|
|
Не поддерживается.
|
|
|
Не поддерживается.
Определяет зачеркнутый текст
|
|
|
Не поддерживается.
Определяет телетайп текст
|
|
|
Не поддерживается.
Определяет подчеркнутый текст
|
|
|
Не поддерживается.
Определяет выровненный текст
|
Список атрибутов HTML5
Атрибут
Значение
Краткое описание
| contenteditable
|
true
false
|
Определяет, может ли пользователь редактировать содержимое (контент)
|
| contextmenu
|
menu_id
|
Определяет контекстное меню элемента
|
| draggable
|
true
false
auto
|
Определяет, может ли пользователь перетащить элемент
|
| irrelevant
|
true
false
|
Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается
|
| ref
|
URL / id
|
Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено)
|
| registrationmark
|
reg_mark
|
Определяет зарегистрированный знак элемента
|
| template
|
URL / id
|
Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу
|
Структура разметки страницы в HTML5
При использовании обычной структуры страницы
сайта можно выделить несколько типичных блоков, описываемых тегом div с соответствущим классом (, , , , и пр.).
При использовании с применением HTML5
, эти блоки описываются структурными тегами , , , , и пр., что очень упрощает жизнь разработчикам. Данные теги являются структурными эквивалентами и они делают разметку более наглядной и простой в понимании. Также, по умолчанию, они являются инлайновыми, поэтому их надо cделать блочными с помощью display:block.
Данные теги важно применять правильно. Чтобы не запутаться когда и какой применять, в сети существует замечательный ресурс , а также можно воспользоваться следующим алгоритом:
Все современные браузеры (Опера, Сафари, Хром, Мозила, ИЕ9+) уже имеют поддержку HTML5
. Для браузеров IE8 и меньше следует подключать javascript , который "научит" их понимать новые теги. Код для его подключения ниже:
В верстке макетов при мы перешли на использование нового стандарта HTML5. Если вы хотите заказать сайт или отдельно
, можете оставить заявку, написав по любому из адресов, указанных на странице или через форму обратной связи. Будем рады сотрудничеству!
В 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 высадка человека на Луну.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам:
| 