Что такое HTML
HTML (HyperText Markup Language, язык гипертекстовой разметки) - язык разметки, которым описывают структуру веб-страницы. Это не язык программирования - в HTML нет циклов, условий и вычислений, только разметка содержимого. Из HTML-элементов состоит любая веб-страница, браузер читает разметку и строит по ней страницу.
HTML - не язык программирования
HTML часто называют языком программирования, хотя это не так. В HTML нельзя написать условие "если", посчитать сумму или организовать цикл - он только описывает, что где находится на странице: заголовок, абзац, картинка, ссылка. За вычисления и логику отвечает JavaScript.
Как устроен HTML
Документ состоит из тегов - парных меток вроде "p" для абзаца или "a" для ссылки, которые открываются и закрываются. У тегов бывают атрибуты - дополнительные свойства, например у ссылки это адрес, куда она ведёт. Теги вкладываются друг в друга, и документ превращается в дерево, где у каждого элемента есть родитель и дочерние элементы - по этому дереву браузер строит страницу.
Из чего состоит документ
У любой HTML-страницы одна и та же основа. В начале - doctype, строка, которая сообщает браузеру, что перед ним HTML5-документ. Дальше идёт корневой тег html с двумя разделами: head хранит метаданные - заголовок вкладки (title), описание для поисковиков (description), подключение стилей и скриптов; body содержит всё, что видит посетитель - тексты, картинки, кнопки, формы.
Семантические теги
У HTML есть смысловые теги - они обозначают роль блока, а не только его вид.
- header. Шапка страницы или раздела.
- nav. Блок навигации, меню.
- main. Основное содержимое страницы, один на документ.
- article. Самостоятельный фрагмент - статья, карточка товара, комментарий.
- section. Тематический раздел страницы.
- footer. Подвал страницы или раздела.
- h1-h6. Заголовки разного уровня, от главного к второстепенным.
Семантика нужна не для внешнего вида - его целиком задаёт CSS, а для того, кто и как читает страницу без картинки. Поисковик по этим тегам понимает, где на странице главное. Программа чтения с экрана даёт незрячему пользователю команду "перейти к навигации" - и это работает, только если теги расставлены верно.
Кто за что отвечает
HTML, CSS и JavaScript решают разные задачи. HTML отвечает за структуру и смысл содержимого. CSS - за внешний вид: цвета, отступы, шрифты, расположение блоков. JavaScript - за поведение: клики, проверку форм, анимации. Оформление, вынесенное в HTML вместо CSS, усложняет правку - чтобы поменять цвет кнопки на всём сайте, придётся редактировать каждую страницу вместо одного файла стилей.
Версия HTML5
Действующий стандарт - HTML5, фиксированных версий вроде HTML4 или XHTML больше нет: спецификацию развивает WHATWG как living standard, обновляется постоянно, без привязки к номеру релиза.
Частые ошибки
- Несколько h1 на странице. Главный заголовок должен быть один, иначе поисковику непонятно, что на странице главное.
- Отсутствие alt у картинок. Без атрибута alt незрячий посетитель не узнает, что на картинке, а поисковик не сможет её распознать.
- Вёрстка таблицами. Раньше таблицы использовали для расположения блоков вместо семантических тегов - это ломает доступность и усложняет адаптивность.
- Незакрытые теги. Браузер часто исправляет ошибку сам, но верстальщик теряет контроль над структурой, и в разных браузерах документ может отображаться по-разному.