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

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

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

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

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

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

Старайтесь избегать избыточных элементов на странице, большинство 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, ax_9 ничего не говорящие названия, которые завтра вылетят из памяти
color1, color2, ... иногда встречается для «скинованных» сайтов, но создаются такие классы во имя лени
element1...20 такое тоже встречается и ничем хорошим не пахнет

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

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

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

Чуть не забыл – никогда не равняйтесь на классы вида pt-X, m-X, которые вы встретите в Twitter Bootstrap! Большинство из них следует использовать только совместно с SASS препроцессором.

results matching ""

    No results matching ""