Документация по HTML
Краткий справочник по HTML с примерами. Прочитай концепцию, посмотри код, а затем потренируйся в курсе Coddy.
Начать пошаговый курс по HTMLНачало работы
- Doctype`<!DOCTYPE html>` стоит в первой строке каждого HTML-документа. Он говорит браузеру отображать страницу в стандартном режиме, а не в режиме совместимости (quirks mode). Разберем синтаксис, что включают старые doctype и как проверить режим.
- Теги HTMLТеги HTML размечают содержимое, чтобы браузер понимал, что есть что: заголовок, абзац, ссылка, картинка. Разберем, как устроены теги и элементы, у каких тегов нет закрывающего тега, как работает вложенность и какие теги нужны чаще всего.
- Атрибуты HTMLАтрибуты добавляют элементу HTML информацию: куда ведет ссылка, что показывает картинка, какой класс CSS применяется. Разберем синтаксис, глобальные атрибуты любого элемента, class и id, логические атрибуты и атрибуты data-*.
- Комментарии HTMLКомментарий HTML это текст между <!-- и -->, который браузер не показывает. Разберем синтаксис, многострочные комментарии, как закомментировать код, горячую клавишу редактора, почему комментарии нельзя вкладывать и почему они никогда не бывают скрытыми.
- Тег divТег <div> это универсальный блочный контейнер без собственного смысла. Разберем, как группировать им содержимое, стилизовать через класс, строить раскладки из div и flexbox, и когда лучше подойдет семантический тег или кнопка.
- Тег spanТег <span> это универсальный строчный контейнер: он оборачивает несколько слов внутри строки, чтобы их можно было стилизовать или обработать скриптом, не разрывая строку. Разберем, как его использовать, чем он отличается от div и когда лучше подходит более конкретный тег.
Текст
- Заголовки HTMLВ HTML шесть уровней заголовков, от <h1> до <h6>, и они образуют структуру страницы. Разберем размеры по умолчанию, порядок заголовков, сколько тегов h1 использовать, как изменить размер через CSS и как заголовками пользуются программы чтения с экрана.
- Перенос строкиТег <br> начинает новую строку внутри блока текста. Разберем, когда <br> уместен, а когда лучше абзац, как сохранить переносы строк из текста, как разрешить перенос длинных слов через <wbr> и как запретить перенос строки.
- Пробел в HTMLБраузер схлопывает любую серию пробелов в HTML в один. Разберем, как добавить лишние пробелы через , что делает неразрывный пробел, как сохранить пробелы и табуляцию через <pre> и white-space и когда лучше подходят отступы CSS.
- Жирный и курсивЖирный текст в HTML делают через <strong> или <b>, курсив через <em> или <i>. Разберем, какой тег когда использовать, как совместить жирный и курсив и как сделать текст жирным или курсивным через CSS.
- ПодчеркиваниеПодчеркнуть текст в HTML можно через <u> или CSS text-decoration, а зачеркнуть через <s> или <del>. Разберем, что означает каждый тег, как <ins> и <del> отмечают правки и почему подчеркнутый текст, который не является ссылкой, сбивает читателей с толку.
- Верхний индексВерхний индекс пишут через <sup>, нижний через <sub>: степени, порядковые окончания, сноски и химические формулы. Разберем типичные применения, как не дать им раздвигать строки и когда лучше подходят символы Unicode или MathML.
- Горизонтальная линияГоризонтальную линию в HTML рисует тег <hr>. Разберем, что он означает, как изменить его цвет, толщину, ширину и стиль через CSS, как сделать разделитель с текстом посередине и как нарисовать вертикальную линию.
- Текст по центруТекст в HTML выравнивают по центру CSS-свойством text-align: center. Разберем, куда его ставить, почему оно не работает у span, как отцентрировать текст по вертикали, как выровнять текст по началу, концу или ширине и как сделать отступ абзаца.
Ссылки и изображения
- Ссылки (a href)Как элемент <a> создает ссылки: атрибут href, абсолютные и относительные URL, переход к разделу страницы через #id, ссылки на скачивание, ссылки-карточки и ошибки, которые их ломают.
- Ссылка в новой вкладкеДобавьте ссылке target="_blank", и она откроется в новой вкладке. На этой странице: rel="noopener" и noreferrer, как предупредить пользователей о новой вкладке, другие значения target и открытие вкладки из JavaScript.
- Ссылка mailtoКак сделать ссылку, которая открывает новое письмо через href="mailto:", заполнить тему, текст, копию и скрытую копию, правильно их закодировать и сделать ссылки для звонка через tel: и sms:.
- Кнопка как ссылкаПравильный способ сделать кнопку, которая ведет на другую страницу, это ссылка, оформленная как кнопка. Разберем, почему кнопка внутри ссылки и переход через onclick ломаются, когда уместна кнопка формы и как оформлять и отключать ссылки-кнопки.
- Картинки в HTMLКак вставить изображение в HTML тегом <img>: src и alt, размер картинки через width и height, адаптивные изображения, обрезка через object-fit, подписи через figure, ленивая загрузка и зазор под картинками.
Списки и таблицы
- Списки в HTMLКак делать списки в HTML: маркированный список через <ul>, нумерованный через <ol> (start, reversed, буквы и римские цифры), вложенные списки, списки определений и оформление или удаление маркеров через CSS.
- Таблицы в HTMLКак сделать таблицу в HTML: строки через <tr>, ячейки через <td>, ячейки заголовков через <th> и scope, подписи, thead, tbody и tfoot, полосатые строки и таблицы, которые прокручиваются на маленьких экранах.
- Рамка таблицыКак добавить рамку таблице HTML через CSS: одинарные линии через border-collapse, border-spacing, только горизонтальные линии, только внутренние рамки, скругленные углы и почему атрибут border устарел.
- Colspan и rowspanОбъединяйте ячейки таблицы по столбцам через colspan и по строкам через rowspan. Разберем, как считать ячейки, чтобы таблица оставалась ровной, как строить сгруппированные заголовки и как сделать таблицу с объединениями понятной программам чтения с экрана.
Формы
- Формы в HTMLКак сделать форму в HTML: элемент form, атрибуты name, action и method (GET и POST), группировка через fieldset и legend, встроенная валидация через required и pattern и обработка отправки в JavaScript.
- Типы inputВсе типы тега <input> в одном месте: text, email, password, number, range, дата и время, color, file, hidden и остальные, с тем, что каждый проверяет, какую клавиатуру открывает на телефоне и какие атрибуты у них общие.
- Кнопка в HTMLКак сделать кнопку в HTML элементом <button>: три типа (submit, button, reset), отправка значения вместе с формой, неактивные кнопки, иконки и стили CSS, которые сохраняют рамку фокуса.
- ЧекбоксКак сделать чекбокс в HTML через <input type="checkbox">: подписи, атрибут checked, что отправляет форма, когда флажок отмечен и когда нет, группы чекбоксов, «выбрать все» с состоянием indeterminate и оформление.
- РадиокнопкаКак работают радиокнопки в HTML: группировка через атрибут name, выбор по умолчанию через checked, обязательные группы, чтение выбранного значения в JavaScript, поведение клавиатуры и оформление в виде своих кружков или карточек.
- Выпадающий списокКак сделать выпадающий список в HTML через <select> и <option>: значения, вариант по умолчанию или заглушка, required, группы вариантов, множественный выбор, чтение и установка значения в JavaScript и оформление стрелки.
- TextareaКак сделать многострочное текстовое поле через <textarea>: rows и cols, текст по умолчанию между тегами, изменение размера и автоматический рост, maxlength со счетчиком символов, переносы строк в отправленном тексте и оформление.
- LabelКак элемент <label> дает имя полю формы: связь через for и id или через обертывание, увеличенная область клика для чекбоксов и радиокнопок, подсказки и сообщения об ошибках, скрытые подписи и ошибки, которые разрывают связь.
Семантический HTML
- Семантический HTMLСемантический HTML означает выбирать теги по тому, чем является содержимое, а не по тому, как оно выглядит. Разберем семантические теги разметки (header, nav, main, article, aside, footer), что они дают программам чтения с экрана и поисковикам и как проверить структуру страницы.
- Тег headerЭлемент <header> содержит вступление страницы или раздела: логотип, заголовок, навигацию, подпись автора. Разберем, как сделать шапку сайта, чем <header> отличается от <head> и заголовков, как использовать его внутри статей и как закрепить его при прокрутке.
- Тег footerЭлемент <footer> завершает страницу или раздел: копирайт, контакты, ссылки, сведения об авторе. Разберем, как сделать подвал сайта со столбцами ссылок, как прижать его к низу короткой страницы и как работают подвалы внутри статей.
- Тег navЭлемент <nav> отмечает блок основных навигационных ссылок. Разберем, как сделать панель навигации из <nav> и списка, как отметить текущую страницу, как подписать несколько nav на одной странице и как сделать кнопку мобильного меню.
- Тег sectionЭлемент <section> группирует содержимое на одну тему под собственным заголовком. Разберем, когда использовать <section>, когда лучше подходит <article> или <div>, как они вкладываются друг в друга и как подписанный раздел становится ориентиром.
Head и метатеги
- Тег titleЭлемент <title> называет страницу на вкладке браузера, в закладках и в результатах поиска. Разберем, где он стоит, какой длины должен быть, чем отличается от <h1> и атрибута title и как изменить его через JavaScript.
- Meta viewportМета-тег viewport говорит телефонам строить раскладку страницы по ширине экрана, а не по ширине компьютера. Разберем стандартный тег, что делает каждое значение, почему от него зависит адаптивный CSS и каких значений избегать.
- РедиректПеренаправить одну страницу на другую можно мета-тегом refresh в обычном HTML, через JavaScript или на сервере. Разберем синтаксис meta refresh, автоматическое обновление страницы, почему серверный 301 редирект лучше и что поисковики делают с каждым вариантом.
- FaviconFavicon это маленькая иконка на вкладке браузера. Разберем тег link, который ее добавляет, какие файлы и размеры нужны (ICO, SVG, PNG, apple-touch-icon), как сделать favicon из SVG или эмодзи, как менять его через JavaScript и почему продолжает показываться старый.
- Атрибут langАтрибут lang сообщает браузерам, программам чтения с экрана и переводчикам, на каком языке написано содержимое. Разберем, куда его ставить, какие коды использовать (en, ru, en-US, pt-BR), как отметить фразу на другом языке и что он меняет визуально.
Медиа и интерактивные элементы
- Тег iframeЭлемент <iframe> показывает другую веб-страницу внутри вашей. Разберем нужные атрибуты (src, title, width, height), как встроить видео YouTube и карты, как сделать iframe адаптивным, как sandbox ограничивает его возможности и почему некоторые сайты отказываются в нем загружаться.
- Видео в HTMLЭлемент <video> воспроизводит видеофайлы встроенным плеером браузера. Разберем разметку, важные атрибуты (controls, autoplay, muted, loop, playsinline, poster, preload), запасные форматы через <source>, субтитры через <track>, адаптивный размер и управление воспроизведением из JavaScript.
- Аудио в HTMLЭлемент <audio> воспроизводит звуковые файлы встроенным плеером браузера. Разберем разметку, атрибуты (controls, autoplay, loop, muted, preload), какие форматы использовать, почему блокируется автовоспроизведение со звуком и как сделать свою кнопку воспроизведения на JavaScript.
- Details и summaryЭлементы <details> и <summary> создают раскрывающийся блок без JavaScript: summary видна всегда, а клик по ней показывает или скрывает остальное. Разберем разметку, атрибуты open и name, аккордеоны, оформление стрелки и событие toggle.
