Лучшие практики HTML

Рекомендации по написанию качественного, доступного и поддерживаемого HTML кода.

1. Семантическая разметка

<!-- Плохо -->
<div class="header">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>

<!-- Хорошо -->
<header>...</header>
<main>...</main>
<footer>...</footer>

2. Доступность

<!-- Плохо -->
<div onclick="submitForm()">Отправить</div>
<img src="photo.jpg">

<!-- Хорошо -->
<button onclick="submitForm()">Отправить</button>
<img src="photo.jpg" alt="Описание изображения">

3. Валидный HTML

<!-- Плохо -->
<div><p>Текст</div></p>
<input type="text"></input>

<!-- Хорошо -->
<div><p>Текст</p></div>
<input type="text">

4. Производительность

<!-- Плохо -->
<img src="large-image.jpg" width="50" height="50">

<!-- Хорошо -->
<img src="optimized-image.jpg" width="50" height="50" alt="">
<img 
    src="placeholder.jpg" 
    data-src="large-image.jpg" 
    class="lazy" 
    alt=""
>

5. Безопасность

<!-- Плохо -->
<a href="javascript:void(0)" onclick="loadUserData()">Профиль</a>

<!-- Хорошо -->
<a href="/user/profile" onclick="loadUserData(); return false;">Профиль</a>
<button onclick="loadUserData()">Загрузить профиль</button>

6. SEO оптимизация

<!-- Плохо -->
<title>Страница</title>
<h1><div>Заголовок</div></h1>

<!-- Хорошо -->
<title>Основной заголовок - Название сайта</title>
<h1>Основной заголовок страницы</h1>
<meta name="description" content="Краткое описание страницы">

7. Поддержка разных устройств

<!-- Плохо -->
<table width="800">...</table>

<!-- Хорошо -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<table style="max-width: 100%; overflow-x: auto; display: block;">...</table>

8. Структура кода

<!-- Плохо -->
<div><h1>Заголовок</h1><p>Текст</p></div>

<!-- Хорошо -->
<section>
    <h1>Заголовок раздела</h1>
    <p>Текст раздела</p>
</section>