Справочник тегов HTML
HTML — язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги — это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
| Тег | Краткое описание |
|---|---|
| <!—. —> | Комментарий. Подробнее |
| <!DOCTYPE> | Определяет тип документа. Подробнее |
| <a> | Ссылка, гиперссылка, якорь. Подробнее |
| <abbr> | Определяет текст как аббревиатуру. Подробнее |
| <address> | Контактная информация автора или владельца документа. Подробнее |
| <area> | Определяет область на карте-изображении |
| <article> | Статья |
| <aside> | Контент в стороне (содержимое не является основным на странице по смыслу) |
| <audio> | Позволяет вставить воспроизводимый аудио файл. Подробнее |
| <b> | Полужирный текст. Подробнее |
| <base> | Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее |
| <bdi> | Область, где написание текста может имееть другое направления. Подробнее |
| <bdo> | Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее |
| <blockquote> | Цитата. Подробнее |
| <body> | Указывает область body документа. Подробнее |
| <br> | Перенос строки. Подробнее |
| <button> | Кликабельная кнопка. Подробнее |
| <canvas> | Используется для рисовании графики с помощью скриптов |
| <caption> | Подпись таблицы. Подробнее |
| <cite> | Сноска на название материала. Подробнее |
| <code> | Используется для вставки компьютерного кода в текстовом виде. Подробнее |
| <col> | Задает характеристики колонок в таблице. Подробнее |
| <colgroup> | Определяет группу из одной или более колонок таблицы для форматирования. Подробнее |
| <datalist> | Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее |
| <dd> | Определяет описание термина из тега <dt> в списке терминов <dl>. Подробнее |
| <del> | Текст, который удален в новой версии документа. Подробнее |
| <details> | Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее |
| <dfn> | Указывает, что содержимое является термином. Подробнее |
| <dialog> | Определяет диалоговое окно или интерактивный элемент |
| <div> | Блочный элемент — один из основных элементов верстки. Подробнее |
| <dl> | Определяет список определений. Подробнее |
| <dt> | Название термина в списке определений <dl>. Подробнее |
| <em> | выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее |
| <embed> | Контейнер для внешнего приложения |
| <fieldset> | Группа связанных элементов в форме. Подробнее |
| <figcaption> | Заголовок для <figure> элемента |
| <figure> | Определяет автономную группу из нескольких элементов (например картинка с подписью) |
| <footer> | Нижний колонтитул |
| <form> | Определяет форму пользовательского ввода. Подробнее |
| <h1> — <h6> | Заголовки HTML разного уровня: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Подробнее |
| <head> | Указывает область head документа. Подробнее |
| <header> | Блок заголовка |
| <hr> | Горизонтальная линия — тематический разделитель. Подробнее |
| <html> | Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее |
| <i> | Выделяет текст курсивом. Подробнее |
| <iframe> | Определяет встроенный фрейм |
| <img> | Изображение, картинка. Подробнее |
| <input> | Поле для ввода, элемент формы. Подробнее |
| <ins> | Текст, который был добавлен в новой версии документа. Подробнее |
| <kbd> | Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее |
| <label> | Метка для поля ввода. Обычно содержит подпись поля. Подробнее |
| <legend> | Заголовок элементов <fieldset>. Подробнее |
| <li> | Элемент списка. Подробнее |
| <link> | Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее |
| <main> | Основной контент |
| <map> | Контейнер для <area>. Определяет пользовательскую карту на изображении |
| <mark> | Выделенный текст (обычно с помощью подсветки фона). Подробнее |
| <menu> | Контейнер для списка пунктов меню |
| <menuitem> | Определяет элементы, которые пользователь может вызвать из контекстного меню |
| <meta> | Используется для определения мета-данных документа. Подробнее |
| <meter> | Измеритель значений в заданном диапазоне |
| <nav> | Контейнер для навигационных элементов |
| <noscript> | Альтернативный контент для пользователей, отключивших скрипты |
| <object> | Определяет встроенный объект |
| <ol> | Определяет нумерованный список. Подробнее |
| <optgroup> | Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее |
| <option> | Параметр (вариант выбора) в выпадающем списке. Подробнее |
| <output> | Результат вычислений. Подробнее |
| <p> | Абзац. Подробнее |
| <param> | Задает параметры для встроенных объектов |
| <picture> | Контейнер для нескольких изображений |
| <pre> | Предварительно отформатированный текст. Подробнее |
| <progress> | Индикатор выполнения (прогресса) |
| <q> | Цитата в тексте. Подробнее |
| <rp> | Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее |
| <rt> | Аннотация к содержимому тега <ruby>. Подробнее |
| <ruby> | Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее |
| <s> | Перечеркнутый текст. Подробнее |
| <samp> | Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее |
| <script> | Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее |
| <section> | Раздел |
| <select> | Определяет выпадающий список или список с множественным выбором. Подробнее |
| <small> | Текст шрифтом меньшего размера. Подробнее |
| <source> | Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее |
| <span> | Строчный элемент. Подробнее |
| <strong> | Текст, выделенный по значению. Обычно отображается полужирным. Подробнее |
| <style> | Определяет контейнер для определения CSS стилей документа. Подробнее |
| <sub> | Отображает текст в виде нижнего индекса. Подробнее |
| <summary> | Заголовок внутри тега <details>. Подробнее |
| <sup> | Отображает текст в виде верхнего индекса. Подробнее |
| <table> | Определяет таблицу. Подробнее |
| <tbody> | Определяет область контента в таблице. Подробнее |
| <td> | Ячейка в таблице <table>. Подробнее |
| <textarea> | Многострочное поле для ввода. Подробнее |
| <tfoot> | Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее |
| <th> | Ячейка — заголовок в таблице <table>. Подробнее |
| <thead> | Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее |
| <time> | Дата и/или время. Подробнее |
| <title> | Заголовок HTML документа. Подробнее |
| <tr> | Определяет строку в таблице. Подробнее |
| <track> | Определяет текстовую дорожку для тегов <video> и <audio> Подробнее |
| <ul> | Определяет маркированный список. Подробнее |
| <var> | Используется для обозначения содержимого тега как переменной. Подробнее |
| <video> | Позволяет вставить воспроизводимое видео. Подробнее |
| <wbr> | Место, где допускается перенос строки. Подробнее |
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Name already in use
Тег, тэг (tag) — именованная метка, дескриптор.
HTML-страница состоит из элементов. Теги используются для указания типа этих элементов.
Большинство тегов — парные. Один — открывающий <tagName> , другой — закрывающий </tagName> . Между тегами распологается контент, который необходимо отобразить.
Некоторые элементы не могут содержать контент, поэтому их теги являются самозакрывающимися. <tagName />
Элементы могут содержать характерные им атрибуты в теге <tagName attribute=»value»> .
Одни элементы могут являться частью других элементов, поэтому определённые тэги могут быть вложенными.
Комментарий имеет следующую структуру.
Парные и одиночные теги
Парные теги имеют открывающий и закрывающий тег, перед именем закрывающиего ставится слэш / :
Одиночные теги не имеют закрывающего тега:
Блочные и строчные теги
Соотвуствуют блочным и строчным элементами.
Блочные элементы могут хранить другие блочные элементы ( <p> не может хранить блочные), строчные элементы и текст. ( <div> , <p> )
Строчные элементы обычно хранят только текст (текст, изображение), не могут содержать строчные и блочные элементы. ( <span> , <img> )
Блочные теги создают разрыв строки, строчные — не создают.
Теги верхнего уровня
Теги верхнего уровня отвечают за создание HTML-документа.
Теги заголовка документа отвечают за настройки страницы (описание, подключение скриптов и стилей) и не видны пользователю (кроме title ).
Тело документа отвечает за содержательную часть документа, отображаемую в браузере.
Теги <html> и <body> считаются необязательными в коде, но их желательно писать всегда.
Пользователь видит глазами блоки страницы, но браузеры слепы.
Семантические теги добавляют семантику (смысловое значение) содержимому страницы.
С помощью этих тегов барузерам проще индексировать страницу, отделить важный контент от дополнительной информации.
Все семантические теги можно использовать неоднократно.
Устаревшие тэги (obsolete) были ранее запрещены и удалены или могут быть удалены из браузеров в любой моменты (хотя некоторые браузеры до сих пор могут их поддерживать).
Фреймы и встроенные фреймы
Фреймы разделяли окно браузера на отдельные, расположенные рядом области, в каждую из которых загружалась самостоятельная веб-страница. Они устарели и не поддерживаются в HTML5.
Встроенные (плавающие) фреймы встраивают новый независимый HTML-документ в текущий.
Широко используются для вставок медиа (google-карты, аудио и видеоплееры, примеры кода), для аутентификации и платёжных транзакций, в большинстве остальных случаев лучше их не использовать.
Основным отличием фреймов и встроенных фреймов является то, что встроенные фреймы вставляются в страницу как есть, а в случае фреймов документ разбивает окно браузера на несколько маленьких панелей, в каждой из которых хранится отдельный документ.
Синтаксис фреймов (уже не поддерживается)
Устаревший синтаксис фреймов:
Синтаксис встроенных фреймов
Вставки видео из Youtube:
Встроенный фрейм можно использовать как место, где должна открыться гиперссылка, по которой переходит пользователь:
Преимущества и недостатки фреймов
- Встраиваемая веб-страница не зависит от родительсокго веб-документа, что наделяет <iframe> некоторой безопастностью.
- Быстро и просто изменяются размеры размещённых веб-страниц (как размеры обычного блока).
- Удобно встраивать контент с других сайтов.
- Фреймы скрывают адрес страницы и показывать только адрес сайта (пользователю не понятно, где он находится; нельзя добавить страницу в закладки или поделиться ссылкой).
Элемент <!DOCTYPE> предназначен для указания типа документа, он не является HTML-тегом и должен находиться в начале файла.
Существует несколько версий HTML и XHTML. Чтобы браузер понимал, как правильно интерпретировать документ, необходимо указать его тип.
Document Type Definition (DTD, определение типа документа) — язык, использующийся для записи синтаксических правил SGML-подобных языков разметки (HTML, XML, SGML, GML).
DTD определяет структуру документа, список валидных элементов и их атрибутов.
Отрывок из DTD-файла для HTML 4.01
HTML 4.01 базировался на SGML, поэтому его Doctype ссылался на DTD.
Разработчики HTML5 отказались от использования DTD, поскольку посчитали его слишком ограниченным инструментом как для валидации, так и для описания всех возможностей HTML5. Например, в DTD невозможно правильно описать пользовательские атрибуты ( data-* ), поскольку в DTD каждый атрибут должен быть описан отдельно. Бесконечное количество вариантов — бесконечное описание. В итоге разработчики решили использовать свои валидаторы.
- Элемент верхнего уровня: в HTML — <html> , в SVG — <svg> .
- Публичность: публичный ресурс — PUBLIC , системный локальный — SYSTEM . HTML , XHTML — всегда PUBLIC .
- Регистрация: зарегистрирован ли разработчик текущего DTD в международной организации по стандартизации (ISO). + — да, — — нет. W3C не зарегистрирован.
- Уникальное название организации, разработавшей используемый DTD.
- Тип описываемого документа. DTD .
- Уникальное имя описания документа в DTD.
- Язык описания.
- URL документа формата DTD.
- HTML 5. Воспринимает все типы документов, DTD не требуется. Рекомендуемый вариант.
- HTML 4.01
- XHTML 1.1
- MathML
На данный момент существует три режима браузеров
- Режим совместимости (Quirks mode).
- Режим стандартов (Standards mode).
- Режим почти стандартов (Almost standards mode).
Режим может оказывать влияние на разметку (layout), парсинг и валидацию HTML и CSS, DOM API.
Введение режимов позволило решить следующие проблемы:
- устаревшие сайты могут ещё достаточно долго поддерживаться, не переписывая кодовую базу под новые стандарты
- разработчики, знающие свои целевые стандарты, могут сами выбрать режим, изменяя Doctype.
Для проверки текущего режима в браузерах имеется свойство document.compatMode , которое выдаёт CSS1Compat , если установлен режим стандартов или режим почти стандартов, и BackCompat , если установлен режим совместимости.
В случае отсутствия Doctype или невалидного Docktype все браузеры переходят в режим совместимости, режим «причуд» (Quirks Mode). Режим совместимости предназначен для отображения веб-страницы подобно старым браузерам (для которых html-страницы до введения Doctype). В этом случае каждый браузер заменяет современную функциональность своими заглушками и происходят различные причуды (quirks), варьирующиеся от «ничего не происходит» до «всё падает с ошибками».
Пример невалидного Doctype, переводящего браузер в режим совместимости.
Пример валидного Doctype, переводящего браузер в режим совместимости (слишком старая версия HTML).
Наличие валидного Doctype последних версий выступает гарантией того, что современные браузеры обработают документ одинаково: в режиме стандартов (Standards mode).
Использование режима стандартов важно для поддержки современных возможностей браузеров по типу <video> и <canvas> .
Пример Doctype, переводящего браузер в режим стандартов с использованием нового браузерного валидатора.
Пример Doctype, переводящего браузер в режим стандартов с использованием старого валидатора, опирающегося на DTD-файл.
Режим почти стандартов
Режим почти стандартов (Almost standards mode) очень похож на режим стандартов, но имеет один quirk, касающийся случаев, когда картинка является единственным контентом какого-то блока (например, клетки таблицы (table cells)). Такие картинки в режиме стандартов являются встроенными элементами (inline), что создаёт дополнительный странный отступ снизу, зарезервированный для специальных символов, которых нет у картинок. Этот отстут можно было убрать только сделав картинку блочным элементов. Это не понравилось некоторым создателям браузеров и они решили ввести режим почти стандартов, исправляющий этот баг.
Пример Doctype, переводящего браузер в режим почти стандартов
HTML сам по себе не является полноценным языком программирования, поскольку в нём нет условных операторов, переменных циклов и других возможностей, характерных другим языкам. HTML-разметка является не более, чем простым текстом (строкой).
В наши дни веб-страницы являются достаточно динамичными, что достигается посредством изменения HTML на клиенте. Этой задачей занимается JavaScript, который работает с DOM (древовидным представлением HTML). Каждому HTML-элементу ставится в соответствие DOM-элемент. В DOM имеется множество методов, позволяющих искать, добавлять и удалять DOM-элементы, получать и изменять их атрибуты, стили, подписываться на события и делать многие другие вещи.
Если на сервере появляется необходимость работать с HTML, то чаще всего подразумевается генерация HTML (строки) для передачи на клиент, который в дальнейшем будет манипулировать ей при помощи JavaScript. В таком случае нет необходимости в методах, которые предлагает DOM API.
Генерируемый на сервере HTML обычно зависит от некоторых переменным.
В простейшем случае можно воспользоваться шаблонными строками, которые позволяют использовать переменные.
Тем не менее, такие «строки» могут сильно разрастаться: много переменных, условных операторов и строк кода в целом. Работать с ними становится затруднительно.
На помощь приходят шаблонизаторы (Template Engines). Они позволяют эффективно работать с HTML как со строкой, предоставляя возможности использования переменных, условий, циклов и многого другого. Достигается это посредством использования специального синтаксиса внутри строки, который распознаётся шаблонизатором и заменяется на обычные символы.
Самыми популярными на данный момент шаблонизаторами являются Handlebars и Mystache
Сколько всего тегов в HTML (HTML5)?
Задался тут вопросом сколько всего тегов в действующем HTML (так как на данный момент это HTML5, соответственно сколько всего тегов в нем).
Просто в том же Dash’e (который берет данные с мозилы) их 135, но как выяснилось некоторые уже не поддерживаются в HTML5. Большинство статей и книг по HTML5 которые я видел, рассказывали лишь о новых тегах пятой версии, что как бы не очень информативно для человека который только начал изучать html. И вот наткнулся на сайт https://webref.ru/html (ссылка вела с htmlbook.ru), который говорит нам (если снять галочки с пунктов «Нестандартные» и «Осуждаемые»), что всего тегов в HTML5 ровно 111 🙂 То есть это те теги, которыми в данный момент времени можно оперировать. Их поддерживают все (или почти все) браузеры и все они описаны в стандарте HTML5.
Это правильная информация? Или нужно смотреть куда то еще? С английским у меня плохо к сожалению 🙁
Урок 2. HTML: Понятие, стандарты, тэги и атрибуты
HTML (HyperText Markup Language) – это не язык программирования (как, например, Python), а так называемый язык разметки. Он необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, HTML позволяет обернуть его в специальные элементы (теги). Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных.
Теги способны нести как структурный смысл (например, показать, что перед нами таблица некоторой размерности с заголовком), так и семантический (выделить информацию определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или браузеров).
Полезно знать
HTML разработал британец Тим Бернес-Ли в конце 1980-х годов, а как официальный стандарт HTML функционирует с 1993 года. Им же опубликован первый в мире сайт – http://info.cern.ch/hypertext/WWW/TheProject.html — работающий по сей день. На нем содержится информация о технологии World Wide Web , базирующейся на протоколе HTTP , адресации URI , разметке HTML .
Сегодня Тим Бернес-Ли возглавляет W3-Консорциум (World Wide Web Consortium) , основная задача которого: разработка и внедрение стандартов Интернета с учетом современных потребностей.
Изначально HTML был кроссплатформенным, что создавало определенные трудности. Разные браузеры отображали теги по-своему, некоторые элементы могли восприниматься не всеми программами. Причина: отсутствие единого стандарта, поддерживаемого разработчиками. Особую проблему доставлял Internet Explorer (Microsoft долгое время следовала своим наработкам в понимании HTML ), что требовало от сайтостроителей учета разных видов браузеров, чтобы содержимое страниц выглядело более-менее одинаковым у пользователей.
В последние годы данная проблема фактически решена, так как крупные игроки на рынке браузеров пришли к соглашению. На просторах Интернета еще можно встретить сайты, учитывающие старые браузеры, но это уже не обязательное требование к верстальщикам. Чаще всего вас просто попросят обновить свой браузер, чтобы вы смогли увидеть сайт в задуманном виде (для эксперимента попробуйте зайти в любую социальную сеть с очень старого браузера).
На протяжении курса мы будем придерживаться актуального стандарта HTML5 . Он завершен в 2014 году и рекомендован для использования в современной веб-разработке. В него добавлены новые элементы, учитывающие специфику нынешнего сайтостроения и потребность в мультимедийных компонентах (аудио, видео, интерактивность).
До этого 17 лет главенствующим стандартом являлся HTML 4 (с 1997 года). Он встречается и сегодня на ряде сайтов. Определить его можно на основании так называемого доктайпа.
Это первая строка любого HTML-документа , позволяющего браузерам понять способ работы с содержимым страницы. Хоть стандарт и является устаревшим, в нем содержится основной набор тегов, которыми пользуются при создании сайтов. Важно учесть, что часть элементов уже не рекомендована к применению и со временем будет убрана.
Несмотря на строгую типизацию в языке HTML , ряд браузеров достаточно лояльно относится к документам. Так, тег абзаца (обозначается <p><\p> ) разработчик вполне может написать по своему усмотрению:
- <p>Абзац<\p> (написание в соответствии со стандартом);
- <P>Абзац<\P> (браузеры редко учитывают регистр тегов);
- <p>Абзац (некоторые верстальщики могут забыть поставить закрывающий тег, что никак не смутит новую версию практически любого браузера).
Ключевые особенности стандарта XHTML :
– все элементы пишутся строго в нижнем регистре;
– закрываются даже одиночные теги (например, <img /> );
– основная кодировка – UTF-8 ;
– все атрибуты записываются только в развернутом виде (например, если в HTML5 отключить возможность выбора элемента из выпадающего списка можно указанием простого атрибута disabled , то в XHTML обязательно писать disabled=»disabled» ).
Верстать код сайта на основании стандарта XHTML не обязательно, так как HTML5 и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться).
Охарактеризуем специфику HTML5 :
– добавлены семантические элементы ( <nav> , <section> , <article> и др.), которые облегчают чтение структуры страницы как разработчикам, так и поисковым машинам;
– внедрена поддержка векторной графики и специальных форматов ( svg , canvas , MathML );
– представлены новые элементы управления ( dates , email , tel );
– удалены устаревшие теги ( big , center , isindex ).
Количество сайтов в сети настолько велико, что уже не хватает заложенного объема IPv4-адресов для их идентификации. С каждым годом число растет, что логично приводит к необходимости стандартизации их написания и отображения конечным пользователям.
Некоммерческая организация W3-Консорциум ( www.w3.org ) разрабатывает единые принципы и рекомендации для производителей Интернет-контента, чтобы обеспечить максимальную совместимость между продуктами, платформами, программами. Это позволяет делать Всемирную сеть максимально удобной и универсальной.
- CSS (каскадные таблицы стилей),
- DOM(объектная модель документа),
- PNG (формат хранения растровых изображений),
- HTTP(протокол передачи данных),
- RDF(модель представления метаданных),
- XPath (язык для доступа к частям XML-документов ) и др
Говоря проще, при помощи тегов вы можете выделять текст, вставлять рисунки и видео, передавать служебную информацию, обозначать ссылки.
Теги могут дополняться атрибутами, свойствами. С их помощью можно модифицировать содержимое элемента, уникализировать его.
На текущий момент насчитывается около 120 тегов, а если убрать устаревшие, то и того меньше. Их не так сложно запомнить, да и наиболее часто используемых несколько десятков.
Рассмотрим типичную структуру web-элемента :
- Открывающий тег (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты);
- Закрывающий тег (присутствует не во всех тегах, идентифицируется косой чертой);
- Атрибут, свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные);
- Содержимое (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов).
Подобным образом выглядит любой элемент web-страницы. При наличии нескольких атрибутов они разделяются пробелом. Теги не всегда могут иметь свойства или содержимое.
Первичное знакомство с разнообразием html-элементов можно осуществить на любом сайте. Если вы находитесь в браузере Chrome, то прямо сейчас можно нажать сочетание клавиш CTRL + U (откроются Инструменты разработчика ) и просмотреть код данной страницы . Фактически, весь этот набор тегов и свойств в сочетании с JavaScript обрабатывается браузером, чтобы вы смогли удобно пользоваться текущим сайтом.
Сайт представляет собой совокупность таких страниц, связанных между собой внутренними и внешними гиперссылками.
Далее поговорим о классификации тегов и атрибутов. Более детальное их описание и примеры будут представлены в следующем уроке.
1. Одиночные тэги
Одиночных элементов насчитывается 16 штук. Наиболее часто используемые:
- <!doctype> Некая инструкция браузерам для определения того, к какому типу относится документ, какую версию HTML использовать.
- <meta> Необходим для задания дополнительной информации о странице, указывается в заголовке HTML-документа . Как и вышеупомянутый тег, не влияет на внешний вид страницы, так как носит служебный характер.
- <hr> Задает горизонтальную линию для визуального отделения элементов страницы, применяется для отделения заголовка от основного текста, выделения логических блоков. По умолчанию представляет собой серую линию толщиной в 1 пиксель.
- <br> Перенос нижеидущего содержимого на новую строку. Может потребоваться для избегания длинных полотен текста. Небольшие куски информации воспринимаются лучше, чем огромный абзац.
- <img> Чтобы вставить на страницу графический элемент. Рисунки можно демонстрировать в одном из следующих форматов: jpg , png , gif . Само изображение в документ не вставляется непосредственно, указывается ссылка на него (локальная или из другого источника), а уже браузер загружает картинку и демонстрирует пользователю.
- <input> Применяется в формах и задает тип полей (могут быть текстовыми, числовыми, позволяют выбирать дату, файл, отмечать те или иные элементы списка и т.п.).
2. Парные тэги
Парные теги обязательно имеют закрывающий тег и содержимое (пусть даже и пустое). В HTML их больше всего (около 100). В качестве примера приведем некоторые:
- <p>Текст</p> Представляет заключенный внутри текст в виде отдельного абзаца. По умолчанию он имеет отступ и отделяется от предыдущего и последующего элементов дополнительным разрывом (это поведение можно поменять).
- <a href=»#»>Текст ссылки</a> Используется для задания и представления в документе ссылки (она может вести на другую страницу сайта, определенный участок на самой странице или любой адрес в Интернете).
- <small>Текст</small> Делает текст меньшего масштаба по сравнению с основным.
- <mark>Текст</mark> Выделяет текст по подобию маркера (аналог того, как на листах бумаги подчеркивают самое важное фломастером) желтым цветом.
Поведение любого тега сегодня (в стандарте HTML5 ) легко изменить по своему усмотрению. Деление элементов на блочные и строчные сложилось исторически (именно поэтому они изначально относятся к одному из этих типов). Сейчас таких типов больше, но их определение связано с каскадными таблицами стилей, о которых пойдет детальная речь в одном из последующих уроков.
Блочные теги занимают всю ширину страницы или родительского элемента. Если вы зададите два таких тега подряд, то каждый из них будет начинаться как бы с новой строки, абзаца.
Строчные теги не имеют строго размера. Он зависит от того, сколько символов в них содержится. Несколько подряд идущих строчных элементов не будут разделяться новыми строками, а будут выстраиваться друг за другом.
Полезно знать
В CSS-свойствах отображение тегов можно менять по следующим типам:
- Блочные ( display: block ) – получает свойство блочности, занимает всю ширину страницы;
- Строчные ( display: inline ) – тег становится строчным;
- Флекс ( display: flex ) – элемент приобретает свойство особого типа блоков – флекс (ведет себя как блок, но внутреннее содержимое гибко настраивается);
- Грид ( display: grid ) – еще один блочный тип с особенностями внутреннего поведения элементов (строятся на основании «сетки», состоящей из строк и колонок);
- Таблица ( display: table ) – тег и его содержимое будут наследовать свойства таблиц;
- Строчный блок ( display: inline-block ) – блочный элемент ведет себя как строка, но сохраняет часть свойств (можно задать размер, границы).
- Спрятанный ( display: none ) – делает элемент невидимым и полностью удаляет его отображение со страницы.
1. Блочный тэг <div>
Если сохранить приведенный код в виде html-файла и открыть в браузере, то увидим, что куски текста начинаются с разных строк. Причина – в сути блочных элементов (они стремятся занять всю доступную ширину, которая им предоставлена).
Другие блочные теги:
- <table></table> Позволяет рисовать таблицы
- <p>Параграф</p> Обозначает параграф текста
- <h1>Большой заголовок</h1> Для оформления заголовка самого верхнего уровня (в роли такового обычно выбирается основная статья страницы).
- <form></form> Отражает на сайте форму (авторизации, регистрации, опроса и др.)
2. Строчный тэг <span>
Вторая часть текста идет вслед за первой без каких-либо разрывов. Строчные элементы занимают столько места, сколько необходимо для их отображения.
На практике нередко используются следующие строчные теги:
- <b>Выделение жирным шрифтом</b> Выделяет участок содержимого жирным шрифтом без придания особой важности. Тег применяют в целях визуализации, чтобы информация воспринималась лучше
- <strong>Важный текст</strong> Обозначение значимого участка текста. Чаще всего выглядит как выделенный жирным шрифтом, но воспринимается поисковыми системами как имеющий особую важность в приведенном контексте
- <a href=»#»>Ссылка в никуда</a> Ссылка занимает тот объем на странице, который требуется для демонстрации ее текста
- <sub>, <sup> Необходимы для представления степеней и индексов. Рассмотрим пример:
Полезно знать
Контентная модель HTML5 позволяет более точно описать типы содержимого, с которым сталкиваются авторы при разработке сайтов. Она включает такие типы:
- Поток ( flow ) – отображает основное содержимое страницы (большая часть тегов включается именно сюда. Например: a , button,header , nav , ol , section );
- Метаданные ( metadata ) – применяются в заголовке документа и определяют поведение остального содержимого и связь с иными данными (Пример тегов: title , meta , script , style );
- Текст ( phrasing ) – включает непосредственно текст страницы и используемые для его форматирования теги. Фактически, это строчные элементы: a , button , i , img , span , textarea ;
- Встроенный контент ( embedded ) – часть текстового, строчного содержимого, включающая импортированный контент (Пример тегов: audio , video , img , svg , canvas );
- Интерактивные элементы ( interactive ) – позволяют посетителю сайта взаимодействовать с ресурсом (Включает теги: button , select , video , a , input , textarea );
- Заголовки ( heading ) – для определения заголовков сайта, статей, подразделов (теги от h1 до h6 );
- Секции ( sectioning ) – выделение изолированного контента в блоки. Включает теги: article , aside , nav , section .
Появление HTML5 позволило подойти к вопросу размещения контента на сайтах по-новому. До этого решался лишь технический вопрос: как сделать сайт, который будет нормально отображаться у разных пользователей с разными устройствами и системами. Так как данная проблема сегодня не столь актуальна (разработчики браузеров более-менее договорились и пришли к единому стандарту), возникла другая: огромное количество сайтов затрудняет демонстрацию пользователям максимально релевантных. Немаловажной стала задача обеспечения доступности ресурсов посетителям с ограниченными возможностями (например, слепым).
Обычного набора тегов стало не хватать. Потребовался семантический набор. Обычный пользователь особой разницы не увидит: страницы выглядят так же, имеют ту же скорость загрузки. Однако решена важная проблема: поисковые системы стали лучше понимать интернет-ресурсы, а люди с ограниченными возможностями теперь могут удобнее пользоваться сайтами (так, специализированный софт для таких граждан понимает семантику тегов: заголовки будут озвучены как заголовки, побочную информацию из того же тега <aside> можно будет пропустить и т.п.).
Семантические теги помогают браузерам, поисковикам, разработчикам. Теперь с проблемой однозначности трактования практически покончено. Рассмотрим простой пример.
Анализ содержимого такой страницы не сложен. Многие, скорее всего, поймут, что первый блок текста затрагивает основное содержимое раздела, тогда как второй – дополнение, интересный факт, побочная, но не обязательная информация. А если речь идет о более комплексной ситуации? Как выяснить, какую смысловую нагрузку имеет тот или иной <div> ? Фактически, никак.
Если человек еще хоть как-то способен логически сопоставить данные, то машине это не под силу. Да и вместо того, чтобы оценивать код, его качество и эффективность, программисту потребуется тратить время на понимание смысловой нагрузки используемых элементов. Это очень неудобно.
Семантические элементы позволяют упростить такую ситуацию. Разработчик помогает не только своим коллегам, но и браузерам и поисковикам. Да и сам сайт существенно быстрее попадет к целевой аудитории (ведь какой-нибудь Яндекс будет показывать вашу страничку не тем, кому интересна биография основателя W3-Консорциума , а тем, кому хочется научиться создавать сайты. Именно в этом заключается суть обозначенного выше HTML-кода ).
К основным тегам такого типа относят:
1. <article>Будущая статья</article>
Для выделения независимого, самоопределяемого контента. Тег подразумевает содержимое, которое несет ценность само по себе, обосабливается в общем контексте сайта. Хорошим примером такого вида служит пост на форуме или в блоге, отдельная статья сайта, новость;
2. <aside>Побочная информация</aside>
Некие дополнительные данные, косвенно связанные с основным содержанием страницы. Например, вы пишете про списки в Python. В блоке aside можно рассказать про списки и их свойства в других языках программирования;
3. <details>Дополнительные сведения</details>
Справочная, дополняющая информация, которую пользователь по своему желанию может не смотреть. Это раскрывающийся блок с надписью Подробнее (по умолчанию). Сюда могут включать сведения об авторе, некие уточнения;
4. <summary></summary>
Дает краткую характеристику содержимого блока details . Посмотрим на примере совместную работу элементов.