Типичные ошибки: Текст, заголовки, списки и ссылки

Кратко

Большинство ошибок — выбор элемента по внешнему виду, а не по смыслу: лишние h1, ссылки «тут», target="_blank" без rel, перенос строки через пустые p.

1. target="_blank" без rel — уязвимость

Как ломается: открытая страница получает ссылку на вкладку-источник через window.opener и может подменить её адрес (фишинг). Плюс теряется контроль над передачей реферера.
<!-- так НЕ надо -->
<a href="https://site.com" target="_blank">Перейти</a>
Как правильно: всегда добавляйте rel="noopener noreferrer" к внешним ссылкам с target="_blank".
<a href="https://site.com" target="_blank"
   rel="noopener noreferrer">Перейти</a>

2. Перенос строки пустыми абзацами вместо нормальной разметки

Как ломается: пустые <p> или цепочки <br><br> ради вертикальных отступов засоряют разметку, ломают доступность и не управляются стилями.
<p>Текст</p>
<p></p><p></p>  <!-- пустые абзацы ради отступа -->
<p>Ещё текст</p>
Как правильно: отдельные мысли — отдельные <p>; расстояние между ними задаёт CSS (margin). <br> — только для переноса, который часть содержимого (адрес, стихи).

Текст

Ещё текст

<p>Текст</p>
<p>Ещё текст</p>

3. Текст ссылки «тут» / «подробнее»

Как ломается: скринридер читает ссылки списком вне контекста — «тут, тут, подробнее» не подсказывают назначение.
Как правильно: в текст ссылки выносим суть назначения.
<a href="program.pdf">Скачать программу курса (PDF)</a>

4. Заголовки и span не по смыслу

  • Несколько h1 или пропуск уровней (h2 → h4) ломают структуру документа.
  • <span> вместо strong/em теряет смысл: визуально похоже, но машинам и скринридерам ничего не сообщает.
  • Нумерация списка вручную (1. … 2. … внутри p) вместо <ol> — браузер не понимает, что это список.