Загрузка...
Справочник тегов HTML
Справочник тегов HTML — это как строительный план для веб-разработчика. Он показывает, как использовать каждый кирпичик HTML для создания понятной, структурированной и доступной страницы. Представьте себе строительство дома: каждый элемент имеет своё место — фундамент, стены, окна. Так и в HTML: теги задают структуру, смысл и иерархию содержимого.
Этот справочник необходим каждому, кто создает сайты: от портфолио и блогов до интернет-магазинов, новостных порталов и социальных платформ. Знание всех тегов помогает не только ускорить верстку, но и сделать её правильной — с учётом SEO, доступности и стандартов HTML5.
Вы узнаете, как применять каждый HTML-тег с примерами, когда и зачем его использовать, как избежать распространённых ошибок и как писать чистый, поддерживаемый код.
Базовый Пример
html
HTML Code
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Полный пример</title>
</head>
<body>
<h1>Справочник тегов HTML</h1>
<p>Изучаем все теги на практике</p>
</body>
</html>В этом базовом примере показана минимальная структура HTML-документа:
<!<a href="/ru/html/html-doctype/" class="smart-link">DOCTYPE</a> html>сообщает браузеру, что документ написан на HTML5.<html lang="ru">определяет корневой элемент документа и задаёт язык страницы.<head>содержит метаинформацию — заголовок, стили, кодировку и пр.<title>— отображается в заголовке вкладки браузера.<body>— вся видимая часть сайта.<h1>и<p>— базовые блоки контента: заголовки и параграфы.
Даже такой простой документ уже соответствует стандартам. Он легко адаптируется под любые типы сайтов: от личного блога до крупного интернет-магазина.
Практический Пример
html
HTML Code
<article>
<header>
<h2>Новость дня</h2>
<time datetime="2025-07-29">29 июля 2025</time>
</header>
<p>Новый справочник по HTML уже доступен онлайн!</p>
<a href="/read">Читать далее</a>
</article>Рекомендации:
- Используйте семантические теги (
<main>,<section>,<header>) — это помогает SEO и доступности. - Всегда добавляйте атрибут
altк изображениям для скрин-ридеров. - Соблюдайте вложенность элементов: теги не должны перекрываться.
-
Пишите валидный код и проверяйте его с помощью валидаторов.
Ошибки: -
Использование
<div>вместо семантических тегов (например<section>). - Отсутствие обязательных атрибутов (
alt,type,name). - Неправильное использование вложенности (например,
<p><div>...</div></p>). - Дублирование ID, что нарушает уникальность элементов.
Проверяйте код с помощью https://validator.w3.org/ и не полагайтесь только на визуальный результат.
📊 Быстрая Справка
| Тег | Описание | Пример |
|---|---|---|
| <a> | HTML-тег: <a> | <a>Пример</a> |
| <abbr> | HTML-тег: <abbr> | <abbr>Пример</abbr> |
| <address> | HTML-тег: <address> | <address>Пример</address> |
| <area> | HTML-тег: <area> | <area /> |
| <article> | HTML-тег: <article> | <article>Пример</article> |
| <aside> | HTML-тег: <aside> | <aside>Пример</aside> |
| <audio> | HTML-тег: <audio> | <audio>Пример</audio> |
| <b> | HTML-тег: <b> | <b>Пример</b> |
| <base> | HTML-тег: <base> | <base /> |
| <bdi> | HTML-тег: <bdi> | <bdi>Пример</bdi> |
| <bdo> | HTML-тег: <bdo> | <bdo>Пример</bdo> |
| <blockquote> | HTML-тег: <blockquote> | <blockquote>Пример</blockquote> |
| <body> | HTML-тег: <body> | <body>Пример</body> |
| <br> | HTML-тег: <br> | <br /> |
| <button> | HTML-тег: <button> | <button>Пример</button> |
| <canvas> | HTML-тег: <canvas> | <canvas>Пример</canvas> |
| <caption> | HTML-тег: <caption> | <caption>Пример</caption> |
| <cite> | HTML-тег: <cite> | <cite>Пример</cite> |
| <col> | HTML-тег: <col> | <col /> |
| <colgroup> | HTML-тег: <colgroup> | <colgroup>Пример</colgroup> |
| <data> | HTML-тег: <data> | <data>Пример</data> |
| <datalist> | HTML-тег: <datalist> | <datalist>Пример</datalist> |
| <dd> | HTML-тег: <dd> | <dd>Пример</dd> |
| <del> | HTML-тег: <del> | <del>Пример</del> |
| <details> | HTML-тег: <details> | <details>Пример</details> |
| <dfn> | HTML-тег: <dfn> | <dfn>Пример</dfn> |
| <dialog> | HTML-тег: <dialog> | <dialog>Пример</dialog> |
| <div> | HTML-тег: <div> | <div>Пример</div> |
| <dl> | HTML-тег: <dl> | <dl>Пример</dl> |
| <dt> | HTML-тег: <dt> | <dt>Пример</dt> |
| <em> | HTML-тег: <em> | <em>Пример</em> |
| <embed> | HTML-тег: <embed> | <embed /> |
| <fieldset> | HTML-тег: <fieldset> | <fieldset>Пример</fieldset> |
| <figcaption> | HTML-тег: <figcaption> | <figcaption>Пример</figcaption> |
| <figure> | HTML-тег: <figure> | <figure>Пример</figure> |
| <footer> | HTML-тег: <footer> | <footer>Пример</footer> |
| <form> | HTML-тег: <form> | <form>Пример</form> |
| <h1> | HTML-тег: <h1> | <h1>Пример</h1> |
| <h2> | HTML-тег: <h2> | <h2>Пример</h2> |
| <h3> | HTML-тег: <h3> | <h3>Пример</h3> |
| <h4> | HTML-тег: <h4> | <h4>Пример</h4> |
| <h5> | HTML-тег: <h5> | <h5>Пример</h5> |
| <h6> | HTML-тег: <h6> | <h6>Пример</h6> |
| <head> | HTML-тег: <head> | <head>Пример</head> |
| <header> | HTML-тег: <header> | <header>Пример</header> |
| <hgroup> | HTML-тег: <hgroup> | <hgroup>Пример</hgroup> |
| <hr> | HTML-тег: <hr> | <hr /> |
| <html> | HTML-тег: <html> | <html>Пример</html> |
| <i> | HTML-тег: <i> | <i>Пример</i> |
| <iframe> | HTML-тег: <iframe> | <iframe>Пример</iframe> |
| <img> | HTML-тег: <img> | <img /> |
| <input> | HTML-тег: <input> | <input /> |
| <ins> | HTML-тег: <ins> | <ins>Пример</ins> |
| <kbd> | HTML-тег: <kbd> | <kbd>Пример</kbd> |
| <label> | HTML-тег: <label> | <label>Пример</label> |
| <legend> | HTML-тег: <legend> | <legend>Пример</legend> |
| <li> | HTML-тег: <li> | <li>Пример</li> |
| <link> | HTML-тег: <link> | <link /> |
| <main> | HTML-тег: <main> | <main>Пример</main> |
| <map> | HTML-тег: <map> | <map>Пример</map> |
| <mark> | HTML-тег: <mark> | <mark>Пример</mark> |
| <meta> | HTML-тег: <meta> | <meta /> |
| <meter> | HTML-тег: <meter> | <meter>Пример</meter> |
| <nav> | HTML-тег: <nav> | <nav>Пример</nav> |
| <noscript> | HTML-тег: <noscript> | <noscript>Пример</noscript> |
| <object> | HTML-тег: <object> | <object>Пример</object> |
| <ol> | HTML-тег: <ol> | <ol>Пример</ol> |
| <optgroup> | HTML-тег: <optgroup> | <optgroup>Пример</optgroup> |
| <option> | HTML-тег: <option> | <option>Пример</option> |
| <output> | HTML-тег: <output> | <output>Пример</output> |
| <p> | HTML-тег: <p> | <p>Пример</p> |
| <param> | HTML-тег: <param> | <param>Пример</param> |
| <picture> | HTML-тег: <picture> | <picture>Пример</picture> |
| <pre> | HTML-тег: <pre> | <pre>Пример</pre> |
| <progress> | HTML-тег: <progress> | <progress>Пример</progress> |
| <q> | HTML-тег: <q> | <q>Пример</q> |
| <rp> | HTML-тег: <rp> | <rp>Пример</rp> |
| <rt> | HTML-тег: <rt> | <rt>Пример</rt> |
| <ruby> | HTML-тег: <ruby> | <ruby>Пример</ruby> |
| <s> | HTML-тег: <s> | <s>Пример</s> |
| <samp> | HTML-тег: <samp> | <samp>Пример</samp> |
| <script> | HTML-тег: <script> | <script>Пример</script> |
| <section> | HTML-тег: <section> | <section>Пример</section> |
| <select> | HTML-тег: <select> | <select>Пример</select> |
| <small> | HTML-тег: <small> | <small>Пример</small> |
| <source> | HTML-тег: <source> | <source /> |
| <span> | HTML-тег: <span> | <span>Пример</span> |
| <strong> | HTML-тег: <strong> | <strong>Пример</strong> |
| <style> | HTML-тег: <style> | <style>Пример</style> |
| <sub> | HTML-тег: <sub> | <sub>Пример</sub> |
| <summary> | HTML-тег: <summary> | <summary>Пример</summary> |
| <sup> | HTML-тег: <sup> | <sup>Пример</sup> |
| <table> | HTML-тег: <table> | <table>Пример</table> |
| <tbody> | HTML-тег: <tbody> | <tbody>Пример</tbody> |
| <td> | HTML-тег: <td> | <td>Пример</td> |
| <template> | HTML-тег: <template> | <template>Пример</template> |
| <textarea> | HTML-тег: <textarea> | <textarea>Пример</textarea> |
| <tfoot> | HTML-тег: <tfoot> | <tfoot>Пример</tfoot> |
| <th> | HTML-тег: <th> | <th>Пример</th> |
| <thead> | HTML-тег: <thead> | <thead>Пример</thead> |
| <time> | HTML-тег: <time> | <time>Пример</time> |
| <title> | HTML-тег: <title> | <title>Пример</title> |
| <tr> | HTML-тег: <tr> | <tr>Пример</tr> |
| <track> | HTML-тег: <track> | <track /> |
| <u> | HTML-тег: <u> | <u>Пример</u> |
| <ul> | HTML-тег: <ul> | <ul>Пример</ul> |
| <var> | HTML-тег: <var> | <var>Пример</var> |
| <video> | HTML-тег: <video> | <video>Пример</video> |
| <wbr> | HTML-тег: <wbr> | <wbr /> |
Итоги:
Вы познакомились со всеми тегами HTML5 и научились использовать их в реальных проектах. HTML — это каркас, который определяет структуру и смысл содержимого. Далее вы сможете применять CSS для стилизации и JavaScript для интерактивности.
Следующие шаги:
- Изучите CSS: классы, селекторы, макеты.
- Освойте JavaScript: DOM, события, логика.
- Пишите мини-проекты и применяйте теги в практике.
- Изучите ARIA для доступности и UX.
Сильная база HTML — залог качественной верстки.
🧠 Проверьте Свои Знания
Готов к Началу
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
3
Вопросы
70%
Для Прохождения
∞
Время
∞
Попытки
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху