Предисловие
Для вашего удобства текстовый курс перенесен на отдельную платформу. Ссылка для поступления: тык
Мы настоятельно рекомендуем пользоваться именно этой платформой по ходу курса. Ссылка на текущее занятие: тык
⚠️Прежде чем переходить к заданиям - обязательно зарегистрируйтесь на курс. Иначе вас закинет на общий поток и вы не сможете взаимодействовать с сверстниками во втором модуле курса. Это не смертельно и вполне решаемо, но тем не менее.
Базовый HTML: структура, теги, блочные и строчные элементы, семантика
Что такое HTML
HTML расшифровывается как HyperText Markup Language, «язык разметки гипертекста». Это не язык программирования: в нём нет переменных, условий и циклов. HTML описывает, из чего состоит страница: где заголовок, где абзац, где картинка, а где ссылка на другую страницу.
Разметка выглядит как обычный текст, в который вставлены теги — имена в угловых скобках. Тег сообщает браузеру, чем является кусок текста рядом с ним.
Так выглядит текст без разметки:
Каталог
Ноутбуки и аксессуары для учёбы.
Смотреть товары
А так — тот же текст с разметкой:
<h1>Каталог</h1>
<p>Ноутбуки и аксессуары для учёбы.</p>
<a href="catalog.html">Смотреть товары</a>
Нажмите «Показать результат» под примером, чтобы увидеть, как браузер отобразит эту разметку. Такая кнопка будет у многих примеров в курсе.
Теперь браузер знает, что первая строка — заголовок первого уровня, вторая — абзац, а третья — ссылка, которая ведёт на страницу catalog.html. Он покажет заголовок крупно, абзац отдельной строкой, а ссылку сделает кликабельной.
HTML-документ хранится в файле с расширением .html. Браузер читает этот файл, строит из него страницу и показывает результат. Главная страница папки по соглашению называется index.html: именно её сервер отдаёт, когда адрес заканчивается на /.
Почитать ещё
Скелет документа
У любого HTML-документа одна и та же основа. Её создаёт заготовка VS Code по ! + Tab, и её же вы будете видеть в каждом проекте:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Каталог товаров</title>
</head>
<body>
<h1>Каталог</h1>
<p>Здесь будет список товаров.</p>
</body>
</html>
<!DOCTYPE html>— объявление, а не тег. Оно сообщает браузеру, что документ написан на современном HTML. Без него браузер включает режим совместимости со старыми сайтами и рисует страницу по устаревшим правилам. Эта строка всегда первая в файле.<html>— корневой элемент. Всё содержимое документа находится внутри него. Атрибутlang="ru"сообщает язык страницы: от него зависят переносы слов, проверка орфографии в полях и то, каким голосом страницу прочитает программа экранного доступа.<head>— служебная часть. Её содержимое не показывается на странице, но нужно браузеру и поисковикам.<body>— всё, что видит пользователь.
Внутри <html> всегда ровно два элемента: сначала <head>, потом <body>. Текст и теги за пределами <body> на странице не показываются.
Почитать ещё
Дока:
<!DOCTYPE>,<html>
head: что лежит в служебной части
В <head> находится всё, что описывает документ, но не является его содержимым. В учебном проекте там будут четыре вида элементов.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Каталог ноутбуков и аксессуаров для студентов" />
<title>Каталог товаров — Магазин ITAM</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<meta charset="UTF-8" />задаёт кодировку текста. Если её убрать, русские буквы на странице могут превратиться в набор символов вродепривет.<meta name="viewport" ...>просит мобильный браузер подстроить ширину страницы под экран телефона, а не показывать уменьшенную копию десктопной версии.<meta name="description" ...>содержит короткое описание страницы. Поисковики показывают его под заголовком в результатах поиска.<title>задаёт название страницы. Оно отображается на вкладке браузера, в закладках и в результатах поиска.<link rel="stylesheet" href="style.css" />подключает файл со стилями. Мы займёмся им на следующем занятии.<script src="script.js">подключает файл с JavaScript. Он понадобится с четвёртого занятия.
Порядок элементов в <head> почти не важен. Единственное правило: <meta charset> ставят первым, чтобы браузер узнал кодировку до того, как начнёт читать текст.
Почитать ещё
Дока:
<head>,<meta>,<title>,<link>
body: содержимое страницы
В <body> находится всё, что пользователь видит и с чем взаимодействует: текст, картинки, ссылки, кнопки, формы.
<body>
<h1>Каталог</h1>
<p>Ноутбуки и аксессуары для учёбы.</p>
<img src="https://picsum.photos/seed/laptop/320/200" alt="Ноутбук с открытой крышкой" />
<!-- Этот комментарий браузер не покажет -->
</body>
Браузер выводит элементы в том порядке, в котором они записаны в файле. Заголовок появится первым, абзац вторым, картинка третьей.
Пробелы и переносы строк внутри <body> браузер не сохраняет. Несколько пробелов подряд, табуляции и переносы он превращает в один пробел. Поэтому отступы в коде нужны только людям: они делают вложенность видимой, а на страницу не влияют. Абзацы и переносы задают тегами, а не пустыми строками.
Комментарий записывается как <!-- текст -->. Браузер не показывает его на странице, но он остаётся в файле, который получает пользователь. Любой посетитель может открыть исходный код страницы и прочитать комментарии, поэтому в них не оставляют пароли и служебные данные.
Почитать ещё
Дока:
<body>, Комментарии в HTML
Теги, элементы и вложенность
Тег — это имя в угловых скобках: <p>. Элемент — это открывающий тег, содержимое и закрывающий тег вместе:
<p>Это абзац. Тег p открылся, дальше идёт текст, потом тег p закрылся.</p>
Закрывающий тег отличается от открывающего косой чертой: </p>. Внутри элемента может быть текст, другие элементы или и то и другое:
<p>Ноутбук <strong>Laptop 14</strong> подходит для учёбы.</p>
Здесь элемент <strong> вложен в элемент <p>. Вложенные элементы образуют дерево: у каждого элемента есть родитель и могут быть дети.
При вложенности действует одно правило: элемент, который открылся последним, закрывается первым.
<!-- Правильно: strong открылся внутри p и закрылся внутри p -->
<p>Это <strong>важно</strong>.</p>
<!-- Неправильно: strong открылся внутри p, а закрылся снаружи -->
<p>Это <strong>важно.</p></strong>
Браузер не сообщает об ошибках в разметке. Встретив неправильную вложенность или незакрытый тег, он молча исправляет документ по своим правилам. Иногда результат совпадает с задуманным, иногда нет: элементы оказываются не в том месте, а стили и скрипты перестают работать. Поэтому неправильную разметку стоит считать ошибкой, даже если страница выглядит нормально.
Проверить разметку можно двумя способами. Вкладка Elements в DevTools показывает дерево, которое построил браузер: если оно отличается от файла, где-то есть ошибка. Валидатор W3C перечисляет все проблемы в документе с номерами строк.
Почитать ещё
Парные и одиночные теги
Большинство тегов парные: у них есть открывающий и закрывающий тег, а между ними содержимое.
<h2>Ноутбуки</h2>
<p>Лёгкие модели для учёбы и работы.</p>
<a href="catalog.html">Каталог</a>
<ul>
<li>16 ГБ памяти</li>
</ul>
Некоторые элементы не могут иметь содержимого, и закрывающего тега у них нет. Такие теги называют одиночными или пустыми:
<img src="https://picsum.photos/seed/laptop/320/200" alt="Ноутбук" />
<br />
<hr />
<input type="text" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<img>вставляет картинку. Её содержимое — файл по адресу изsrc, поэтому внутри тега ничего нет.<br>переносит строку.<hr>рисует горизонтальную линию между частями текста.<input>создаёт поле ввода. Формы мы разберём на следующем занятии.<meta>и<link>находятся в<head>и описывают документ.
Косую черту в конце одиночного тега (<img />) писать не обязательно: браузер одинаково понимает <img> и <img />. В этом курсе мы пишем её, потому что так делает форматировщик кода и так одиночный тег легче отличить от незакрытого парного.
Если написать закрывающий тег у одиночного элемента, например </img>, браузер его проигнорирует, а валидатор отметит как ошибку.
Почитать ещё
Дока:
<img>,<br>,<hr>
Блочные и строчные элементы
Элементы по-разному ведут себя в потоке страницы, и по этому признаку их делят на две группы.
Блочные элементы начинаются с новой строки и занимают всю доступную ширину. Следующий элемент после блочного тоже начнётся с новой строки. К блочным относятся <h1>–<h6>, <p>, <div>, <ul>, <ol>, <li>, <table>, <form>, <header>, <main>, <section>, <footer>.
Строчные элементы находятся внутри строки текста и занимают ровно столько места, сколько нужно их содержимому. Они не переносят текст на новую строку. К строчным относятся <a>, <span>, <strong>, <em>, <img>, <input>, <button>.
<p>Ноутбук <strong>Laptop 14</strong> стоит <span>89 990 ₽</span>. <a href="#order">Как заказать</a></p>
<p>Этот абзац начнётся с новой строки, потому что p — блочный элемент.</p>
<h2 id="order">Как заказать</h2>
<p>Напишите нам на почту, и мы отправим счёт.</p>
В первом абзаце <strong>, <span> и <a> остаются внутри строки. Второй абзац и заголовок начинаются с новой строки. Ссылка ведёт на заголовок с id="order" на этой же странице.
Из этого деления следуют правила вложенности:
в блочный элемент можно вкладывать и блочные, и строчные элементы;
в строчный элемент вкладывают только строчные.
<span>внутри<div>— правильно,<div>внутри<span>— ошибка;внутри
<p>не может быть блочных элементов. Если написать<div>внутри<p>, браузер закроет абзац перед<div>, и дерево получится не таким, как в файле.
Блочное или строчное поведение задано для каждого элемента по умолчанию. CSS-свойство display может его изменить: например, выстроить пункты <li> в одну строку для меню. Этим мы займёмся на следующем занятии.
Почитать ещё
Дока:
display
Какие теги бывают и как выбрать нужный
В HTML больше ста тегов, но в повседневной вёрстке используется около двадцати. Их удобно разделить на группы по назначению.
Группа | Теги | Для чего |
|---|---|---|
Заголовки |
| Заголовки шести уровней. |
Текст |
| Абзац, важный текст, смысловое ударение, перенос строки |
Списки |
| Ненумерованный список, нумерованный список, пункт списка |
Ссылки и картинки |
| Переход по адресу, изображение |
Таблицы |
| Таблица, строка, ячейка-заголовок, обычная ячейка |
Формы |
| Ввод данных. Подробно на следующем занятии |
Контейнеры |
| Группировка элементов без собственного смысла |
Разделы страницы |
| Смысловые части страницы. Подробно в разделе о семантике |
Чтобы выбрать тег, нужно ответить на вопрос «что это за содержимое?».
Это название раздела? Тогда заголовок нужного уровня.
Это несколько однородных пунктов? Тогда список:
<ol>, если порядок важен, и<ul>, если нет.Это переход на другую страницу или к другому месту на этой? Тогда
<a>.Это данные в строках и столбцах, которые сравнивают между собой? Тогда
<table>.Это просто группа элементов, которую нужно оформить или обработать вместе, и подходящего по смыслу тега нет? Тогда
<div>для блока или<span>для куска строки.
Тег выбирают по смыслу, а не по внешнему виду. Заголовок <h3> не становится подходящим тегом для цены только потому, что цену хочется показать крупно. Размер и цвет задаёт CSS, а тег описывает, чем является содержимое.
<h2>Ноутбуки</h2>
<ul>
<li>16 ГБ памяти</li>
<li>Экран 14 дюймов</li>
</ul>
<ol>
<li>Добавьте товар в корзину</li>
<li>Укажите адрес доставки</li>
<li>Оплатите заказ</li>
</ol>
<table>
<tr>
<th>Модель</th>
<th>Цена</th>
</tr>
<tr>
<td>Laptop 14</td>
<td>89 990 ₽</td>
</tr>
</table>
Внутри <ul> и <ol> могут находиться только <li>. Внутри <li> может быть что угодно, включая ещё один список. Таблицы используют для табличных данных: прайс-листов, расписаний, сравнений. Раскладывать таблицей всю страницу на колонки нельзя, для этого есть CSS.
Почитать ещё
Атрибуты
Атрибуты уточняют, как работает элемент. Их записывают в открывающем теге в виде имя="значение". У одного элемента может быть несколько атрибутов, их разделяют пробелами.
<a href="https://itam.misis.ru/" target="_blank" class="link" id="itam-link">ITAM</a>
<img src="https://picsum.photos/seed/laptop/320/200" alt="Ноутбук с открытой крышкой на столе" width="320" />
<img src="images/missing.jpg" alt="Картинка не загрузилась, и браузер показал этот текст" />
Вторая картинка ссылается на файл, которого нет. Браузер не смог её загрузить и показал текст из alt.
Значение атрибута записывают в кавычках, двойных или одинарных. Имена тегов и атрибутов пишут строчными буквами.
Часть атрибутов работает только с определёнными тегами:
hrefу<a>задаёт адрес, куда ведёт ссылка. Адрес может быть полным (https://doka.guide/), относительным (catalog.html— файл в той же папке) или якорем (#contacts— элемент сid="contacts"на этой же странице).target="_blank"у<a>открывает ссылку в новой вкладке.srcу<img>задаёт адрес картинки.altу<img>содержит текст, который заменяет картинку: его читают программы экранного доступа, показывает браузер, если картинка не загрузилась, и учитывают поисковики. Пустое значениеalt=""допустимо для декоративных картинок, которые не несут информации.widthиheightу<img>задают размеры в пикселях.
Другие атрибуты можно поставить на любой элемент, их называют глобальными:
Атрибут | Для чего |
|---|---|
| Метка, по которой элемент находят из CSS и JavaScript. Классов может быть несколько, их перечисляют через пробел: |
| Уникальное имя элемента. Одно значение |
| Подсказка, которая появляется при наведении курсора. |
| Язык содержимого элемента, если он отличается от языка страницы. |
| Прячет элемент. |
| Произвольные данные для JavaScript, например |
Некоторые атрибуты не имеют значения. Их называют логическими: если атрибут записан, он включён, если нет — выключен. К ним относятся hidden, disabled, required, checked.
<button disabled>Нет в наличии</button>
<p hidden>Этот текст не виден</p>
Почитать ещё
Дока: Глобальные атрибуты,
class,data-*,altMDN: Глобальные атрибуты
Семантика тегов
Семантика тега — это его смысл: что за содержимое находится внутри. <h1> означает главный заголовок, <nav> означает навигацию, <article> означает самостоятельный материал. У <div> и <span> смысла нет, они только группируют.
Сравним две разметки одной страницы.
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">
<div class="card">...</div>
<div class="card">...</div>
</div>
<div class="footer">...</div>
<header>
<nav>...</nav>
</header>
<main>
<article class="card">...</article>
<article class="card">...</article>
</main>
<footer>...</footer>
В браузере обе версии выглядят одинаково. Разница в том, кто ещё читает разметку. Разработчик, который открыл файл, сразу видит структуру страницы во второй версии. Программа экранного доступа позволяет незрячему пользователю перейти сразу к навигации или к основному содержимому, потому что знает, где они. Поисковик понимает, какая часть страницы главная, а какая служебная.
Основные семантические теги для разделов страницы:
Тег | Что внутри |
|---|---|
| Шапка страницы или раздела: логотип, название, навигация |
| Навигация: главное меню, хлебные крошки |
| Главное содержимое страницы. На странице только один |
| Смысловой раздел, у которого есть заголовок |
| Самостоятельная единица содержимого: карточка товара, новость, комментарий. Её можно перенести на другую страницу, и она сохранит смысл |
| Дополнительное содержимое: боковая панель, блок «читайте также» |
| Подвал страницы или раздела: контакты, копирайт |
Есть и семантические теги для более мелких элементов: <figure> с <figcaption> для картинки с подписью, <time> для даты и времени, <address> для контактной информации.
Семантический тег выбирают по смыслу, а не для красоты. <article> вокруг одной кнопки хуже, чем <div>. Если содержимое не подходит ни под один семантический тег, <div> — правильный выбор, и в настоящих проектах таких <div> много.
Почитать ещё
Дока: Семантика,
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>
Зачем нужен SEO
SEO расшифровывается как Search Engine Optimization, «оптимизация для поисковых систем». Это набор приёмов, которые помогают поисковику понять, о чём страница, и показать её людям, которые ищут такую информацию.
Поисковик не смотрит на страницу глазами. Его программа читает HTML и делает выводы из разметки. Поэтому качество разметки напрямую влияет на то, найдут ли страницу.
Что учитывает поисковик:
<title>— главный сигнал о теме страницы. Он же становится заголовком результата в поиске. «Каталог ноутбуков — Магазин ITAM» работает лучше, чем «Главная».<meta name="description">— описание, которое показывается под заголовком в результатах поиска.Заголовки
<h1>–<h6>— структура страницы. Один<h1>с темой страницы и последовательные уровни ниже помогают понять, что на странице главное.altу картинок — единственный способ для поисковика узнать, что на изображении.Семантические теги — показывают, где основное содержимое, а где навигация и подвал.
lang— язык страницы, чтобы показывать её пользователям с подходящим языком.Текст ссылок — «Смотреть каталог ноутбуков» говорит поисковику больше, чем «нажмите здесь».
Всё это вы уже делаете, если пишете правильный HTML. Отдельные приёмы вроде подбора ключевых слов относятся к работе маркетологов, а задача разработчика — сделать так, чтобы разметка честно описывала содержимое.
Те же самые вещи улучшают доступность страницы: программы экранного доступа используют заголовки, alt и семантические теги так же, как поисковики. Правильная разметка решает обе задачи сразу.
Почитать ещё
Дока: SEO для начинающих
DOM: документ как дерево
Когда браузер читает HTML-файл, он строит из него структуру в памяти, где каждый элемент знает своего родителя, детей и соседей. Эта структура называется DOM, Document Object Model.
Для документа из раздела о семантике дерево выглядит так:
html
├── head
│ ├── meta
│ └── title
└── body
├── header
│ └── nav
├── main
│ ├── article
│ └── article
└── footer
html — корень дерева. head и body — его дети. header, main и footer — дети body и соседи друг для друга. Два article — дети main.
Посмотреть DOM можно во вкладке Elements в DevTools. Ветки дерева раскрываются и сворачиваются, при наведении на элемент браузер подсвечивает его место на странице. Там же можно временно изменить текст или удалить элемент и сразу увидеть результат. После обновления страницы изменения исчезают, потому что они затрагивают только копию в памяти, а не файл.
DOM отличается от файла в двух случаях. Если в файле ошибка, браузер исправляет её при построении дерева, и в DOM оказывается исправленная версия. Если на странице работает JavaScript, он может добавлять и удалять элементы, и они появляются в DOM, но не в файле.
На пятом занятии мы будем работать с DOM из JavaScript: находить элементы в дереве, менять их текст, добавлять новые и удалять старые.
Почитать ещё
Дока: DOM
MDN: Введение в DOM