Полезные правила HTML-верстки
Создание сайтов
Современные браузеры могут корректировать и правильно отображать содержимое с допущенными ошибками при верстке HTML страниц. Конечно же, это не касается всех ошибок, но большую часть проблем с валидностью HTML кода браузеры отображают корректно. Но все же правила верстки HTML следует соблюдать, это поможет в оптимизации сайта, поисковые роботы не будут ставить минусы за некорректный код, а пользователи, зашедшие на сайт со старых версий браузеров, не будут шокированы содержимым. Далее мы рассмотрим основные, полезные правила HTML-верстки.
- Определение типа документа
Первая строка любого HTML документа начинается с определения типа содержимого в теге <!DOCTYPE> - версию разметки. Рекомендуется использовать универсальный тип - <!DOCTYPE HTML>.
- Содержимое тега <Head>
В теге <head> указываются метатеги страницы, но в нем так же следует указывать ссылки на стили и скрипты используемые на странице, некоторые это забывают и размещают ссылки ниже, в теле страницы.
- CSS стили
Для стилей CSS лучше всего создать отдельный файл и не прописывать их в теле документа. Создавайте отдельные классы и как можно реже используйте атрибут «style».
Вместо:
<h2 style=”color: blue”>
Используйте:
<h2 class=”blue”>
- Блочные и строчные элементы верстки
Не следует использовать блочные элементы верстки внутри строчных, к примеру так делать не стоит:
<a href=”…”><h2> hello </h2> </a>
Зеленным выделен строчный элемент, красным – блочный.
А так правильно:
<h2><a href=”…”>hello”</a></h>
- Не делать перекрестную вложенность тегов
При верстке сайта в HTML нельзя использовать перекрестную вложенность тегов, так делать не стоит: <p><b>Hello</p></b>, нужно делать так: <p><b>Hello</b></p>
- Использования тегов заголовков h1-h6
Использование заголовков структурирует текст и делает его более удобочитаемым для посетителей ресурса, а так же помогает при SEO-оптимизации ресурса, в них используются ключевые слова, релевантные содержимого текста. Но не стоит забывать о правилах использования заголовков в теле страницы, h1 – может встречаться на странице не более одного раза, h2 – может быть использован до трех раз, а подзаголовок h3, можно использовать более трех раз.
- Выделение ключевых слов
И хотя многие компании занимающиеся разработкой сайтов перестали это делать, но для удобства пользователя, ключевые слова можно выделять в тексте тегами <b>, <strong>, <i>, <em>.
- Изображения на странице
Если на странице используются изображения, пропишите атрибут alt в теге img, и пропишите краткое описание картинки, по возможности используйте ключевые слова:
<img scr=”/pics/picture.jpg” alt=”Описание с ключевыми словами”>
- Теги списков вместо переноса строки
Если вы создаете список, то и следует его помечать тегами списков и элементов списка, так делать не стоит:
<p>
Элемент1 <br />
Элемент2 <br />
Элемент3 <br />
</p>
А так следует делать:
<ul>
<li> Элемент1 </li>
<li> Элемент2 </li>
<li> Элемент3 </li>
</ul>
Эти рекомендации не являются критически необходимыми, но при их соблюдении ваш сайт не получит минусов и понижений в результатах поисковой выдачи, и будет лучше смотреться в глазах пользователей.
