Правила верстки

На данный момент большинство браузеров отображают сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров.

Однако нужно быть внимательным при написании HTML – необходимо следовать правилам валидности, т.к. правильная верстка важна для оптимизации сайта, а также поможет не сойти с ума пользователям, которые откроют ваш сайт в браузерах ранних версий.

Используйте <!DOCTYPE html>

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

Используйте правильную структуру документа

Теги <html>, <head>, <body> всегда должны присутствовать в коде, это делает страницу совместимой со стандартами и гарантирует, что она будет корректно отображаться.

Неправильно

<html>
 <head>
  <title>Hello world!</title>
 </head>
 <p>hello world!</p>
</html>

Правильно

<html>
 <head>
  <title>Hello world!</title>
 </head>
 <body>
  <p>hello world!</p>
 </body>
</html>

Определяйте техническую информацию страницы правильно

Мета-теги и стили следует указывать в <head>, а не где-то в теле страницы. Скрипты предпочтительно подключать внизу страницы перед закрывающимся тегом </body>. Преимущество данного подхода в том, что до момента отображения контента страницы браузер загружает только стили, а скрипты он загрузит в последнюю очередь, что позволяет пользователю быстрее увидеть содержимое страницы.

Неправильно

<html>
 <head>
  <title>Hello world!</title>
 </head>
 <body>
  <link rel=»stylesheet» href=»/css/style.css»>
 </body>
</html>

Правильно

<html>
 <head>
  <title>Hello world!</title>
  <link rel=»stylesheet» href=»/css/style.css»>
 </head>
 <body>
 </body>
</html>

Следуйте стандартам разметки

  • Соблюдайте правильную структуру вложенности тегов: указывайте строчные элементы внутри блочных, а не наоборот.
    Неправильно<strong><p>Hello world!</p></strong> 
    Правильно<p>Hello <strong>world!</strong></p>
  • Корректно закрывайте вложенные элементы.
    Неправильно<p>Hello <strong>world!</p></strong> 
    Правильно<p><strong>Hello world!</strong></p>
  • Грамотно используйте классы и идентификаторы. Идентификатор элемента должен быть уникальным, в отличие от класса.
    Неправильно<p id=»some-text»>Hello world!</p>
    <p id=»some-text»>Привет мир!</p>
    <p class=»some-text»>Hello мир!</p> 
    Правильно<p id=»some-text»>Hello world!</p>
    <p class=»some-text»>Привет мир!</p>
    <p class=»some-text»>Hello мир!</p>
  • Не используйте нестандартные теги, которых нет в HTML5.
    Неправильно<block>
     <p>Hello world!</p>
    </block> 
    Правильно<div class=»block»>
     <p>Hello world!</p>
    </div>

Используйте элементы в соответствии с их семантикой

Используйте новые html5 элементы, такие как: header, nav, sidebar, main, article, section, footer. Они доступно описывают свое предназначение как для браузера и поисковых роботов, так и для веб-разработчика.

Плохой код

<html>
 <head>
  <title>Страница</title>
 </head>
 <body>
 <div class=»header»>
  <div class=»nav»></div>
 </div>
 <div class=»main»></div>
 <div class=»footer»></div>
 </body>
</html> 

Хороший код

<html>
 <head>
  <title>Страница</title>
 </head>
 <body>
  <header>
   <nav></nav>
  </header>
  <main></main>
  <footer></footer>
 </body>
</html>

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

Плохой код

<div class=»list»>
 <div>Пункт 1</div>
 <div>Пункт 2</div>
 <div>Пункт 3</div>
</div> 

Хороший код<ul class=»list»>
 <li>Пункт 1</li>
 <li>Пункт 2</li>
 <li>Пункт 3</li>
</ul>

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

Проверяйте html-код на валидность

Это позволяет понять, нужны ли исправления верстки, т.к. чистота и грамотная структура кода являются важными составляющими внутренней оптимизации сайта.

Используйте альтернативный текст для изображений

Изображения должны всегда включать атрибут alt. Браузер полагается на данный атрибут, чтобы обеспечить контекст для изображения. Атрибут alt должен содержать текст, который будет отображаться в том случае, если картинка не загрузилась.

Неправильно

<img src=»/img/samsung-rb-33J3400ww.jpg»>

Правильно

<img src=»/img/samsung-rb-33J3400ww.jpg» alt=»Холодильник Samsung RB-33J3400WW»>

Не используйте стили в HTML разметке

Это создает страницы, которые загружаются слишком долго и трудно поддерживаются. Прописывайте все стили в отдельном CSS-документе. Старайтесь использовать тег и атрибут style по минимуму.

Пишите комментарии

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

Пример:

<html>
 <head>
  <title>Страница</title>
 </head>
 <body>

<!—Шапка—>
 <header class=»header»>
  <nav class=»nav»></nav>
 </header>
<!—Шапка конец—>

<!—Контент—>
 <main class=»main»></main>
<!—Контент конец—>

<!—Подвал—>
 <footer class=»footer»></footer>
<!—Подвал конец—>
 </body>
</html>

Используйте подходящие имена классов

Задавайте имена css-классам в соответствии с содержанием блока, например: шапка – header, подвал – footer, меню – menu, контент – content. Благодаря этому код будет намного понятнее и его легче будет поддерживать.

Плохой код

<ul class=»list»>
 <li>Пункт меню 1</li>
 <li>Пункт меню 2</li>
 <li>Пункт меню 3</li>
</ul>

Хороший код

<ul class=»menu»>
 <li>Пункт меню 1</li>
 <li>Пункт меню 2</li>
 <li>Пункт меню 3</li>
</ul>

Правила написания CSS

В css также есть правила, следуя которым, можно сохранить код простым, легко читаемым и хорошо организованным.

Сбрасывайте стили браузера по умолчанию

Они могут мешать стилям, которые мы хотим применить на самом деле.

Используйте сокращённые свойства и значения

Плохой код

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

Хороший код

padding: 5px 10px 15px 20px;

Указывайте селекторы и правила с новой строки

Такой код легко читать и редактировать. Также не стоит забывать о пробеле перед значением свойства.

Плохой код

.element {display:block;position: relative;padding:5px 10px 15px 20px;}

Хороший код

.element {
 display: block;
 position: relative;
 padding: 5px 10px 15px 20px;
}

Указывайте нулевые значения без единиц измерения

Плохой код

padding: 10px 0px;
margin-left: 0%;

Хороший код

padding: 10px 0;
margin-left: 0;

Пишите комментарии

Разделяйте основные блоки комментариями, это улучшит читаемость кода.

Пример:/*HEADER*/
header {
}
/*HEADER END*/

/*MAIN*/
main {
}
/*MAIN END*/

/*FOOTER*/
footer {
}
/*FOOTER END*/

Проверяйте css-код на валидность

Проверка css на валидность – соответствие стандартам, ничем не отличается от проверки html. Валидация css ничем не отличается от валидации html.

Заключение

Данные рекомендации и правила – лишь основы, поскольку языки HTML и CSS развиваются все быстрее, разрабатываются новые методы написания правильного кода. Следуя нашим рекомендациям, вы будете уверены, что ваш код является простым, легко читаемым и оптимизированным.