Семантическая вёрстка

Семантическая вёрстка HTML-документа подразумевает использование тегов по прямому назначению, т.е. если вам нужен заголовок — то вот тег <h1> и собратья, необходимо табличное представление данных — используйте тег <table> и только его.

Иногда, избавляясь от табличной верстки, доходят до абсурда, и тег <table> становится изгоем, и его перестают использовать даже для табличного представления данных. Не стоит повторять эту ошибку.

Забегая чуть-чуть вперёд, стоит упомянуть теги из спецификации HTML5: <article>, <aside>, <header>, <footer>, <menu>, <section> и т.д. — используйте их, не бойтесь.

Не бояться — это правильно, но использовать тоже надо с умом. Рекомендую ресурс https://html5doctor.com/ — очень хорошо и подробно расписано о нововведениях спецификации HTML5.

И ещё пару интересных ресурсов в нагрузку:

• https://doka.guide/ — справочник для веб-разработчиков

• https://web.dev/explore — тут целое сообщество

Старайтесь избегать избыточных элементов на странице, большинство HTML-страниц грешат лишними блочными элементами:

<div id="header">
    <div id="logo">
        <h1><a href="/">Мой блог</a></h1>
    </div>
    <div id="description">
        <h2>Тут я делюсь своими мыслями</h2>
    </div>
</div>

Данную конструкцию можно легко упростить, и при этом код станет более читаемым, изменения в CSS будут минимальными, или даже не потребуются:

<header>
    <h1>
        <a href="/">Мой блог</a>
    </h1>
    <h2>Тут я делюсь своими мыслями</h2>
</header>

В английском языке есть термин «divits» – сим термином награждают HTML-разметку с чрезмерным использованием div’ов без потребности, я же называю такие творения «дивными». Обычно таким грешат новички, которые для применения стилей CSS оборачивают элементы в div’ы, что и приводит к их размножению без нужды.

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

Плохо
red, green и т.д.	в какой-то момент захотите дизайн через CSS поменять – и элемент с классом «red» станет синим; или возитесь, бегаете по всем страницам и меняйте red на blue, чтоб потом ещё раз начать по новой
wide, small и т.д.	сегодня широкий, а завтра?
h90w490	наверное, это элемент с высотой 90px и шириной 490px; или я ошибаюсь? а в смартфоне тот же класс влезает в экран?
b_1, px_9	ничего не говорящие названия, которые завтра вылетят из памяти
color1, color2, ...	иногда встречается для «скинованных» сайтов, но создаются такие классы во имя лени
element1...20	такое тоже встречается и ничем хорошим не пахнет

И примеры правильного именования:

Хорошо
logo, content	логотип, основной контент
menu, submenu	меню и подменю
even, odd	чётный и нечётный элементы списка (хотя для подобных задач проще использовать CSS-операторы :nth-child(even) и :nth-child(odd), опять же из-за возможного в будущем сдвига элементов)
navigation	постраничная навигация
copyright	информация о лицензировании

Есть ещё один момент – это форматирование HTML- и CSS-кода. Я не буду заострять на нём внимание, но весь код в книге будет отформатирован отступами, и, возможно, это даст свои плоды в ваших творениях.

Чуть не забыл – не равняйтесь на классы вида p-X, m-X, которые вы встретите в Bootstrap или Tailwind. Концепция «utility first» отлично подходит для CSS фреймворков, но для разработки без использования оных подобное именование неинформативно.