Минимальный каркас документа
Любая страница начинается с объявления типа документа и четырёх обязательных элементов.
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовок вкладки</title>
</head>
<body>
<h1>Заголовок страницы</h1>
</body>
</html>| Элемент | Назначение |
|---|---|
<!DOCTYPE html> | Сообщает браузеру, что это HTML5 (режим стандартов) |
<html lang="ru"> | Корневой элемент; lang важен для скринридеров и поиска |
<meta charset> | Кодировка — без неё «поедут» русские буквы |
<meta name="viewport"> | Ключевой тег для мобильных устройств |
Важно: без
<meta name="viewport"> мобильный браузер откроет страницу
в «виртуальном окне» шириной ~980 px и просто уменьшит её. Все медиазапросы при этом работать не будут.
Живой редактор разметки
Меняйте HTML слева — результат справа обновится автоматически. Код выполняется в изолированном
iframe, поэтому экспериментировать безопасно.
HTML
Результат
Блочные и строчные элементы
Блочные (block)
Занимают всю ширину родителя, начинаются с новой строки:
<div>, <p>, <h1>…<h6>,
<ul>, <section>, <article>.
Строчные (inline)
Занимают ширину по содержимому, идут в потоке текста:
<span>, <a>, <strong>,
<em>, <code>, <img>.
Управлять поведением можно через CSS-свойство
display:
block, inline, inline-block, flex, grid, none.
Задание для самостоятельной работы
- В редакторе выше добавьте блок
<header>с заголовком первого уровня. - Оберните список в
<nav>, а каждый пункт сделайте ссылкой<a>. - Добавьте
<footer>с вашим именем и годом. - Проверьте результат валидатором W3C и исправьте найденные ошибки.
Дополнительно: сравните, как выглядит страница с <div class="header">
и с <header>. Разница визуально нулевая, но для поисковых систем
и скринридеров она принципиальна.