4 августа 2014

Статья прочитана 6457 раз

Полезные правила HTML-верстки

Верстка в HTML не требует строгого соблюдения синтаксиса. На данный момент большинство браузеров отображает сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров. Правила валидности (соответствия правилам) сайта являются скорее не строгими законами, а пожеланиями. Тем не менее, некоторые правила следует соблюдать, т.к. правильная верстка важна для оптимизации сайта, а также поможет не сойти с ума пользователям, которые откроют ваш сайт в браузерах ранних версий.

  1. В первую очередь, рассмотрим тег <!DOCTYPE> - первую строку любой HTML-страницы. Он определяет версию языка разметки, который используется на странице. На данный момент рекомендуется использовать doctype вида <!DOCTYPE html> - он является универсальным для любой версии языка.

  2. Тег <head> необходим для того, чтобы указывать в нем вспомогательную информацию страницы. Мета-теги, ссылки на скрипты и стили. Желательно, чтобы эти ссылки указывались именно в теге head, а не где-то в теле страницы.

  3. Все стили желательно прописывать в отдельном CSS-документе. Старайтесь использовать атрибут style по-минимуму. Лучше сделать дополнительный класс.

     
  4. Каждому веб-мастеру известно, что элементы верстки бывают блочные (например, div) и строчные (например, p, a, span). Существует правило, по которому блочные элементы нельзя указывать внутри строчных.

    Если же есть такая необходимость, то можно схитрить – элемент, который нужен как блок, обозначаете тегом span, а не div, а в стилях для него указываете display:block.

  5. Не стоит забывать про важное правило, запрещающее перекрестную вложенность тегов. Например <p><b>текст</p></b> – так неправильно.

    Здесь сначала должен быть закрыт тег </b>, а уже потом тег </p>, то есть так: <p><b>текст</b></p>

  6. Теги заголовков (h1 – h6) очень важны для оптимизации сайта. Естественно, стоит использовать в них ключевые слова, но не забывайте о чувстве меры. В первую очередь стоит думать о том, что ваш сайт создан для пользователя, и информация, опубликованная на нем, должна быть читабельной и структурированной. И стоит помнить о количестве заголовков разного уровня. Заголовок <h1> должен быть один на странице. <h2> - может встретиться 2-3 раза. <h3> и остальные можно использовать 3 и более раз.

  7. Также ключевые слова по тексту полезно выделять тегами <strong>, <b> (жирный текст), <em>, <i> (курсив). Но опять же, стоит помнить об удобстве пользователя. Если абзац будет на 50% заполнен словами, выделенными жирным шрифтом, то текст будет пестрить, а глаза разбегаться.

  8. Если вы используете на странице изображения в теге img, добавьте к нему атрибут alt. В нем укажите краткое описание картинки, если возможно – используя ключевые слова. Например, <img src=”/img/image.jpg” alt=”Строительные и отделочные материалы”>

  9. Всему свое место. Так же и с тегами. Если элемент вашего сайта логически является списком (например, меню), то верстать его следует тегами списка (<ul>, <ol>). Внешний вид можно легко изменить с помощью CSS.

    А текст желательно верстать тегом абзаца <p>. Кстати, если вы используете перенос строки <br/>, не лепите его вплотную к словам. Добавьте перед ним или после него пробел, т.к. в поисковой выдаче перенос не отобразится, и слова окажутся слепленными.

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

верстка

Автор Екатерина Ефимова
Веб-технолог сервиса 1PS

Понравилась статья?



Правила комментирования блога

Подпишитесь на рассылку и получайте свежие хаки об интернет-маркетинге и SEO

ДА!

1 письмо
в неделю

3 статьи
в письме

Бонус «для своих»
в каждом письме