Skip to content
DotNotation

HTML

Теги HTML

Базовые теги страницы

  • <html> – корневой тег HTML-документа
  • <head> – контейнер для метаинформации
  • <title> – заголовок страницы (отображается на вкладке браузера)
  • <meta> – мета-данные (кодировка, описание, ключевые слова и др.)
  • <body> – содержимое страницы

Теги для текста

  • <h1> – <h6> – заголовки (от самого большого до самого маленького)
  • <p> – абзац
  • <br> – перенос строки
  • <hr> – горизонтальная линия
  • <strong> – жирный текст
  • <em> – курсив
  • <u> – подчеркивание
  • <span> – строчный контейнер для стилизации

Теги для списков

  • <ul> – ненумерованный список
  • <ol> – нумерованный список
  • <li> – элемент списка

Таблицы

  • <table> – таблица
  • <tr> – строка таблицы
  • <td> – ячейка таблицы
  • <th> – заголовочная ячейка

Ссылки и изображения

  • <a> – гиперссылка
  • <img> – изображение (атрибут src – путь к изображению)

Формы

  • <form> – форма
  • <input> – поле ввода
  • <button> – кнопка
  • <textarea> – многострочное текстовое поле
  • <label> – метка для элемента формы
  • <select> – выпадающий список
  • <option> – пункт выпадающего списка

Блоки и контейнеры

  • <div> – блочный контейнер
  • <span> – строчный контейнер

Дополнительно

  • <iframe> – встроенный фрейм (вставка другой страницы)
  • <video> – вставка видео
  • <audio> – вставка аудио

Атрибуты

Глобальные атрибуты (подходят почти для всех тегов)

  • id – уникальный идентификатор элемента
<div id="header"></div>
  • class – класс элемента (для CSS и JS)
<div class="header"></div>
  • style – встроенные CSS-стили
<div style="color: red;"></div>
  • title – всплывающая подсказка при наведении
<abbr title="HyperText Markup Language">HTML</abbr>
  • hidden - скрытие элемента
<p hidden>Этот текст скрыт</p>
  • tabindex – управление порядком переключения клавишей Tab
<input type="text" tabindex="1">
  • data-* – пользовательские атрибуты (часто используются в JavaScript)

Атрибуты для ссылок (<a>)

  • href – адрес ссылки
  • target – способ открытия ссылки
    • _self (по умолчанию) – в том же окне
    • _blank – в новой вкладке
    <a href="https://example.com" target="_blank">Открыть в новой вкладке</a>
  • rel – связь с документом (nofollow, noopener, noreferrer)
<a href="https://example.com" rel="nofollow">Не передавать SEO-ценность</a>

Атрибуты для изображений (<img>)

  • src – путь к изображению
<img src="image.jpg" alt="Описание картинки">
  • alt – текст, который отображается, если изображение не загружено
  • width / height – размеры картинки
<img src="image.jpg" width="200" height="150">

Атрибуты для форм (<form>, <input>, <button>)

  • action – куда отправляются данные
<form action="/submit-form">
  • method – метод передачи (GET, POST)
  • placeholder – текст-подсказка внутри поля ввода
<input type="text" placeholder="Введите имя">
  • required – обязательное поле
  • disabled – делает элемент неактивным
  • readonly – запрещает редактирование, но можно копировать
  • maxlength – ограничение по символам
  • type – тип данных (text, email, password, number, file, date)
<input type="email" required>
  • checked – отмечает чекбокс или радио-кнопку
<input type="checkbox" checked>
  • value – значение по умолчанию
<input type="text" value="По умолчанию">

Атрибуты для кнопок (<button>)

  • type – тип кнопки (submit, reset, button)
  • value – текст кнопки
<button type="submit" value="Отправить">Отправить</button>

Атрибуты для селектов (<select>)

  • multiple – допустимо множественный выбор
<select multiple>
  • size – количество выбранных элементов
<select size="3">
  • name – имя выбранного элемента
<select name="colors">

Атрибуты для таблиц (<table>)

  • border – размер границы таблицы
  • cellpadding – отступ внутри ячеек
  • cellspacing – отступ между ячейками
  • width – ширина таблицы
<table border="1" cellpadding="5" cellspacing="0" width="100%">

Атрибуты для таблиц с ячейками (<tr>, <td>)

  • colspan – количество ячеек в строке
  • rowspan – количество ячеек в столбце
<tr>
    <td colspan="2">Ячейка с colspan="2"</td>
</tr>

Атрибуты для блоков кода (<pre>, <code>)

  • language – язык программирования
<pre language="javascript">
    console.log('Hello, world!');
</pre>

Атрибуты для примеров (<samp>)

  • title – подсказка для элемента
<samp title="Пример текста">Пример текста</samp>

Атрибуты для цитат (<blockquote>)

  • cite – источник цитаты
<blockquote cite="https://example.com">
    Это цитата из сайта example.com
</blockquote>