11. index.html — эталонная страница

Главная страница. Она эталон: остальные восемь страниц собираются по её образцу. Меняется только содержимое между шапкой и футером. Всё остальное — те же SSI-инклюды, те же скрипты.

Разберём файл сверху вниз, по строкам. Идём от DOCTYPE до закрывающего html.

Разметка целиком

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Цифровая безопасность – Ефимов Андрей Михайлович</title>
  <meta name="description" content="Комплексный аудит, оцифровка." />
  <!--#include virtual="/partials/head-links.html" -->
</head>

<body>
<div class="container">

  <header class="header">
    <!--#include virtual="/partials/header.html" -->
    <!--#include virtual="/partials/nav.html" -->
  </header>

  <section>...</section>
  <section>...</section>
  <section>...</section>

  <!--#include virtual="/partials/footer.html" -->

</div>

<button id="scrollToTopBtn" class="scroll-top-btn" aria-label="Наверх">...</button>

<script src="/script.js"></script>
<script src="/scroll-top.js"></script>
</body>
</html>

Восемнадцать смысловых блоков. Идём по порядку.

Блок 1: DOCTYPE

<!DOCTYPE html>

Первая строка любого HTML5-документа. Сообщает браузеру: «это современный HTML, а не старый XHTML и не Quirks Mode».

Не тег, а объявление. Не имеет закрывающей пары. Не содержит ничего, кроме слова html.

Блок 2: корневой тег

<html lang="ru">
  ...
</html>

Корневой тег документа. Внутри него живёт всё остальное — head и body.

Атрибут lang="ru" — «язык русский». Зачем он нужен:

• Screen-reader выберет правильное произношение — русский голос, а не английский.
• Браузер правильно поставит переносы в словах.
• Поисковики поймут язык страницы — и покажут её тем, кому она релевантна.
• Google Translate не будет предлагать «перевести с русского», если язык уже указан.

Блок 3: секция head

<head>
  ...
</head>

Служебный блок. Всё, что внутри head, не отображается на странице. Это указания браузеру и поисковым роботам:

• какая кодировка у файла,
• как масштабировать на мобильных,
• как назвать вкладку,
• какое описание показывать в поисковой выдаче,
• где брать стили.

Блок 4: кодировка

<meta charset="UTF-8" />

Сообщает браузеру кодировку файла. UTF-8 — универсальная кодировка, поддерживающая все языки мира.

Тег meta — «метаданные». Самозакрывающийся (слеш / в конце). Не имеет содержимого, только атрибуты.

Блок 5: viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Управляет масштабом на мобильных. Разберём по частям:

• name="viewport" — «это про окно просмотра».
• width=device-width — «ширина страницы равна ширине экрана устройства».
• initial-scale=1.0 — «начальный масштаб 100%». Не увеличен, не уменьшен.

Блок 6: заголовок страницы

<title>Цифровая безопасность – Ефимов Андрей Михайлович</title>

Заголовок. Появляется:

• на вкладке браузера,
• в закладках,
• в результатах поиска — как синяя кликабельная ссылка.

Длина до 60 символов — иначе поисковики обрежут. У нас строка длиной 48 символов, помещается с запасом.

Уникален для каждой страницы. На services.html — «Услуги по безопасности…», на contacts.html — «Контакты…». Если на всех страницах одинаковый title — поисковики посчитают страницы дублями и понизят рейтинг.

Блок 7: описание

<meta name="description" content="Комплексный аудит, оцифровка." />

Краткое описание для поисковой выдачи. Не заголовок, а «серый абзац» под синей ссылкой в Яндексе и Google.

Длина 150–160 символов — оптимум. Меньше — выглядит «пусто». Больше — обрежется многоточием.

Уникально для каждой страницы. Поисковики иногда игнорируют description и берут случайный фрагмент текста — но чаще уважают.

Блок 8: SSI-инклюд служебных ресурсов

<!--#include virtual="/partials/head-links.html" -->

SSI-директива. Сервер подставит сюда содержимое файла /partials/head-links.html:

• фавикон,
• og-теги для соцсетей,
• ссылку на style.css,
• ссылку на scroll-top.css.

