Рекомендации по написанию HTML-кода начинающим web-разработчикам

Очевидные вещи, которые выделил для себя. Хотелось бы, чтоб грамотные люди дополнили этот небольшой список. Цель – сделать код и свой, и других – более красивым, валидным, легко понимаемым и семантически грамотным.

Использование тега <br />

В основном это бывает нужно, для улучшения восприятия текста, точнее для форматирования одного элемента. Поэтому, когда нам нужно разделить несколько элементов или просто, чтоб новый элемент был в новой строчке, нужно использовать блочный элемент (div, p, h1…, у которых по умолчанию css-свойство display:block, но при этом, старайтесь не плодить лишних элементов). И если нужно сделать отступ, не нужно вставлять десять <br>, а нужно описать в css свойство margin.

Использование атрибута style и свойство !important

Это нужно в исключительных случаях, когда место уникальное. Почти всегда нужно использовать css-класс со свойствами вынесенными в css-файл. И даже если вам нужно спрятать элемент (display:none), лучше создать универсальный класс, (например css: .hidden {display:none;}), и писать <span class=”error hidden”>.
В описании класса, если у вас не применяется какое-то свойство, не нужно писать !important, чаще всего достаточно впереди дописать родительский селектор, и желательно – class, а не id.

Устаревшие элементы и атрибуты HTML

<CENTER>, <FONT>, border, color, cellpadding, cellspacing, width (для таблиц)
Все они заменяются свойствами в CSS, поэтому не используйте вышеперечисленные элементы. Также, атрибут name для XHTML не валидный – его не нужно использовать (все делается через id).

Элемент <label>

Специально, чтоб описывать назначение инпута есть элемент <label> (в HTML5 для этой цели можно использовать атрибут placeholder). Поэтому везде, где есть input, почти всегда, должен быть <label for=”input_id”>.

Неразрывный пробел и перенос слов

Старайтесь предвидеть возможность переноса слов и, где это нужно, используйте &nbsp; чтобы предотвратить разрыв. Если контент динамический и нужно держать его одной строчкой, можно использовать css-свойство, которое предотвращает перенос слов в новую строку – white-space:nowrap;

Расположение кнопок

Справа должна быть наиболее вероятная для нажатия кнопка. (Например 1.Cancel 2.Ok), это не относится к выводу информации – впереди должно быть самое важное. Но поскольку пользователь проверяет все возможные действия, то не нужно заставлять его возвращаться назад, даже взглядом.

Названия колонок, кнопок, действий

Старайтесь придерживаются правила – отдельный элемент – новое предложение и соответственно – пишите его с заглавной буквы (Submit, Order now). Также не нужно писать целиком заглавными слово, предложение или абзац. Если это нужно, есть css-свойство text-transform:uppercase;

Подчеркивание и выделение

Не подчеркивайте никакие элементы кроме ссылок. Для выделения используйте <strong>, <em> с соответствующими им css-свойствами font-weight:bold, font-style:italic или изменяйте сам шрифт. Если семантически фрагмент не выделяется, а только визуально, используйте <span>.

Сюда не вошли, может, более очевидные вещи, такие как форматирование или как выбирать названия для id элементов, но это относиться, на мой взгляд, к стилю, а не к культуре написания кода. CSS может и не нужно всем знать досконально, но структуру HTML-документа должны понимать все разработчики.


Надеюсь, данная заметка будет полезна и дополнена/исправленна Вашими коментариями.

One thought on “Рекомендации по написанию HTML-кода начинающим web-разработчикам”

Leave a Reply

Your email address will not be published. Required fields are marked *


− 1 = 2

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>