Семантическая вёрстка 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 фреймворков, но для разработки без использования оных подобное именование неинформативно.