Верстка в HTML не требует строгого соблюдения синтаксиса. На данный момент большинство браузеров отображает сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров. Правила валидности (соответствия правилам) сайта являются скорее не строгими законами, а пожеланиями. Тем не менее, некоторые правила следует соблюдать, т.к. правильная верстка важна для оптимизации сайта, а также поможет не сойти с ума пользователям, которые откроют ваш сайт в браузерах ранних версий.
-
В первую очередь, рассмотрим тег <!DOCTYPE> - первую строку любой HTML-страницы. Он определяет версию языка разметки, который используется на странице. На данный момент рекомендуется использовать doctype вида <!DOCTYPE html> - он является универсальным для любой версии языка.
-
Тег <head> необходим для того, чтобы указывать в нем вспомогательную информацию страницы. Мета-теги, ссылки на скрипты и стили. Желательно, чтобы эти ссылки указывались именно в теге head, а не где-то в теле страницы.
-
Все стили желательно прописывать в отдельном CSS-документе. Старайтесь использовать атрибут style по-минимуму. Лучше сделать дополнительный класс.
-
Каждому веб-мастеру известно, что элементы верстки бывают блочные (например, div) и строчные (например, p, a, span). Существует правило, по которому блочные элементы нельзя указывать внутри строчных.
Если же есть такая необходимость, то можно схитрить – элемент, который нужен как блок, обозначаете тегом span, а не div, а в стилях для него указываете display:block.
-
Не стоит забывать про важное правило, запрещающее перекрестную вложенность тегов. Например <p><b>текст</p></b> – так неправильно.
Здесь сначала должен быть закрыт тег </b>, а уже потом тег </p>, то есть так: <p><b>текст</b></p>
-
Теги заголовков (h1 – h6) очень важны для оптимизации сайта. Естественно, стоит использовать в них ключевые слова, но не забывайте о чувстве меры. В первую очередь стоит думать о том, что ваш сайт создан для пользователя, и информация, опубликованная на нем, должна быть читабельной и структурированной. И стоит помнить о количестве заголовков разного уровня. Заголовок <h1> должен быть один на странице. <h2> - может встретиться 2-3 раза. <h3> и остальные можно использовать 3 и более раз.
-
Также ключевые слова по тексту полезно выделять тегами <strong>, <b> (жирный текст), <em>, <i> (курсив). Но опять же, стоит помнить об удобстве пользователя. Если абзац будет на 50% заполнен словами, выделенными жирным шрифтом, то текст будет пестрить, а глаза разбегаться.
-
Если вы используете на странице изображения в теге img, добавьте к нему атрибут alt. В нем укажите краткое описание картинки, если возможно – используя ключевые слова. Например, <img src=”/img/image.jpg” alt=”Строительные и отделочные материалы”>
-
Всему свое место. Так же и с тегами. Если элемент вашего сайта логически является списком (например, меню), то верстать его следует тегами списка (<ul>, <ol>). Внешний вид можно легко изменить с помощью CSS.
А текст желательно верстать тегом абзаца <p>. Кстати, если вы используете перенос строки <br/>, не лепите его вплотную к словам. Добавьте перед ним или после него пробел, т.к. в поисковой выдаче перенос не отобразится, и слова окажутся слепленными.
Конечно, эти правила не являются обязательными к исполнению, но если вы будете их соблюдать, то ваш сайт будет более качественным. А создавать качественный продукт всегда приятно.
Автор Екатерина Ефимова
Комментариев нет:
Отправить комментарий