Собираем небольшую страницу

Полный одностраничный сайт для пекарни в соседнем квартале умещается примерно в 50 строк HTML, и каждый элемент в нём взят из предыдущих девяти уроков.

Сначала план, потом код

Прежде чем писать HTML, запиши простыми словами и по порядку, что должна сказать страница. Для небольшой пекарни это может быть: название, короткое меню ссылок, что испекли сегодня, часы работы, фото хлеба, подписка на новости и адрес. Каждый пункт подсказывает элемент: название будет <h1> в <header>, ссылки пойдут в <nav>, часы станут таблицей, список хлеба будет <ul>, подписка формой, а адрес попадёт в <footer>. Профессиональные команды тоже сначала планируют содержимое, а HTML вытекает из него.

Готовая структура

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Corner Bakery</title>
</head>
<body>
  <header>
    <h1>Corner Bakery</h1>
    <nav>
      <ul>
        <li><a href="#today">Today</a></li>
        <li><a href="#hours">Hours</a></li>
        <li><a href="#news">News</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="today">
      <h2>Baked today</h2>
      <ul>...</ul>
    </section>
    <section id="hours">
      <h2>Opening hours</h2>
      <table>...</table>
    </section>
    <section id="news">
      <h2>Get our news</h2>
      <form>...</form>
    </section>
  </main>
  <footer>
    <p>12 Mill Street, Springfield</p>
  </footer>
</body>
</html>

Две строки в head новые. <meta name="viewport" content="width=device-width, initial-scale=1"> велит телефонам использовать настоящую ширину экрана, а не притворяться экраном компьютера и уменьшать страницу; подробнее об этом в курсе CSS, в уроке об адаптивном дизайне. Меню является списком ссылок внутри <nav>, и экранные дикторы объявляют его как «навигация, список, 3 элемента». Каждая ссылка меню указывает на id раздела, так что страница работает как один прокручиваемый документ.

Проверь как рецензент

Когда страница написана, пройди по ней так, как сделал бы внимательный рецензент. Прочитай только заголовки: рассказывают ли они историю страницы? Нажимай Tab с самого верха: можешь ли ты добраться до каждой ссылки и поля формы в разумном порядке и видно ли, где фокус? Посмотри на каждое изображение: говорит ли его alt, что потеряется без него, или он пуст, потому что изображение декоративное? Нажми на каждую подпись: ставит ли она фокус в своё поле? Напоследок вставь страницу в сервис проверки разметки W3C (validator.w3.org), который перечислит ошибки вроде незакрытых элементов или повторяющихся id.

Страница будет выглядеть скромно: чёрный текст на белом, синие ссылки, шрифты браузера по умолчанию. Это нормально и даже полезно. Страница с хорошим HTML уже читается на любом устройстве, работает с клавиатурой и экранным диктором и может быть напечатана. Курс CSS начинается именно с такой страницы и добавляет поверх цвет, отступы и вёрстку, не меняя ни строчки HTML.

Строй маленькими шагами

Пиши страницу маленькими шагами и смотри на результат после каждого: сначала каркас, потом шапка и меню, потом по одному разделу. Если что-то выглядит не так, проверять придётся лишь несколько новых строк. На своём компьютере сохрани файл как index.html и открой его двойным щелчком: браузер покажет его прямо с диска. Чтобы опубликовать страницу, загрузи этот же файл на хостинг, и сервер будет отправлять его каждому, кто запросит адрес, точно как в начале первого урока.