Структурные теги HTML5. HTML5 элементы – новые теги
Здравствуйте гости данного блога и мои верные подписчики. С таким скоростным развитием технологий, науки и программирования, как это можно наблюдать сегодня, неудивительно, что запросы потребителей растут. А это значит, что рано или поздно появляются усовершенствованные версии программ, оборудования и главное языков.
Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.
Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!
Главнокомандующий разметкой сайтов, знаменитый htmlПосле прочтения , а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!
Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.
Итак, для начала стоит запомнить, что html – это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.
Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?
Тег – это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).
Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.
Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.
Атрибуты нужны для расширения спектра возможностей отдельного тега, а также для более гибкого управления внешним видом контейнеров. Безусловно, элементы языка разметки спокойно могут существовать и без определения атрибутов. Тогда будет задавать им форматирование по умолчанию.
Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.
| Одиночные теги | |
| В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени. | |
|
Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение. |
| Парные теги | |
| Как правильно приготовить запеканку? | Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор. |
Как уже рассказывалось в предыдущих моих статьях, не стоит путать 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 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Хотя кажется, что особой разницы между тегами и нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают , для них это типовой тег разметки - замени его на и смысл не поменяется. Другое дело , робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.
Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.
Давайте для начала сделаем шапку сайта с помощью тега (пример 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 во всех браузерах достаточно выполнить три условия:
Теперь рассмотрим некоторые теги 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 . Теперь у нас 4 новых тега со смыслом и каша в голове.
vs Если раньше все учебники по вёрстке пестрили фразами вроде «используйте вместо », и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе
The frobonitor and barbinator components are fried.
И лидов (первый абзац статьи в журналистике)
Kittens "adopted" by pet rabbit
Six abandoned kittens have found an unexpected new mother figure - a pet rabbit.
Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
В свою очередь , как и раньше, означает повышенную значимость своего содержимого.
vs Отныне содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».
же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)
Казнить нельзя, помиловать.
Внимательно читайте договор! «Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — .Холивар о Раньше был ни чем иным, как зачёркнутый текст. Теперь представляет информацию, которая утратила свою актуальность.У нас также есть элемент , результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.
На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом . Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не ? подразумевает изменения, внесённые в документ (важно то, что в некоторый момент времени документ был изменён ). В нашем же случае, в новом документе уже содержится неактуальная информация.Новая семантика и старый доктайп Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.
Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов , которым присваивали классы class или идентификаторы id для наглядности разметки (например, ). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было , стало ). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны .
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Категории контента:
потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов и они могут располагаться в любой части страницы.
Site description
- About
- Forum
- Download
Элемент нельзя помещать внутрь элементов , или другого элемента .
2. ЭлементКатегории контента:
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри . На странице может быть несколько элементов . Не заменяет теги
- или , он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты , этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
В качестве элементов панели навигации можно использовать не только элементы списков:
...
Также можно добавлять заголовки внутрь элемента:
...
3. ЭлементКатегории контента:
потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы , которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом . Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
... Опубликовано в категорииМузыка. 0 комментариев
4. ЭлементКатегории контента:
потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент . В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
... ... ...
внутриМожно создавать родительские элементы с вложенными элементами , в которых есть один или несколько элементов . Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента
Заметки о природе ... ... Исторические заметки ... ...
5. ЭлементКатегории контента:
потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого)
. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: , цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
... ...
.........
6. ЭлементКатегории контента:
потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов . Как каждая страница, так и каждая статья может иметь свой элемент , более того, можно поместить в элемент , чтобы указать источник цитирования.
... @2014...
7. ЭлементКатегории контента:
потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента , для отображения автора статьи — внутри тега . В браузере обычно отображается курсивом.
Категории контента:
потоковое содержимое.
Элемент представляет основное содержимое документа (содержимое элемента ). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент не может быть потомком таких элементов как , , , или .
Пудель
О породе Разновидности Внешний вид Характер Copyright © 2016 Моя собака.ру 9. ЭлементКатегории контента:
потоковое содержимое, корневое секционное содержимое.
Элемент представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
Осенний лес
Элемент является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
10. ЭлементЭлемент — потомок элемента , не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента , высота по умолчанию равна 18px .
11. ЭлементКатегории контента:
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
12. ЭлементКатегории контента:
потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
Категории контента:
потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
Категории контента:
потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
Категории контента:
потоковое содержимое, текстовое содержимое.
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов ;
— один и более элементов , , каждый из которых предшествует или следует непосредственно за элементом .
Элементы , , и не относятся ни к одной категории контента.
Элемент определяет вложенный в него текст как базовый компонент аннотации.
Элемент выводит аннотацию к тексту сверху или снизу над ним.
Элемент отмечает вложенный в него текст как дополнительную аннотацию.
Элемент выводит альтернативный текст в случае если браузер не поддерживает элемент .
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Загрузка...
