Правила плохого тона в HTML верстке

Хотя я и не люблю заниматься HTML версткой, но довольно часто приходится это делать. Несмотря на не большой скилл создания страниц, мне хотелось бы чтобы сделаны они были максимально правильно и эффективно. Сегодня я расскажу о 10 одних из самых вредных привычек HTML верстки. Данная заметка написана в основном для начинающих верстальщиков, но и многие более опытные их коллеги наверняка подчерпнуть для себя некоторую информацию.

Размещение блочного элемента внутри строчного


Размещение блочного элемента внутри строчного

В HTML каждый элемент может быть представлен как строчный или блочный. Каждый тег по своей природе может быть блочным или строчным. Блочные элементы составляют структуру документа, например DIV. Строчный элемент может размещаться внутри блочного, но не наоборот. Собственно, достаточно распространенная ошибка для некоторых начинающих оптимизаторов, которые добавляют ссылки в элементы H1, H2 и т.п. Хорошо, что многие wordpress шаблоны используют правильную HTML верстку.

Отсутствие атрибута ALT для картинок

Отсутствие атрибута ALT для картинок

Атрибут ALT является необходимым элементном для каждого изображения размещаемого на веб-странице. Благодаря ему пользователь может получить представление о изображение, даже если он это изображение не видит (в браузере отключено отображение картинок или устройство не позволяет загружать/отображать изображения).

ALT должен описывать картинку, поэтому, использовать его в виде alt=”image” – неправильно. Если ваша картинка используется чисто в декоративных целях, можно оставить атрибут пустым (alt=”»), но присутствовать он должен в любом случае. Следует также заметить, что атрибут alt используется для поиска по картинкам, поэтому при оптимизации сайта данному аспекту нужно уделять отдельное внимание.

Неиспользование списков

Неиспользование списков

Некоторые веб-мастера почему-то избегают использование маркированных списков <ul> (и <ol>) даже там где они нужны. Это не является большой ошибкой, но от оптимального правильного решения тоже далеко. Незачем громоздить нелепые конструкции когда есть специально предназначенные для этого теги.

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

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

Теги <b> и <i> превращают текст соответственно в написанный жирным (полужирным) и курсивным начертанием. По современным представлениям лучше для этих целей использовать <strong> или <em>. Кстати, говорят, что для продвижение сайтов лучше использовать именно последние обозначения, так как они имеют бОльший вес.

Многократный обрыв строки <br />

Многократный обрыв строки <br />

Тег <br /> который используется для обрыва строки должен использовать только однократно. Для всего прочего есть абзацы, параграфы и прочее, стиль которых должен быть задан в CSS.

Неправильное перечеркивание

Неправильное перечеркивание

В былые времена использование тегов <s> и <strike> считалось нормой, сегодня они тоже устарели. Поэтому советуем вам взять на вооружение <del> и <ins>.

«Стилизация» строчных элементов в HTML

«Стилизация» строчных элементов в HTML

Все веб-мастера 1000 раз слышали что «оформлять на месте» строчные элементы неправильно. Таким образом теряется смысл семантического веб-дизайна. Если вы не можете задать стили всем элементам в CSS, значит вы не способны на грамотный дизайн.

Добавление или удаление границ в HTML

Добавление или удаление границ в HTML

Тоже самое касается тега <border> для элементов. Эти вопросы должны определяться исключительно таблицей стилей.

Игнорирование заголовков

Игнорирование заголовков

Нам даны заголовки разных калибров – от <h1> до <h6>. Нужно это использовать! Грамотно разбитый на заголовки текст принесет свои дивиденды — и читателям удобно и поисковым системам нравится (то есть будет полезно при seo оптимизации). Неправильно использовать в качестве заголовков полужирное или жирное начертание.

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

Мерцающий текст

Помимо того что теги <blink> и <marquee> не является официально одобренными W3, они просто уродуют текст. Есть масса других способов как обратить внимание читателя на тот или иной момент.
Надеюсь данная заметка кому-нибудь поможет и сделает HTML код правильным. Оригинальная статья доступна по этому адресу.

Запись опубликована в рубрике CSS, HTML, Перевод с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *