Написание HTML

Выглядит как ссылка, но Tab её пропускает

• Стилизованный прямоугольник с надписью «Присоединиться» не обязательно является рабочей ссылкой. Настоящий тег якоря с целевым адресом имеет поведение браузера, которое не обеспечивает само по себе стилизация.
• HTML придает контенту структуру и смысл. CSS управляет внешним видом; выбор семантически значимого HTML также поддерживает использование клавиатуры и вспомогательных технологий.

Читайте тег и его атрибуты

• Элемент часто имеет начальный тег, содержимое и закрывающий тег: <p>Meet on Thursday.</p>. Атрибут предоставляет информацию в начальном теге: <a href="join.html">Join</a>.
• Пустой (void) элемент HTML, такой как img, не имеет закрывающего тега или дочернего содержимого. Он не «закрывается сам»; косая черта в конце не требуется в HTML. Вложенные парные теги должны находиться друг внутри друга без пересечения.

Разметка областей страницы по назначению

• Семантические элементы включают nav для основной навигации и main для основного содержимого страницы. Используйте заголовки для описания разделов и div для универсальной группировки, когда не подходит более специфичный элемент.
• Носитель a с href навигацией; носитель button выполняет действие. Семантическая разметка помогает, но метки, поведение и фокус все равно требуют проверки.

Создание небольшой полной страницы

• Сохраните этот пример как index.html рядом с настоящим join.html. Откройте его в браузере и перейдите по ссылке с помощью клавиш Tab и Enter.
• lang определяет язык страницы; title называет вкладку браузера. Настройка viewport позволяет адаптивным стилям использовать ширину устройства.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Robotics club</title>
</head>
<body>
  <nav aria-label="Main"><a href="join.html">How to join</a></nav>
  <main>
    <h1>Robotics club</h1>
    <p>Meet Thursday at 4 pm in room 12.</p>
  </main>
</body>
</html>

Выбор альтернатив по назначению изображения

• Информативное изображение требует альтернативы, передающей его значимое содержание. Чисто декоративное изображение обычно использует alt="", чтобы вспомогательные технологии могли его пропустить.
• Для изображения, используемого в качестве ссылки, опишите функцию ссылки, если эта информация не предоставляется иным образом. Сложная диаграмма также требует объяснения важных данных текстом.

Проверка структуры и поведения

• Проверьте порядок заголовков, осмысленные метки ссылок, использование клавиатуры и альтернативы изображений. Валидатор HTML может обнаружить ошибки разметки, но не сможет оценить, насколько полезна ваша формулировка.
• Убедитесь, что страница meetings доступна без стилей. Затем оформите контент, не превращая заголовки в лишь внешние ярлыки.

Источники: Синтаксис HTML и W3C декоративные изображения.