Справочник тегов HTML. Новые теги

09.07.2019

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

Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.

Список тегов HTML

Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.

Тег Краткое описание
Комментарий.
Определяет тип документа.
Ссылка, гиперссылка, якорь.
Определяет текст как аббревиатуру.
Контактная информация автора или владельца документа.
Определяет область на карте-изображении
Статья
Контент в стороне (содержимое не является основным на странице по смыслу)
Позволяет вставить воспроизводимый аудио файл.
Полужирный текст.
Задает базовый URL или аттрибут target для относительных ссылок в документе.
Область, где написание текста может имееть другое направления.
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
Цитата.
Указывает область body документа.

Перенос строки.
Кликабельная кнопка
Используется для рисовании графики с помощью скриптов
Подпись таблицы.
Сноска на название материала.
Используется для вставки компьютерного кода в текстовом виде.
Задает характеристики колонок в таблице.
Определяет группу из одной или более колонок таблицы для форматирования.
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
Определяет описание термина из тега в списке терминов
Текст, который удален в новой версии документа.
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
Указывает, что содержимое является термином.
Определяет диалоговое окно или интерактивный элемент
Блочный элемент - один из основных элементов верстки.
Определяет список определений
Название термина в списке определений
выделенный по смыслу текст (обычно, текст выделенный курсивом).
Контейнер для внешнего приложения
Группа связанных элементов в форме
Заголовок для элемента
Определяет автономную группу из нескольких элементов (например картинка с подписью)
Нижний колонтитул
Определяет форму пользовательского ввода
- Заголовки HTML разного уровня: , , , , , .
Указывает область head документа.
Блок заголовка
Горизонтальная линия - тематический разделитель.
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
Выделяет текст курсивом.
Определяет встроенный фрейм
Изображение, картинка.
Поле для ввода
Текст, который был добавлен в новой версии документа.
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
Заголовок элементов
  • Элемент списка
    Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
    Основной контент
    Контейнер для . Определяет пользовательскую карту на изображении
    Выделенный текст (обычно с помощью подсветки фона).
    Контейнер для списка пунктов меню
    Определяет элементы, которые пользователь может вызвать из контекстного меню
    Используется для определения мета-данных документа.
    Измеритель значений в заданном диапазоне
    Контейнер для навигационных элементов
    Альтернативный контент для пользователей, отключивших скрипты
    Определяет встроенный объект
    Определяет нумерованный список
    Определяет группу связанных вариантов в выпадающем списке. Дает название группу
    Параметр (вариант выбора) в выпадающем списке
    Результат вычислений

    Абзац.
    Задает параметры для встроенных объектов
    Контейнер для нескольких изображений
    Предварительно отформатированный текст.
    Индикатор выполнения (прогресса)
    Цитата в тексте.
    Альтернативный текст, если браузер не поддерживает тег .
    Аннотация к содержимому тега .
    Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
    Перечеркнутый текст.
    Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
    Определяет скрипт или подключение скрипта из внешнего ресурса.
    Раздел
    Определяет выпадающий список
    Текст шрифтом меньшего размера.
    Определяет ресурс для тегов , и .
    Строчный элемент.
    Текст, выделенный по значению. Обычно отображается полужирным.
    Определяет контейнер для определения стилей документа
    Отображает текст в виде нижнего индекса.
    Заголовок внутри тега
    Отображает текст в виде верхнего индекса.
    Определяет таблицу.
    Определяет область контента в таблице.
    Ячейка в таблице .
    Многострочное поле для ввода
    Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
    Место, где допускается перенос строки.
    Устаревшие теги HTML

    Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.

    Тег Краткое описание
    Акроним. Используйте тег вместо него
    Встроенный апплет. Используйте или вместо него.
    Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
    Текст большего размера. Используйте вместо него
    Отцентрованный текст. Используйте вместо него
    Список директорий. Используйте
      вместо него
    Определяет цвет, размер и семейство шрифта. Используйте вместо него
    Фрейм внутри . Используйте вместо него
    Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
    Альтернативный текст, если фреймы не поддерживаются
    Перечеркнутый текст. Используйте или вместо него
    Моноширный текст. Используйте вместо него
    Подчеркнутый текст. Используйте вместо него

    Все, кто связан с веб-разработкой в целом и с версткой в частности знают о спецификации HTML5, которая в данный момент все еще в разработке и не получила статус рекомендации. Но, тем не менее, все свежие версии браузеров поддерживают нововведения, в той или иной мере. Сегодня пробежимся по новым структурным тегам HTML5

    Рассмотрим типичную структуру современного сайта. Можно выделить несколько блоков, которые так или иначе присутствуют в коде — это “шапка” (header), панель навигации (navigation), боковая панель (sidebar), раздел основного контента (content), “подвал” сайта(footer) и некоторые другие. Если используется блочная верстка (а таблицы это прошлый век, я давно не видел табличной верстки в современных сайтах), то эти блоки выводятся с помощью тега div .

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

    section

    Предназначен для обозначения раздела документа, который может включать в себя заголовки, шапку, подвал и собственно, текст. На мой взгляд, ближайший аналог — блок с классом wrapper (некоторые присваивают ему id, но это не принципиально), который используется как контейнер документа, содержит в себе блоки, привязанные к нему. Своего рода “обертка” для последующих блоков. Также допускается вложенность тега.

    header

    Обозначает “шапку” сайта или раздела, обычно там расположен заголовок. Ничем особенным не примечателен

    nav

    Как видно из названия — задает блок, в котором содержится навигация. Обычно это список ссылок на разделы или страницы сайта, оформленный должным образом. Тег может содержаться в тегах section, header и footer , о котором ниже.

    footer

    “Подвал” сайта или раздела. Полный аналог тега header

    article

    Задает текст содержания статьи, записи блога и тому подобные вещи.

    aside

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

    Приведенный ниже код иллюстрирует применение структурных тегов HTML5 .

    Название блога

    • Главная
    • Разделы
    • Автор
    • Контакты
    Заголовок Lorem ipsum... Второй заголовок Lorem ipsum... Третий заголовок Lorem ipsum... Копирайты и все такое

    Обратите внимание, все структурные теги требуют наличия закрывающего тега. Кстати, закрывающий тег /article например, гораздо более информативен, чем /div . Сразу видно, что где находится. Читать такой код намного легче. Хотя бы ради этого стоит внедрить в существующие проекты или запланировать в будущие.

    Теперь о грустном — горячо любимый IE до 8 версии включительно не поддерживает данные теги, но отображает информацию между ними. Не применяются к ним стили CSS, если объекты не
    созданы с помощью скрипта. Заставить его показывать документ как нужно поможет следующий код:

    Document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article");

    Скрипт создает DOM элементы и IE корректно отрабатывает с ними.
    Небольшое дополнение — HTML5 по умолчанию интерпретирует любой скрипт как type=»text/javascript” , поэтому специально это указывать не нужно. Что опять же делает код проще и легче. Сплошные плюсы Остальные браузеры работают нормально, единственный Firefox полностью поддерживает теги с версии 4.0, но с версии 3 корректно с ними работает и отображает.
    На сегодня все. Если стало интересно — “ ” тут я писал о применении новой спецификации на практике. Оставайтесь на связи — будет интересно.

    Которые позволяют четко описывать блоки контента

    Что такое HTML5?

    HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.

    • Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
    • Тег Canvas для рисования контента непосредственно в браузере
    • «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
    Совершенствование квалификационных навыков по данной тематике

    Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. .

    Новый набор структурных элементов (тегов) в HTML5 видоизменяет способы структурирования HTML-документов. Новые структурные теги ориентированы на разделение HTML-документа на логические части. Название каждого структурного тега описывает тип контента, для хранения которого предназначен этот тег. Данная статья посвящена подробному описанию этих новых тегов.

    История вопроса

    В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).

    HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.

    HTML — это язык сценариев, который говорит Web-браузеру, каким образом следует представлять контент. Внутри контента могут присутствовать ссылки на другие документы, что обеспечивает удобный для пользователя метод навигации между документами в Интернете.

    Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.

    Первоначально назначение Интернета состояло в обслуживании простых текстовых документов. Первые браузеры были ориентированы исключительно на текст (другими словами, они не имели никаких затейливых окон — на экране присутствовал только текст). Даже добавление изображений стало весьма значительным достижением — в момент их первого появления. Сегодня люди выполняют в Интернете множество дел — от отправки посланий по электронной почте до просмотра телевизионных программ. Интернет уже превратился в нечто гораздо большее, чем механизм для транспортировки простых текстовых документов. Новые функции и новые способы использования породили новые трудности и новые задачи, для решения которых язык HTML никогда не предназначался.

    Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.

    Поддерживаемые браузеры

    На момент написания данной статьи стандарт HTML5 еще не был выпущен официально. Большая часть контента в Web по-прежнему создается в соответствии со спецификацией HTML 4. Тем не менее, некоторые браузеры поддерживают спецификацию HTML5. Ситуация может оказаться непростой, поскольку каждый из этих браузеров способен поддерживать лишь некоторое подмножество функций HTML5. Перед созданием Web-сайта на базе HTML5 проверьте каждый из целевых браузеров на предмет поддержки функций, которые вы собираетесь использовать на своем сайте.

    Обновленная декларация doctype

    Вне зависимости от возможностей ваших целевых браузеров вы должны сообщать каждому браузеру, что хотите отображать своей контент с использованием спецификации HTML5. Это можно сделать с помощью декларации doctype .

    Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

    Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.

    Таблица 1. Doctype-декларации и их возможностиDoctype-декларация Возможности Пример
    HTML 4.01 strict Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.
    HTML 4.01 transitional Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.
    HTML 4.01 frameset Аналогична декларации HTML transitional, но разрешает использование элементов frameset.
    XHTML 1.0 strict Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.
    XHTML 1.0 transitional Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.
    XHTML 1.0 frameset Аналогична декларации XHTML transitional, однако разрешает элементы frameset.
    XHTML 1.1 Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.

    К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в .

    Листинг 1. HTML5-декларация doctype

    Декларация должна находиться в самом начале HTML-документа, перед тегом .

    Новые структурные теги

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

    В данном разделе на примере рассматриваются нынешние методы разделения HTML-документа. В последующих разделах статьи мы будем модифицировать первоначальный код с помощью структурных тегов HTML5 и в пошаговом режиме рассмотрим создание логической структуры документа.

    Подход HTML 4

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

    Листинг 2. Простая HTML-страница, использующая теги div A Simple HTML Page Using Divs Header Content Footer

    Этот подход работает прекрасно; тег div — это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div . Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id , которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.

    Подход HTML5

    HTML5 решает эту проблему посредством предоставления набора теглв, которые точнее определяют основные блоки контента, образующего HTML-документ. Вне зависимости от итогового контента, отображаемого Web-страницей, большинство Web-страниц состоит из различных сочетаний типовых разделов и элементов страниц.

    Листинг 4. Добавление тега section A Simple HTML Page Header

    This is an important section of the page.

    Footer Тег article

    Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в .

    Листинг 5. Добавление тегов article A Simple HTML Page Header

    This is an important section of content on the page. Perhaps a blog post.

    Footer Тег aside

    Тег aside указывает, что контент, который содержится внутри этого элемента, связан с основным контентом данной страницы, но не является его частью. В определенном смысле его применение аналогично внедрению комментария в тело текста (подобно данному комментарию). Контент в круглых скобках предоставляет дополнительную информацию об элементе, содержащем этот контент. После добавления тега aside к примеру кода мы получаем код, показанный в.

    Листинг 6. Добавление тега aside A Simple HTML Page Header

    This is an important section of content on the page. Perhaps a blog post.

    This is an important section of content on the page. Perhaps a blog post.

    Footer Тег footer

    Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в .

    Листинг 7. Добавление тега footer A Simple HTML Page Header

    This is an important section of content on the page. Perhaps a blog post.

    This is an aside for the first blog post.

    This is an important section of content on the page. Perhaps a blog post.

    Footer

    К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.

    Тег navЛистинг 8. Добавление тега nav A Simple HTML Page Header Some Nav Link Some Other Nav Link A Third Nav Link

    This is an important section of content on the page. Perhaps a blog post.

    This is an aside for the first blog post.

    This is an important section of content on the page. Perhaps a blog post.

    Footer Итоговый вариант примера

    В показан результат замены исходных тегов div новыми структурными тегами HTML5.

    Листинг 9. Итоговый вариант примера A Simple HTML Page Header Some Nav Link Some Other Nav Link A Third Nav Link

    This is an important section of content on the page. Perhaps a blog post.

    This is an aside for the first blog post.

    This is an important section of content on the page. Perhaps a blog post.

    Footer

    Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов div () с результирующим вариантом () наглядно демонстрирует назначение новых структурных тегов.

    Заключение

    Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами div .

    В 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 высадка человека на Луну.

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

    Прочтение статьи даст вам четкое понимание границ между 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. Они улучшают взаимодействие браузера с

    Похожие статьи