Вредные привычки HTML верстки

Давно в Дизайн Мании не было статей по тематике верстки, которая весьма и весьма актуальна для многих вебмастеров. Сегодняшний пост можно назвать в какой-то степени «обучающим» и полезным не только для начинающих верстальщиков, но и бывалых работников, которые не застрахованы от таких простых, но ненужных ошибок при HTML верстке. Вообще правильнее сказать даже не ошибки, а типичные вредные привычки и, то что называется, «плохая школа». Веб-дизайн — такая штука где до сих пор не существует 100% стандартов. Уже одно это является благодатной почвой для того чтобы каждый писал код так как заблагорассудится. Но, исправляться никогда не поздно! Давайте избавимся хотя бы от десяти распространенных пороков. Для каждой из вредных привычек HTML верстки вы также найдете небольшое пояснение, которое поможет понять почему нужно использовать тот или иной вариант.

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

html верстка вредные привычки

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

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

атрибут ALT для картинок

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

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

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

ошибки верстки

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

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

теги strong em

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

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

неточности html верстки

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

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

неправильная верстка

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

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

советы по html верстке

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

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

нюансы верстки

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

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

заголовки в html верстке

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

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

советы по html верстке

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

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

P.S. Постовой. Обратите внимание на дизайн услуги в интернете по созданию шаблонов, логотипов и других элементов дизайна.
Вы можете забронировать авиабилеты через агентство «Элит Турс» на украинские и международные рейсы.

9 комментариев к статье “Вредные привычки HTML верстки”
  1. Олег

    Спасибо за статью, вёрсткой недавно начал заниматся!

  2. Последние пять лет ни разу не видел blink/marquee, их уже все забыли O_o
    А 100% стандарты существуют.

  3. Для себя полезными нашел del и ins — как-то обошел их вниманием ранее (просто не помню когда последний раз использовал).
    А по поводу мигающего текста, согласен, что лет пять уже никого не порывает создавать такие шедевры = теперь для таких целей все вооружились всякими jQuery/Mootools/Dojo и творят всякие непотребства с их помощью :) Кстати, как только начинается активное использование javascript’а для построения rich веб-интерфейсов теги style появляются откуда-то сами собой :). Можно конечно заниматься извращениями и править таблицы стилей вместо использования тега style, но это негативно скажется на производительности, излишне усложнит код, да и насколько мне известно ни одна готовая библиотека не использует такой подход.

  4. Не верстал уже года два. Всё больше рисую. но про эти мелочи не забыл ещё. Единственное, что иногда когда кой чего «подвёрстываю» лень в css лезть из-за каждой мелочи и пишу стили в тэгах. Просто так удобнее мне.

  5. Александр

    ООО ну не знаю кто такие ме5лочи допускает обычно все заголовки пишу через Н2 и просто добавляю класс к нему что бы клиент всегда мог его изменить внешний вид высоту стиль цвет и тд насчет их используют тока при форматирование текста и ппотом если нужен отсуп есть такие вещи как padding и margin ну и списки это же дибилу понято извините за грубость статья устаревшая как минимум на пару — пять лет … И а ммм не логично было называть стили в вашем head-menu где пропорции где симетрия ?! почему у них фикс ширина ?! Имхо дизайн больше понравился чем код вашего сайта …

  6. Александр

    Интересная статья! Хотелось бы добавить от себя:
    1) Размещать строчный элемент внутри блочного это правильно, но с точки зрения поисковой оптимизации, лучше сделать так: чем , поскольку тег заголовка не должен содержать разметки.
    2) Помимо атрибута alt, для картинок нужно прописывать width и height, поскольку некоторые браузеры автоматически не определяют размер картинки.

  7. Tod

    Александр, спасибо за советы, хотя в первом код не добавился. Я кстати, уточнял насчет размещения строчного элемента внутри блочного, большинство сеошников сказали, что лучше следовать семантике языка и не нарушать ее.

  8. mirkklens

    Согласен со всем выше указанным. Давно подзабыл del и ins спасибо что напомнили!

  9. just

    Устaрeлa стaтeйкa но всeровно спaсибо)

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *