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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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