10 ошибок, которых следует избегать
При использовании HTML-кода следут избегать ошибок, которые некоторые маститые веб-дизайнеры даже называют преступлениями. В этой статье мы затронем лишь часть наиболее распространенных ошибок, которые совершают неопытные веб-мастера. Также вам будет предложены альтернативные (правильные) варианты, которые следует использовать в работе.
Ошибка 1: Размещение блочных элементов внутри строчных элементов
Теги делятся на две части по типу представления на веб-странице: блочные и строчные. В число блочных элементов входят, например, параграфы и дивы (p, div), которые формируют структуру документа. Строчные элементы размещаются внутри блочных элементов и отвечают за содержание (span, a). Строчные элементы всегда должны находится внутри блочных элементов, и никогда наоборот.
Примеры
<a href=»#»><h2>This is wrong</h2></a> — неправильно!
<h2><a href="#">This is right!</a></h2> — правильно
Ошибка 2: Отсутствие атрибута alt в картинках
Атрибут alt является обязательным атрибутом во всех картинках, которые присутствуют на странице. Это помогает пользователю понять о назначении картинки при медленном соединении или отключенной графике. Атрибут должен точно описывать картинку, поэтому использование приема alt=»image» — это плохая практика. Если картинка используется как декоративный элемент, то просто оставьте атрибут пустым alt=»".
Примеры
<img src="cat.png" /> — неправильно!
<img src="cat.png" alt="Спящий кот" /> — правильно
Ошибка 3: Игнорирование списков
Очень часто требуется перечисление объектов. Для подобной операции существуют теги ol (нумерованный список) и ul (ненумерованный список). Списки лучше выглядят на странице и удобнее для восприятия глазами. Используйте списки, когда это действительно нужно.
Примеры
<p>
Барсик<br />
Мурзик<br />
Васька<br />
Рыжик<br />
Неправильно! А имена у котов правильные 
</p>
<ol>
<li>Барсик</li>
<li>Мурзик</li>
<li>Васька</li>
<li>Рыжик</li>
<li>У вас правильные коты и список</li>
</ol>
Ошибка 4: использование <b> и <i> (устар.)
Теги <b> и <i> позволяют делать текст жирным и наклонным. В настоящее время считается, что нужно избегать подобных тегов и использовать вместо них стили font-weight и font-style. Кроме того, существуют теги, которые абсолютны похожи на указанные теги и являются рекомендуемыми в использовании — это теги <strong> и <em>. Должен признаться, что я сам игнорирую данные рекомендации, когда пишу HTML-код вручную, потому что нерекомендуемые теги короче и быстрее набираются на клавиатуре. При использовании специализированных HTML-редакторов проще — они автоматически проставляют правильные теги.
Примеры
Это жирный текст с использованием <b> и это тоже жирный текст, но с использованием <strong>.
Ошибка 5: Чрезмерное использование переводов строк
Перевод строки при помощи тега <br /> должен использоваться только для вставки новой строки в случае необходимости при оформлении параграфа. Чтобы добавить пространство между элементами, нужно использовать другие способы, например, через стили CSS.
Примеры
Жили-были дед да бабка <br /> <br /> и был у них старый кот.<br /><br /> Но вы не правильно оформили текст.
<p>Жили-были дед да бабка</p> <p>И был у них старый кот.</p> <p>Это более правильный вариант</p>
Ошибка 6: Использование тега зачеркивания текста
Раньше для зачеркивания текста использовались теги <s> и <strike>, которые теперь считаются устаревшими. Данные теги уже не поддерживаются в HTML5, поэтому настоятельно рекомендуется полностью отказаться от них. Теперь нужно использовать теги <del> и <ins>. Новые теги часто используются вместе, чтобы показать удаленный и добавленный текст в документе.
Примеры
Коты ловят <s>собак</s>. И это неправильно!
Коты любят ловить <del>собак</del> <ins>мышей</ins>. И это правильно.
Ошибка 7: Чрезмерное использование стилей внутри тегов
Некоторые веб-мастера увлекаются использованием стилей CSS внутри тега. Это не является ошибкой в общем смысле, но не нужно злоупотреблять этой возможностью. Необходимо приучить себя к порядку и отделять стили от содержания. Для оформления стилей существуют CSS-файлы и блок стилей в заголовке документа <head>.
Пример
<h2 style="color: red>Не совсем правильное использование стилей</h2>
Ошибка 8: Добавление и удаление границ в HTML
Многие элементы имеют атрибут border, который семантически не совсем соответствует правилам разметки. Поэтому рекомендуется использовать стили CSS.
Примеры
<img src="cat.png" alt="" border="0" /> — нежелательное использование атрибута border.
Отсутствие заголовочных тегов
Заголовочные теги варьируются от <h1> до <h6> и служат для логического разделения текста в документы. Почему то, многие веб-мастера избегают использовать заголовки и применяют уродливые конструкции.
Примеры
<p><strong>Питание кошек</strong></p>
<p>Вы неправильно используете в качестве заголовка жирный текст. Коты вам очень недовольны.</p>
<h3>Питание кошек</h3>
<p>А это правильный заголовок. Мррр!</p>
Преступление 10: Использование тегов <blink> или <marquee>
Использование тегов <blink> или <marquee> по моему глубокому убеждению является не ошибкой, а преступлением против всего прогрессивного человечества. Мигающие и болтающие вправо-влево тексты могут свести с ума любого пользователя. К счастью, данные теги не являются стандартом и полностью запрещены к использованию. Мигать и ходить направо-налево разрешается только ученым котам (в разумных пределах).
Примеры
Вы <blink>придурок</blink>, если используете тег <blink> на своем сайте
Идея: http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit
Опубликовано 8 мая 2010 года.