Правила написания хорошего кода

honestly about content marketing no

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

На данный момент большинство браузеров отображают сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров. Однако нужно быть внимательным при написании 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>

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

  1. Соблюдайте правильную структуру вложенности тегов: указывайте строчные элементы внутри блочных, а не наоборот.


    Неправильно

    <strong><p>Hello world!</p></strong>


    Правильно

    <p>Hello <strong>world!</strong></p>

  2. Корректно закрывайте вложенные элементы.


    Неправильно

    <p>Hello <strong>world!</p></strong>


    Правильно

    <p><strong>Hello world!</strong></p>

  3. Грамотно используйте классы и идентификаторы. Идентификатор элемента должен быть уникальным, в отличие от класса.


    Неправильно

    <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>

  4. Не используйте нестандартные теги, которых нет в HTML5.


    Неправильно

    <block>
     <p>Hello world!</p>
    </block>


    Правильно

    <div class=»block»>
     <p>Hello world!</p>
    </div>

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

  1. Используйте новые 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>

  2. Всему свое место. Если элемент логически является списком, то верстать его следует тегами списка (<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>

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

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

Это позволяет понять, нужны ли исправления верстки, т.к. чистота и грамотная структура кода являются важными составляющими внутренней оптимизации сайта. Проверить можно тут – https://validator.w3.org/

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

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


Неправильно

<img src=»https://1ps.ru/img/samsung-rb-33J3400ww.jpg»>


Правильно

<img src=»https://1ps.ru/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 также есть правила, следуя которым, можно сохранить код простым, легко читаемым и хорошо организованным.

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

Они могут мешать стилям, которые мы хотим применить на самом деле. Скачать файл для сброса стандартных стилей браузера можно тут – reset.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. Проверить можно здесь – https://jigsaw.w3.org/css-validator/

Заключение

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

Давайте начнем разговор

Контактная информация

Звоните:

8 (921) 084 65 31

Адрес:

г. Санкт- Петербург. м. Проспект просвещения, проспект Художников д. 29 к 1

Анализ конкурентов

Бесплатно

Анализ сайта конкурентов – подготовительный и самый главный этап запуска своего сайта

Получить бесплатно

Адаптивность сайта

Даром

Адаптивность — обязательное условие для современного сайта

Получить даром

Подбор ключевых фраз

За 0 руб.

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

Получить за 0 руб.

План продвижение

За так

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

Получить за так