Как устроен HTML
Существуют глобальные атрибуты, их можно применять ко всем тегам: список глобальных атрибутов.
Некоторые глобальные атрибуты:
- class определяет класс, значение – имена классов;
- id – идентификатор, значение – уникальный идентификатор;
- style – стили, значение – код CSS;
- hidden – скрывает элемент, но не удаляет его из DOM. Аналогично применению стиля display: none;
- title – дополнительная информация в виде всплывающей подсказки, значение – текст.
Основные теги
- Структура и инструкции для построения HTML-документа:
- . Указывается в первой строке документа и означает: «Этот документ написан на HTML5». Не представлен в дереве документа DOM. Обязателен для корректного применения CSS.
- html. Главный тег, сообщает браузеру, что это HTML-документ. Находится в основании дерева DOM и он – корневой элемент, или элемент верхнего уровня.
- head. Не всю информацию надо показывать на странице. Служебная информация – в «голове» документа.
- title, link. Служебная информация: краткий заголовок и ссылки на внешние файлы (иконка, стилевой файл). Определяются в head.
- meta. Любая информация о мета-данных, которая не может быть представлена другими, ориентированными на мета-данные, HTML элементами. Например, кодировка страницы.
- body. Все видимое в окне, вкладке браузера содержимое – в «теле» страницы.
- комментарии: .
- Основная разметка
- Заголовки h1-h6. Заголовки и подзаголовки улучшают читаемость текста.
- p и br. Параграф и принудительный перенос на новую строку. Заголовки нельзя вкладывать в параграфы!
- hr. Разделитель содержимого, горизонтальная линия (display: block).
- img. Картинка, изображение (display: inline-block). В обязательном атрибуте src указывается путь к файлу или его URL. Распространенные форматы изображений: jpeg, png, svg, webp (пример webp):
- ul и ol, li: ненумерованный и нумерованный списки, элемент списка (display: list-item).
- a. Ссылка. Атрибуты download, href, target и т.д.
Якорь — это название после символа #, который указывает на элемент (идентификатор, ID) на текущей странице. - Стилистически выделенные строчные элементы:
b (полужирный, font-weight: bold),
i (курсив, font-style: italic),
u (подчеркнутый, text-decoration: underline),
s (перечеркнутый, text-decoration: line-through). - sub (vertical-align: sub; font-size: smaller;), sup (vertical-align: super; font-size: smaller).
- Семантическая разметка
- header. «Шапка» страницы. Не путать с head!
- footer «Подвал» страницы.
- main. Основное содержимое страницы.
- section. Раздел, секция.
- article. Статья.
Семантические теги по свойствам повторяют тег div.
Сколько всего тегов HTML?
Их 115–120, примерно как в периодической системе химических элементов – таблице Менделеева:
Спецсимволы HTML
Спецсимволы – запоминающиеся (мнемонические) обозначения символов вида &слово;. Они входят в стандарт HTML.
Когда использование спецсимволов – единственная возможность отобразить символ на web-странице:
- Знак меньше: < Потому что с него начинаются теги.
- неразрывный пробел, мнемоника . Потому что в коде HTML игнорируется более одного пробела подряд.
Другие часто используемые спецсимволы:
- Знак больше >: >
- короткое – тире – и длинное — тире —
- двойные угловые кавычки, или французские кавычки, или «ёлочки»: « и »
- амперсанд &: &
- копирайт ©: ©
Чем заполняют макеты?
Текстом Lorem ipsum, который не имеет перевода. Слово «lorem» получилось из-за переноса «dolorem» на новую страницу после первого слога.
Фраза «dolorem ipsum» встречается в философском трактате Цицерона «О пределах добра и зла», написанном в 45 году до н.э. на латинском языке.
- В оригинале: «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit . »
- Перевод: «Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль. »
Первые 100 слов, вызываются сокращением Emmet lorem100:
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio animi alias porro ipsam illum exercitationem odit cum perspiciatis quidem, a perferendis eum minus ea sapiente corporis libero quos ullam, debitis assumenda? Corrupti, culpa! Ut fuga corrupti culpa eligendi voluptas, molestiae aliquid quod soluta, nostrum doloribus maxime numquam illo facilis obcaecati excepturi expedita pariatur ullam necessitatibus ex eius odit, similique saepe omnis officiis. Maiores facilis ullam architecto numquam non tempore magni quae deleniti? Corrupti aspernatur officia qui recusandae quis mollitia facere illum corporis cum id harum, odit maxime repellat tempore deleniti exercitationem iste ullam suscipit provident delectus, sed necessitatibus doloremque. Excepturi?
Альтернативы HTML?
Языков разметки много, и HTML – всего один из множества, хотя сегодня и самый популярный. Существует SGML (Standard Generalized Markup Language), стандартный обобщённый язык разметки.
Языки HTML и XML произошли от SGML. HTML был приложением SGML, а XML – это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. В 2000-х годах у консорциума W3C было серьезное намерение перевести веб на XML. К счастью, этого не случилось.
Markdown – облегчённый язык разметки, созданный с целью написания легко читаемого и удобного для правки текста, но пригодного для преобразования в другие форматы (например, HTML). Подходит для самых простых страниц, но требует конвертации в HTML.
| Тег | Описание |
|---|---|
| Определяет комментарий | |
| Определяет тип документа | |
| Определяет гиперссылку | |
| Определяет абревиатуру или акроним | |
| Не поддерживается в HTML5. Используйте вместо этого. Определяет акроним |
|
| Определяет контактную информацию автора / владельца документа | |
| Не поддерживается в HTML5. Используйте или вместо этого. Определяет встроенный аплет |
|
| Определяет область внутри карты изображения | |
| Определяет статью | |
| Определяет содержание, кроме содержания страницы (в стороне) | |
| Определяет звуковой контент | |
| Определяет жирный текст | |
| Указывает базовый URL-адрес / цель для всех относительных URL-адресов документа | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Отпределяет цвет, размер и шрифт по умолчанию для всего текста документа |
|
| Изолирует часть текста, который может быть отформатирован в другом направлении от иного текста за его пределами | |
| Переопределяет текущее направление текста | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет увеличенный текст |
|
| Определяет раздел, который цитируется с другого источника | |
| Определяет тело документа | |
| Определяет разрыв строки | |
| Определяет кнопку, которую можно нажимать | |
| Используется для рисования на лету, с помощью сценариев (обычно на JavaScript) | |
| Определяет подпись к таблице | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет центрирование текста |
|
| Определяет название произведения при цитировании из него | |
| Определяет фрагмент компьютерного кода | |
| Указывает свойства столбцов для каждого столбца в элементе | |
| Определяет группу с одного или нескольких столбцов в таблице для форматирования | |
| Связывает заданный контент с машиночитаемым переводом | |
| Определяет список предварительно определённых параметров управления вводом | |
| Определяет описание / значение термина в списке описания | |
| Определяет удалённый с документа текст | |
| Определяет дополнительные детали, которые пользователь может просматривать или прятать | |
| Задаёт термин, для которого будет дано определение (definition) | |
| Определяет диалоговый бокс или окно | |
| Не поддерживается в HTML5. Используйте вместо этого. Определяет список каталогов |
|
| Определяет раздел (блочный) в документе | |
| Определяет список описаний | |
| Определяет термин / имя в списке описания | |
| Определяет семантически подчёркнутый текст (empharized) | |
| Определяет контейнер для внешнего (не HTML) приложения | |
| Группы связанных элементов в форме | |
| Определяет заголовок для элемента | |
| Определяет автономное содержание | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет шрифт, цвет и размер текста |
|
| Определяет нижний колонтитул (футер) для документа или раздела | |
| Определяет HTML форму для ввода пользователем | |
| Не поддерживается в HTML5. Определяет окно (фрейм) в наборе фреймов |
|
| Не поддерживается в HTML5. Определяет набор фреймов |
|
| to | Определяет HTML заголовки |
| Определяет информацию о документе | |
| Определяет заголовок для документа или раздела | |
| Определяет тематическую смену контента | |
| Определяет корень HTML-документа | |
| Определяет часть текста альтернативным голосом или настроением | |
| Определяет встроенный фрейм | |
| Определяет изображение | |
| Определяет элемент управления вводом | |
| Определяет текст, который был вставлен в документ | |
| Определяет ввод с клавиатуры | |
| Определяет метку для элемента | |
| Определяет заголовок для элемента | |
| Определяет элемент списка | |
| Определяет взаимосвязь между документом и внешним ресурсом (обычно используется для ссылки на внешние таблицы стилей) | |
| Определяет основное содержание документа | |
| Определяет карту изображения на стороне клиента | |
| Определяет помеченный (маркированный) / выделенный текст | |
| Определяет метаданные HTML документа | |
| Определяет скалярное измерение в пределах известного диапазона (датчик) | |
| Определяет навигационные ссылки (навигация по сайту) | |
| Не поддерживается в HTML5. Определяет альтернативное содержание для пользователей, которые не поддерживают фреймы |
|
| Определяет альтернативное содержание для пользователей, которые не поддерживают скрипты на стороне клиента | |
| Определяет встроенный объект | |
| Определяет упорядоченный (нумерованный) список | |
| Определяет группу соответствующих параметров в выпадающем списке (выпадающем меню) | |
| Определяет параметр в выпадающем списке | |
| Определяет результат расчёт (калькуляции) | |
| Определяет параграф (абзац) | |
| Определяет параметр для объекта | |
| Определяет контейнер для нескольких ресурсов изображения | |
| Определяет предварительно отформатированный текст | |
| Представляет ход выполнения задания | |
| Определяет короткую цитату | |
| Определяет, что показывать в браузерах, которые не поддерживают ruby аннотации | |
| Определяет пояснения / произношение символов (для восточноазиатской типографики) | |
| Определяет аннотацию ruby (для восточноазиатской типографики) | |
| Определяет текст, который больше не является правильным | |
| Определяет исходные данные с компьютерной программы | |
| Определяет скрипт на стороне клиента | |
| Определяет раздел (секцию) в документе | |
| Определяет выпадающий список | |
| Определяет меньший текст | |
| Определяет несколько медиа-ресурсов для медиа-элементов ( и ) | |
| Определяет раздел (строчный) в документе | |
| Не поддерживается в HTML5. Используйте или вместо этого. Определяет перечеркнутый текст |
|
| Определяет семантически важный текст | |
| Определяет информацию о стиле в документе | |
| Определяет подстрчный текст (нижний индекс) | |
| Определяет видимый заголовок для элемента | |
| Определяет надстрочный текст (верхний индекс) | |
| Определяет контейнер для графики SVG | |
| Определяет таблицу | |
| Группирует содержание тела в таблице | |
| Определяет клетку (ячейку) в таблице | |
| Определяет шаблон | |
| Определяет многострочный элемент управления вводом (текстовая область) | |
| Группирует содержание нижнего колонтитула в таблице | |
| Определяет ячейку заголовка в таблице | |
| Группирует содержание заголовка в таблице | |
| Определяет дату / время | |
| Определяет заголовок документа | |
| Определяет строку в таблице | |
| Определяет текстовые дорожки для медиа-элементов ( и ) | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет текст телетайпа |
|
| Определяет текст, который должен быть стилистически отличным от обычного текста | |
| Определяет неупорядоченный (ненумерованный) список | |
| Определяет переменную | |
| Определяет видео или фильм | |
| Определяет возможный разрыв строки |
Справочник тегов HTML
HTML — язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги — это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
| Тег | Краткое описание | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Комментарий. Подробнее | |||||||||||||||||||||||||
| Определяет тип документа. Подробнее | |||||||||||||||||||||||||
| Ссылка, гиперссылка, якорь. Подробнее | |||||||||||||||||||||||||
| Определяет текст как аббревиатуру. Подробнее | |||||||||||||||||||||||||
| Контактная информация автора или владельца документа. Подробнее | |||||||||||||||||||||||||
| Определяет область на карте-изображении | |||||||||||||||||||||||||
| Статья | |||||||||||||||||||||||||
| Контент в стороне (содержимое не является основным на странице по смыслу) | |||||||||||||||||||||||||
| Позволяет вставить воспроизводимый аудио файл. Подробнее | |||||||||||||||||||||||||
| Полужирный текст. Подробнее | |||||||||||||||||||||||||
| Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее | |||||||||||||||||||||||||
| Область, где написание текста может имееть другое направления. Подробнее | |||||||||||||||||||||||||
| Устанавливает направление написания текста. В отличии от направление указывается физическое направление Подробнее | |||||||||||||||||||||||||
| Цитата. Подробнее | |||||||||||||||||||||||||
| Указывает область body документа. Подробнее | |||||||||||||||||||||||||
| Перенос строки. Подробнее | |||||||||||||||||||||||||
| Кликабельная кнопка. Подробнее | |||||||||||||||||||||||||
| Используется для рисовании графики с помощью скриптов | |||||||||||||||||||||||||
| Подпись таблицы. Подробнее | |||||||||||||||||||||||||
| Сноска на название материала. Подробнее | |||||||||||||||||||||||||
| Используется для вставки компьютерного кода в текстовом виде. Подробнее | |||||||||||||||||||||||||
| Задает характеристики колонок в таблице. Подробнее | |||||||||||||||||||||||||
| Определяет группу из одной или более колонок таблицы для форматирования. Подробнее | |||||||||||||||||||||||||
| Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее | |||||||||||||||||||||||||
| Определяет описание термина из тега в списке терминов . Подробнее | |||||||||||||||||||||||||
| Текст, который удален в новой версии документа. Подробнее | |||||||||||||||||||||||||
| Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее | |||||||||||||||||||||||||
| Указывает, что содержимое является термином. Подробнее | |||||||||||||||||||||||||
| Определяет диалоговое окно или интерактивный элемент | |||||||||||||||||||||||||
| Блочный элемент — один из основных элементов верстки. Подробнее | |||||||||||||||||||||||||
| Определяет список определений. Подробнее | |||||||||||||||||||||||||
| Название термина в списке определений . Подробнее | |||||||||||||||||||||||||
| выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее | |||||||||||||||||||||||||
| Контейнер для внешнего приложения | |||||||||||||||||||||||||
| Группа связанных элементов в форме. Подробнее | |||||||||||||||||||||||||
| Заголовок для элемента | |||||||||||||||||||||||||
| Определяет автономную группу из нескольких элементов (например картинка с подписью) | |||||||||||||||||||||||||
| Нижний колонтитул | |||||||||||||||||||||||||
| Определяет форму пользовательского ввода. Подробнее | |||||||||||||||||||||||||
| — | Заголовки HTML разного уровня: , , , , , . Подробнее | ||||||||||||||||||||||||
| Указывает область head документа. Подробнее | |||||||||||||||||||||||||
| Блок заголовка | |||||||||||||||||||||||||
| Горизонтальная линия — тематический разделитель. Подробнее | |||||||||||||||||||||||||
| Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее | |||||||||||||||||||||||||
| Выделяет текст курсивом. Подробнее | |||||||||||||||||||||||||
| Определяет встроенный фрейм | |||||||||||||||||||||||||
| Изображение, картинка. Подробнее | |||||||||||||||||||||||||
| Поле для ввода, элемент формы. Подробнее | |||||||||||||||||||||||||
| Текст, который был добавлен в новой версии документа. Подробнее | |||||||||||||||||||||||||
| Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее | |||||||||||||||||||||||||
| Метка для поля ввода. Обычно содержит подпись поля. Подробнее | |||||||||||||||||||||||||
| Заголовок элементов . Подробнее | |||||||||||||||||||||||||
| Элемент списка. Подробнее | |||||||||||||||||||||||||
| Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее | |||||||||||||||||||||||||
| Основной контент | |||||||||||||||||||||||||
| Контейнер для . Определяет пользовательскую карту на изображении | |||||||||||||||||||||||||
| Выделенный текст (обычно с помощью подсветки фона). Подробнее | |||||||||||||||||||||||||
| Контейнер для списка пунктов меню | |||||||||||||||||||||||||
| Определяет элементы, которые пользователь может вызвать из контекстного меню | |||||||||||||||||||||||||
| Используется для определения мета-данных документа. Подробнее | |||||||||||||||||||||||||
| Измеритель значений в заданном диапазоне | |||||||||||||||||||||||||
| Контейнер для навигационных элементов | |||||||||||||||||||||||||
| Альтернативный контент для пользователей, отключивших скрипты | |||||||||||||||||||||||||
| Определяет встроенный объект | |||||||||||||||||||||||||
| Определяет нумерованный список. Подробнее | |||||||||||||||||||||||||
| Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее | |||||||||||||||||||||||||
| Параметр (вариант выбора) в выпадающем списке. Подробнее | |||||||||||||||||||||||||
| Результат вычислений. Подробнее | |||||||||||||||||||||||||
| Абзац. Подробнее | |||||||||||||||||||||||||
| Задает параметры для встроенных объектов | |||||||||||||||||||||||||
| Контейнер для нескольких изображений | |||||||||||||||||||||||||
| Предварительно отформатированный текст. Подробнее | |||||||||||||||||||||||||
| Индикатор выполнения (прогресса) | |||||||||||||||||||||||||
| Цитата в тексте. Подробнее | |||||||||||||||||||||||||
| Альтернативный текст, если браузер не поддерживает тег . Подробнее | |||||||||||||||||||||||||
| Аннотация к содержимому тега . Подробнее | |||||||||||||||||||||||||
| Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее | |||||||||||||||||||||||||
| Перечеркнутый текст. Подробнее | |||||||||||||||||||||||||
| Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее | |||||||||||||||||||||||||
| Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее | |||||||||||||||||||||||||
| Раздел | |||||||||||||||||||||||||
| Определяет выпадающий список или список с множественным выбором. Подробнее | |||||||||||||||||||||||||
| Текст шрифтом меньшего размера. Подробнее | |||||||||||||||||||||||||
| Определяет ресурс для тегов , и . Подробнее | |||||||||||||||||||||||||
| Строчный элемент. Подробнее | |||||||||||||||||||||||||
| Текст, выделенный по значению. Обычно отображается полужирным. Подробнее | |||||||||||||||||||||||||
| Определяет контейнер для определения CSS стилей документа. Подробнее | |||||||||||||||||||||||||
| Отображает текст в виде нижнего индекса. Подробнее | |||||||||||||||||||||||||
| Заголовок внутри тега . Подробнее | |||||||||||||||||||||||||
| Отображает текст в виде верхнего индекса. Подробнее | |||||||||||||||||||||||||
| Определяет таблицу. Подробнее | |||||||||||||||||||||||||
| Определяет область контента в таблице. Подробнее | |||||||||||||||||||||||||
Ячейка в таблице
|
