Лучшие практики написания HTML: читаемость, семантика, валидность

Почему HTML — это больше, чем просто "работает" 🔍

HTML — это скелет вашего сайта. Можно собрать кости как попало, но красивая анатомия делает проект прочным, доступным и понятным. Разберём три кита качественного кода:

1. Читаемость: Код — как книга 📖

Плохой код выглядит так:

<div><p>Привет</p><div><a href="#">Клик</a></div></div>

Хороший код — это:

<header class="greeting">
    <p>Привет</p>
    <div class="actions">
        <a href="#" class="btn">Клик</a>
    </div>
</header>

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

• Отступы — 2 или 4 пробела, единообразие обязательно.
• Имена классов — .nav-main, а не .nm или .block1.
• Комментарии для сложных блоков:

<!-- Секция с отзывами: генерируется через JS -->
<section id="reviews"></section>

• Пустые строки между крупными блоками.

2. Семантика: Каждому тегу — свою роль 🎭

Браузеры, поисковики и скринридеры понимают смысл через теги.

Плохо:

<div>Меню</div>
<div class="footer">Контакты</div>

Отлично:

<nav>
    <ul>
        <li><a href="/">Главная</a></li>
    </ul>
</nav>
<footer>
    <address>Контакты: example@mail.com</address>
</footer>

Топ-5 часто забываемых тегов:

1. <section> — логический раздел страницы.
2. <article> — независимый контент (пост, карточка товара).
3. <time datetime="2024-01-15">15 января</time> — даты для машин.
4. <figure> + <figcaption> — подписи к изображениям.
5. <main> — основное содержимое страницы (только один на документ!).

3. Валидность: Проверяй, как лётчик перед полётом ✈️

Невалидный HTML может сломать отображение или поведение страницы.

Как проверить:

1. Онлайн-валидатор W3C: https://validator.w3.org
2. Расширение для браузера (например, Web Developer).

Пример ошибки:

<ul>
    <li>Пункт 1
    <li>Пункт 2
</ul>

👉 Пропущен закрывающий </li> (хотя браузер "поймёт").

Частые ошибки:

• Незакрытые теги (<p>Текст).
• Атрибуты без кавычек (<img src=photo.jpg>).
• Неправильная вложенность (<p><div></p></div>).

Бонус: 3 приёма из практики Данилы Бежина 🎯

1. Шаблонизация:
   Используйте <template> для повторяющихся блоков, которые наполняются через JavaScript.

2. Микроразметка:
   Добавляйте Schema.org для улучшения SEO:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Моя компания"
}
</script>

1. Декларативный подход:
   Пишите HTML так, чтобы было понятно без CSS/JS. Например:

<button disabled>Отправить</button> <!-- Состояние видно сразу -->

💡 Итог: Хороший HTML — это не только про "работает", но и про "понятно", "доступно" и "надёжно". Начните применять эти правила сегодня — и ваш код станет профессиональным!