Все четыре вещи подставляются на все страницы одинаково. Один источник правды, одна строка подключения.

Блок 9: body и контейнер

<body>
<div class="container">
  ...
</div>
</body>

body — всё видимое содержимое страницы. Шапка, текст, картинки, кнопки. Всё, что видит пользователь, живёт внутри body.

div class="container" — обёртка, ограничивающая ширину контента. По стилям из style.css:

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

Всё внутри контейнера живёт в «столбике» шириной 1100 пикселей, по центру окна.

Блок 10: шапка сайта

<header class="header">
  <!--#include virtual="/partials/header.html" -->
  <!--#include virtual="/partials/nav.html" -->
</header>

Шапка собирается из двух partials:

• header.html — логотип «Е», заголовок, кнопка-бургер.
• nav.html — меню из шести ссылок.

Обратите внимание: тег header в самой странице, а не в partials. Это сделано специально: между открывающим и закрывающим тегом вставляется два SSI-инклюда.

Было в HTML:

  header
    [SSI: header.html]
    [SSI: nav.html]
  /header

После обработки сервером:

  header
    div class="header-left" ... Е ...
    button class="burger" ...
    nav class="nav"
      a href="/index.html" Главная
      ...
    /nav
  /header

Блоки 11–13: три секции с контентом

Между шапкой и футером — уникальный контент главной страницы. Три секции:

<section>
  <h2 class="hero-title">
    Безопасность, которая не пылится в столах,
    а работает как IT-продукт
  </h2>
  <p class="text-block hero-lead">
    Комплексный аудит, оцифровка регламентов
    и защита от блокировок.
  </p>
  <a href="/contacts.html" class="btn">Получить консультацию</a>
</section>

<section>
  <h3 class="section-subtitle">Проблемы, которые я решаю</h3>
  <ul>
    <li><strong>Риски экономической безопасности</strong> – ...</li>
    ...
  </ul>
</section>

<section>
  <div class="cta-block">
    <strong>Хотите обсудить ваш проект?</strong><br />
    Свяжитесь со мной.
  </div>
</section>

Разберём каждую секцию.

Секция 1: главный экран

section — семантический тег. «Это смысловая секция страницы». Браузер и поисковики понимают: внутри — тематически связанный блок.

h2 class="hero-title" — заголовок второго уровня с классом-модификатором. По семантике должен быть h1? Нет. У нас в шапке уже есть h1 «Ефимов Андрей Михайлович» (в partials/header.html). По правилам семантики на странице должен быть один h1. И он уже есть — это имя владельца сайта. Поэтому в секциях — h2 и глубже.

br внутри h2 — принудительный перенос строки. Заголовок будет в две строки:

Без br:

  «Безопасность, которая не пылится в столах, а работает как IT-продукт»
  - одна длинная строка, которая может разбиться в неожиданном месте

С br:

  «Безопасность, которая не пылится в столах,
   а работает как IT-продукт»
  - две строки, разрыв в нужном месте

p class="text-block hero-lead" — лид-абзац. Два класса через пробел: text-block (общий стиль абзаца с красной строкой) и hero-lead (увеличенный размер шрифта). Оба класса суммируются.

a href="/contacts.html" class="btn" — ссылка-кнопка. Визуально кнопка (за счёт класса .btn), семантически ссылка (тег a). Правильно: клик ведёт на другую страницу, а не выполняет действие. Для действия использовали бы button.

Секция 2: список проблем

h3 class="section-subtitle" — заголовок третьего уровня. Класс section-subtitle даёт синюю полосу слева — визуальный маркер крупного раздела.

ul со списком li — неупорядоченный список. Каждый пункт — отдельный li. Внутри — strong выделяет первую фразу.

Секция 3: CTA-блок

div class="cta-block" — не section, а div. Почему? Потому что смысловой блок — внутри секции. Если бы CTA был самостоятельной секцией, он заслужил бы свой section. А здесь — компактная врезка в конце. div — подходящий «нейтральный контейнер».

strong — семантически «важно». Не для жирности (жирность задаёт CSS), а для смысла. Screen-reader произнесёт текст с интонацией.

Блок 14: SSI-инклюд футера

