15 самых популярных HTML-тегов — журнал «Доктайп»
Чтобы сверстать простой сайт, необязательно знать все HTML-теги. Для начала можно изучить самые популярные — их достаточно для создания примитивной страницы с текстом, ссылками, картинками, подключёнными стилями и скриптами.
Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.
Теги <html>, <head> и <body>
На каждой веб-странице есть три обязательных тега — они формируют структуру документа и содержат информацию для браузеров и поисковых систем.
<html> — контейнер для содержимого страницы.
<head> содержит служебную информацию. Здесь подключаются стили, указывается заголовок страницы, подключаются метатеги.
<body> содержит контент — всё, что отображается в браузере.
Тег <div>
8 270 734 упоминаний.
Тег <div> — самый популярный. Он используется как контейнер для HTML-элементов. В него можно добавить заголовок, абзацы текста, списки, формы или что-то ещё, а потом стилизовать.
<div> <h3>О нас</h3> <p>Мы очень любим котов и веб-разработку.</p> </div>
Тег не имеет семантического значения, то есть не передаёт никакой информации о своём содержании. Он нужен для визуального форматирования и разметки.
Обращу внимание на отрыв
Николай Шабалин<div>от других тегов. Он потому популярный, что им можно описать бессмысленные сущности, коих больше, чем осмысленных. Также не для всех осмысленных сущностей есть теги. Например,<div>используется для создания сетки. Для сеток нет тегов, только стили: гриды, флексы, флоаты и прочее.
Почитать про эти теги и семантическую вёрстку
Некоторые разработчики создают на 
Так можно делать, но это плохая практика. Лучше использовать специальные семантические теги: <header>, <nav>, <main>, <section>, <aside> и <article>. Они дают больше информации о содержимом и делают код более читабельным.
Тег <a>
2 918 931 упоминание.
HTML-тег <a> используется для создания ссылок. У тега есть атрибут href — в нём указывается URL-адрес страницы, на которую должен попасть пользователь. Когда адрес неизвестен, в href ставится заглушка:
<a href="https://htmlacademy.ru/">Обычная сылка</a> <a href="#">Ссылка с заглушкой</a>
Что такое ссылки и как их ставить
Если в атрибут добавить протокол mailto:, ссылка откроет почтовый клиент пользователя и создаст электронное письмо. Например, когда пользователь кликнет по ссылке из примера ниже, откроется клиент с автоматически заполненным полем получателя — keks@example.
com.
<a href="mailto:[email protected]">Напишите нам.</a>
Тег <span>
2 047 701 упоминание.
Тег <span> — несемантический, как и <div>. Он используется для стилизации отдельных слов и фраз в блоке текста. Например, вы можете использовать тег, чтобы изменить цвет слова в абзаце, применить другой шрифт или начертание.
<p>В этом параграфе часть слов написана <span>красным</span> цветом.</p>
Тег <ul> и <li>
280 978 и 1 463 187 упоминаний.
<ul> создаёт неупорядоченный список, то есть элементы в нём не пронумерованы, а помечены маркером. Внутри тега с помощью <li> добавляются элементы списка.
<ul> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>
Как сделать список без точек
С помощью таких списков разработчики создают навигацию, каталог с карточками товаров, пагинацию, раздел с отзывами и прочее.
Тег <p>
872 383 упоминаний.
Тег <p> создаёт абзацы — отделяет одну часть текста от другой. Например, все абзацы на этой странице размечены тегом <p>.
<p>Если вы верстаете личный блог, сайт-визитку или целый интернет-магазин, не забудьте правильно разметить текст. Неважно, для каких целей вы создаёте продукт и сколько в нём будет текста — в любом случае абзацы важны.</p> <p>В письменной речи принято в одном абзаце раскрывать одну идею. Но в HTML абзац — не смысловая, а скорее структурная единица. Он лишь явно выделяет параграфы. Притом в тег можно вкладывать не только текст, но и, например, картинки.</p>
Тег <img>
834 669 упоминаний.
Как отличить контентное изображение от декоративного
Тег <img> добавляет графики, иллюстрации и фотографии. Обычно его используют, когда на страницу нужно вставить контентное изображение — то есть которое доносит до пользователей полезную информацию.
Например, показывает продукт или покупателей. Фоны и декоративные элементы чаще добавляют с помощью CSS или тега <svg>.
У <img> есть четыре обязательных атрибута:
alt— альтернативный текст, описывающий изображение. Нужен на случай, если картинка не загрузится.src— адрес, по которому находится изображение.width— ширина изображения.height— высота изображения.
<img src="images/keks.jpg" alt="Рыжий кот Кекс сидит на клавиатуре.">
Тег <br>
801 902 упоминания.
Тег <br> переносит текст на другую строку, не начиная нового абзаца.
<p>Санкт-Петербург, <br> набережная реки Карповки, 5. </p>
Распространённая ошибка разработчиков-новичков — использовать <br> для деления текста на абзацы. Тег не подходит для таких задач — для абзацев есть <p>.
Тег <script>
765 856 упоминаний.
Тег подключает на страницу JavaScript. <script> ставится в конце документа, перед закрывающим тегом </body>. Если сделать наоборот и подключить JS в начале, страница будет отрисовываться медленнее.
У тега есть обязательный атрибут src, в котором указывается путь до файла.
<script src="scripts/script.js"></script>
Тег <link>
542 306 упоминаний.
Тег <link> подключает CSS-файлы. В отличие от <script>, он ставится в начале документа, в теге <head>.
У <link> два обязательных атрибута:
relсо значениемstylesheetозначает, что файл содержит таблицу стилей.hrefуказывает адрес файла.
<link rel="stylesheet" href="styles/style.css">
Тег <meta>
538 580 упоминаний.
Тег содержит метаданные — информацию, которая может влиять на страницу. Атрибут charset указывает кодировку страницы, чтобы браузер правильно отобразил текст. Самая распространённая современная кодировка — utf-8.
<meta charset="utf-8">
С помощью атрибута name="keywords" можно подсказать поисковым системам ключевые слова, по которым пользователи должны находить сайт. Атрибут
<meta name="keywords" name="фронтенд-разработка, обучение программированию"> <meta name="description" name="Обучаем фронтенд- и бэкенд-разработке">
Все атрибуты тега <meta>.
Тег <i>
390 689 упоминаний.
Тег <i> форматирует текст — делает его курсивным.
<p>Дизайнер решил выделить текст <i>курсивом</i></p>
Часто тег <i> используется для иконок: <i>.
Именно поэтому он так часто встречается в исследовании. Однако такое использование тега — грубая ошибка, потому что он предназначен для работы с текстом
Кстати, есть ещё один тег для выделения курсивом, не такой популярный — <em>. Разработчики используют его, чтобы поставить акцент на слове или фразе.
<p>Тебе <em>не стоило</em> дразнить Кекса. Он <em>обиделся</em></p>
Что ещё надо знать
Как мы говорили в начале статьи, этих тегов хватит для создания простой страницы. Но чтобы верстать хорошо, придётся изучить семантические теги. То есть не создавать всю разметку на <div>, а размечать элементы правильно. Например, для шапки сайта использовать <header>, для подвала — <footer>, для навигации — <nav>, а для крупных смысловых разделов — <section>.
Есть и другие теги — вы найдёте их в спецификации HTML.
Потренировать навыки вёрстки можно на курсе «Старт во фронтенде».
Два первых раздела — бесплатные.
Материалы по теме
- Шаблон простого сайта
- Как ставить пустые ссылки
- Как подключить стили на страницу
- Как правильно написать alt-текст
- Как использовать ссылки mailto: и tel:
HTML 5 Справочник всех тегов онлайн и примеры
❮ Главная Дальше ❯
= Новое в HTML5.
| Тег | Описание |
|---|---|
| <!—…—> | Определяет комментарий |
| <!DOCTYPE> | Определяет тип документа |
| <a> | Определяет гиперссылку |
| <abbr> | Определяет аббревиатуру или акроним |
| <acronym> | Не поддерживается в HTML5. Использовать <abbr> Вместо. Определяет акроним |
| <address> | Определяет контактные данные автора/владельца документа |
| <applet> | Не поддерживается в HTML5. Использовать <embed> or <object> Вместо. Определяет встроенный апплет |
| <area> | Определяет область внутри изображения-карты |
| <article> | Определяет статью |
| <aside> | Определяет содержание в стороне от содержимого страницы |
| <audio> | Определяет звуковое содержимое |
| <b> | Определяет полужирный текст |
| <base> | Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе |
| <basefont> | Не поддерживается в HTML5. Вместо этого используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе |
| <bdi> | Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами |
| <bdo> | Переопределяет текущее направление текста |
| <big> | Не поддерживается в HTML5. Вместо этого используйте CSS.Определяет большой текст |
| <blockquote> | Определяет раздел, который цитируется из другого источника |
| <body> | Определяет тело документа |
| <br> | Определяет один разрыв строки |
| <button> | Определяет нажатую кнопку |
| <canvas> | Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript) |
| <caption> | Определяет заголовок таблицы |
| <center> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст |
| <cite> | Определяет название работы |
| <code> | Определяет часть кода компьютера |
| <col> | Задает свойства столбца для каждого столбца в <colgroup> element |
| <colgroup> | Задает группу из одного или нескольких столбцов в таблице для форматирования |
| <data> | Связывает данное содержимое с машинно-читаемым переводом |
| <datalist> | Задает список предварительно заданных параметров для элементов управления вводом |
| <dd> | Определяет описание/значение термина в списке описания |
| <del> | Определяет текст, который был удален из документа |
| <details> | Определяет дополнительные сведения, которые пользователь может просматривать или скрывать |
| <dfn> | Представляет определяющий экземпляр термина |
| <dialog> | Определяет диалоговое окно или окно |
| <dir> | Не поддерживается в HTML5. Использовать <ul> Вместо.Определяет список каталогов |
| <div> | Определяет раздел в документе |
| <dl> | Определяет список описания |
| <dt> | Определяет термин/имя в списке описания |
| <em> | Определяет подчеркнутый текст |
| <embed> | Определяет контейнер для внешнего (не HTML) приложения |
| <fieldset> | Группирует связанные элементы в форме |
| <figcaption> | Определяет заголовок для <figure> Элемент |
| <figure> | Указывает автономное содержимое |
| <font> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста |
| <footer> | Определяет нижний колонтитул для документа или раздела |
| <form> | Определяет HTML-форму для ввода данных пользователем |
| <frame> | Не поддерживается в HTML5. Определяет окно (фрейм) в фрейме |
| <frameset> | Не поддерживается в HTML5. Определяет набор фреймов |
| <h2> to <h6> | Определяет заголовки HTML |
| <head> | Определяет сведения о документе |
| <header> | Определяет заголовок документа или раздела |
| <hr> | Определяет тематическое изменение содержания |
| <html> | Определяет корень HTML-документа |
| <i> | Определяет часть текста в альтернативный голос или настроение |
| <iframe> | Определяет встроенный фрейм |
| <img> | Определяет изображение |
| <input> | Определяет элемент управления вводом |
| <ins> | Определяет текст, вставленный в документ |
| <kbd> | Определяет ввод с клавиатуры |
| <label> | Определяет метку для <input> Элемент |
| <legend> | Определяет заголовок для <fieldset> Элемент |
| <li> | Определяет элемент списка |
| <link> | Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей) |
| <main> | Указывает основное содержимое документа |
| <map> | Определяет изображение на стороне клиента-Map |
| <mark> | Определяет выделенный/выделенный текст |
| <menu> | Определяет список/меню команд |
| <menuitem> | Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню |
| <meta> | Определяет метаданные HTML-документа |
| <meter> | Определяет скалярное измерение в пределах известного диапазона (датчика) |
| <nav> | Определяет навигационные ссылки |
| <noframes> | Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, которые не поддерживают кадры |
| <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>) |
| <span> | Определяет раздел в документе |
| <strike> | Не поддерживается в HTML5. Использовать <del> или <s> Вместо.Определяет текст зачеркивания |
| <strong> | Определяет важный текст |
| <style> | Определяет сведения о стиле для документа |
| <sub> | Определяет текст с подстрочным текстом |
| <summary> | Определяет видимый заголовок для <details> Элемента |
| <sup> | Определяет текст с надписью |
| <svg> | Определяет контейнер для графики SVG |
| <table> | Определяет таблицу |
| <tbody> | Группирует содержимое тела в таблице |
| <td> | Определяет ячейку в таблице |
| <template> | Определяет шаблон |
| <textarea> | Определяет многострочный элемент управления вводом (область текста) |
| <tfoot> | Группирует содержимое нижнего колонтитула в таблице |
| <th> | Определяет ячейку заголовка в таблице |
| <thead> | Группирует содержимое заголовка в таблице |
| <time> | Определяет дату и время |
| <title> | Определяет заголовок документа |
| <tr> | Определяет строку в таблице |
| <track> | Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>) |
| <tt> | Не поддерживается в HTML5. Вместо этого используйте CSS.Определяет телетайп текст |
| <u> | Определяет текст, который должен быть стилистически отличается от обычного текста |
| <ul> | Определяет неупорядоченный список |
| <var> | Определяет переменную |
| <video> | Определяет видео или фильм |
| <wbr> | Определяет возможный разрыв строки |
❮ Главная Дальше ❯
HTML тег html
❮ Предыдущий Полный справочник HTML Далее ❯
Пример
Простой HTML-документ:
Это заголовок
Это абзац.
Попробуйте сами »
Определение и использование
Тег представляет корень документа HTML.
Тег является контейнером для всех остальных элементов HTML (кроме
тег ).
Примечание: Вы должны всегда включать
атрибут lang внутри тег, чтобы объявить язык веб-страницы. Это сделано для помощи в поиске
движки и браузеры.
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| xмлн | http://www.w3.org/1999/xhtml | Указывает атрибут пространства имен XML (если вам нужно, чтобы ваш контент соответствовал XHTML) |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Связанные страницы
Учебник по HTML: Введение в HTML
Справочник по HTML DOM: Объект HTML
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
html {
display: block;
}
html:focus {
контур: нет;
}
❮ Предыдущий Полный справочник HTML Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.
CSS Reference Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.
Справочник по элементам HTML — по категориям
❮ Предыдущий Далее ❯
Базовый HTML
| Тег | Описание |
|---|---|
| Определяет тип документа | |
| Определяет документ HTML | |
| <голова> | Содержит метаданные/информацию для документа |
| <название> | Определяет заголовок документа |
| <тело> | Определяет тело документа |
Отдо | Определяет заголовки HTML |
| Определяет параграф | |
| | Вставляет одиночный разрыв строки |
| <час> | Определяет тематическое изменение содержимого |
| Определяет комментарий |
Форматирование
| Тег | Описание |
|---|---|
| <акроним> | Не поддерживается в HTML5. Вместо этого используйте . Определяет аббревиатуру |
| <сокращение> | Определяет аббревиатуру или акроним |
| <адрес> | Определяет контактную информацию автора/владельца документа/статьи |
| Определяет полужирный текст | |
| Изолирует часть текста, которая может быть отформатирована в другом направлении из другого текста вне его | |
| Переопределяет текущее направление текста | |
| <большой> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет большой текст |
| <цитата> | Определяет раздел, цитируемый из другого источника |
| <центр> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст |
| <цитировать> | Определяет название произведения |
| <код> | Определяет часть компьютерного кода |
| <удалить> | Определяет текст, который был удален из документа |
| Указывает термин, который будет определен в содержимом | |
| Определяет выделенный текст | |
| <шрифт> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста |
| <я> | Определяет часть текста в альтернативном голосе или настроении |
| Определяет текст, который был вставлен в документ | |
| Определяет ввод с клавиатуры | |
| <метка> | Определяет отмеченный/выделенный текст |
| <метр> | Определяет скалярное измерение в пределах известного диапазона (манометр) |
| <пред> | Определяет предварительно отформатированный текст |
| <прогресс> | Представляет ход выполнения задачи |
| Определяет короткую цитату | |
| <рп> | Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации |
| Определяет объяснение/произношение символов (для восточноазиатских типография) | |
| <рубин> | Определяет рубиновую аннотацию (для восточноазиатской типографики) |
| <с> | Определяет текст, который больше не является правильным |
| <образец> | Определяет образец вывода из компьютерной программы |
| <маленький> | Определяет меньший текст |
| <забастовка> | Не поддерживается в HTML5. Вместо этого используйте Определяет зачеркнутый текст |
| <сильный> | Определяет важный текст |
| Определяет подстрочный текст | |
| <вверх> | Определяет текст с надстрочным индексом |
| <шаблон> | Определяет контейнер для контента, который должен быть скрыт при загрузке страницы |
| <время> | Определяет конкретное время (или дату/время) |
| Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет текст телетайпа | |
| <у> | Определяет нечеткий текст, стиль которого отличается от обычного. текст |
| <вар> | Определяет переменную |
| | Определяет возможный разрыв строки |
Формы и ввод
| Тег | Описание |
|---|---|
| <форма> | Определяет форму HTML для пользовательского ввода |
| <ввод> | Определяет элемент управления вводом |
| <текстовое поле> | Определяет элемент управления многострочным вводом (текстовая область) |
| <кнопка> | Определяет нажимаемую кнопку |
| <выбрать> | Определяет раскрывающийся список |
| <оптгруппа> | Определяет группу связанных параметров в раскрывающемся списке |
| <опция> | Определяет параметр в раскрывающемся списке |
| <метка> | Определяет метку для элемента |
| <набор полей> | Группирует связанные элементы в форме |
| <легенда> | Определяет заголовок для элемента |
| <список данных> | Указывает список предопределенных параметров для элементов управления вводом |
| <выход> | Определяет результат вычисления |
Рамки
| Бирка | Описание |
|---|---|
| <кадр> | Не поддерживается в HTML5. Определяет окно (фрейм) в наборе фреймов |
| <набор кадров> | Не поддерживается в HTML5. Определяет набор кадров |
| <без кадров> | Не поддерживается в HTML5. Определяет альтернативный контент для пользователей, которые не поддерживают кадры |