Перед прочтением необходимо ознакомиться с базовой информацией о структуре HTML-документа, о том, что такое теги и какие они бывают. Рекомендуется ознакомиться с лекцией 1.2 Структура 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>
<!-- Здесь будет содержимое страницы-->
</body>
</html>
Рекомендуется начинать разработку веб-страницы, используя этот шаблон. В этой лекции будет рассмотрено то, как грамотно наполнить страницу содержимым, которое будет видно конечному пользователю сайта.
Для того, чтобы вести повествование более предметно, можно задаться целью сделать сайт-визитку начинающего фронтендера.
Начать стоит с размещения основного содержания страницы. Для того, чтобы его выделить применяется тег <main>.
<main>
Привет, я основной контент! Нахожусь только на этой странице.
</main>
Чтобы понять, что на странице следует обернуть данным тегом, нужно ответить на вопрос: "Что является основной информацей, которая не повторяется ни на каких других страницах сайта?"
На главной странице сайта начинающего фронтендера есть приветственный текст. Он является её основным контентом и на других страницах его не будет. А значит весь этот текст нужно заключить в тег <main>. На внутренних страницах в <main> будет уже другое основное содержимое.
<aside>
☝ Спецификация не допускает использование на одной странице более одного тега <main>, если у них нет специального атрибута hidden. Этот атрибут добавляется HTML-элементу, чтобы менять содержимое страницы, делая видимым тот или иной <main> в разных состояниях приложения.
</aside>
Чтобы страница-прототип выглядела информативнее, и было понятно, как теги вложены друг в друга, на сайт добавлено дополнительное стилевое оформление.
Сайт с дополнительным оформлением
Без оформления на странице был бы виден исключительно текст:
Сайт без дополнительного оформления