<!--#include virtual="/partials/footer.html" -->

Футер подключается одной строкой. Внутрь вставляется всё: реквизиты ИП, банковские данные, копирайт, ссылка на политику 152-ФЗ, код Яндекс.Метрики.

Футер находится внутри контейнера — потому что он должен быть ограничен той же шириной 1100 пикселей, что и остальной контент.

Блок 15: кнопка «Наверх»

<button id="scrollToTopBtn" class="scroll-top-btn" aria-label="Наверх">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <polyline points="18 15 12 9 6 15" />
  </svg>
</button>

Кнопка «Наверх» — вне контейнера. Почему? Потому что она позиционируется фиксированно (position: fixed) в правом нижнем углу окна, независимо от содержимого.

Разберём атрибуты:

• id="scrollToTopBtn" — уникальный идентификатор. По нему JavaScript находит кнопку и вешает обработчики.
• class="scroll-top-btn" — класс для стилизации. Стили живут в scroll-top.css.
• aria-label="Наверх" — для screen-reader. Пользователь услышит «Наверх, кнопка», а не «пустая кнопка с иконкой».

Атрибуты SVG:

• viewBox="0 0 24 24" — «внутренняя система координат». Все точки SVG задаются в квадрате 24×24.
• fill="none" — «не заливать». Стрелка — это контур, а не заливка.
• stroke="currentColor" — «цвет контура = текущий цвет текста».
• stroke-width="2" — толщина линии.
• stroke-linecap="round" — закруглённые концы линий.
• stroke-linejoin="round" — закруглённые углы соединения линий.

polyline points="18 15 12 9 6 15" — сама стрелка. Три точки в системе координат: (18, 15) → (12, 9) → (6, 15). Линия идёт «вверх-влево, вниз-влево». Получается «галочка» вверх — стрелка.

Блок 16: подключение скриптов

<script src="/script.js"></script>
<script src="/scroll-top.js"></script>

Два скрипта в конце body. Порядок важен:

• script.js — бургер, активная ссылка, кнопки статьи.
• scroll-top.js — логика кнопки «Наверх».

Почему в конце body, а не в head?

Ещё нюанс: скрипты в конце body уже «видят» все элементы DOM. Не нужно дополнительно ждать DOMContentLoaded — скрипт запустится, когда всё построено. Но мы всё равно оборачиваем код в DOMContentLoaded — на случай, если кто-то перенесёт скрипты в head. Двойная страховка.

Схема всей страницы

Блок                          Что это                      Откуда
--------------------------    -------------------------    ----------------
DOCTYPE html                  тип документа                как везде
html lang="ru"                язык страницы                как везде
head > charset                кодировка                    как везде
head > viewport               масштаб на мобильных         как везде
head > title                  заголовок вкладки            УНИКАЛЕН
head > meta description       описание для поиска          УНИКАЛЬНО
head > SSI head-links         фавикон, og, стили           из partials
body > div.container          обёртка ширины               как везде
body > header                 шапка                        из partials
body > section 1              герой                        УНИКАЛЬНА
body > section 2              проблемы                     УНИКАЛЬНА
body > section 3              CTA                          УНИКАЛЬНА
body > SSI footer             реквизиты, копирайт, метрика из partials
body > button scrollToTop     кнопка «Наверх»              как везде
script.js, scroll-top.js      скрипты                      как везде

Итог

• index.html — эталон. Остальные страницы делаются по его образцу.
• Первые строки: DOCTYPE, html lang="ru", кодировка, viewport.
• Уникальны: title и meta description.
• Через SSI: head-links.html, header.html, nav.html, footer.html.
• Уникальный контент — между header и футером. Три секции на главной.
• Тег header — в самой странице, а не в partials: он «обнимает» два инклюда.
• Кнопка «Наверх» — вне контейнера, потому что position: fixed.
• Скрипты — в конце body: сначала script.js, потом scroll-top.js.
• Один h1 на странице — в шапке (имя владельца). Всё остальное — h2 и ниже.

Следующий раздел — клонирование страницы. Покажем, как из index.html получается services.html: что меняется, что остаётся, где легко ошибиться.