На данный момент большинство браузеров отображают сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров. Однако нужно быть внимательным при написании HTML – необходимо следовать правилам валидности, т.к. правильная верстка важна для оптимизации сайта, а также поможет не сойти с ума пользователям, которые откроют ваш сайт в браузерах ранних версий.
Используйте <!DOCTYPE html>
Элемент <!DOCTYPE> располагается на первой строке любой HTML-страницы. Он определяет версию языка разметки, который используется на странице. На данный момент рекомендуется использовать doctype вида <!DOCTYPE html> – он является универсальным для любой версии языка.
Используйте правильную структуру документа
Теги <html>, <head>, <body> всегда должны присутствовать в коде, это делает страницу совместимой со стандартами и гарантирует, что она будет корректно отображаться.
Неправильно
1 2 3 4 5 6 7 8 | <html> <head> <title>Hello world!</title> </head> <p>hello world!</p> </html> |
Правильно
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Hello world!</title> </head> <body> <p>hello world!</p> </body> </html> |
Определяйте техническую информацию страницы правильно
Мета-теги и стили следует указывать в <head>, а не где-то в теле страницы. Скрипты предпочтительно подключать внизу страницы перед закрывающимся тегом </body>.
Преимущество данного подхода в том, что до момента отображения контента страницы браузер загружает только стили, а скрипты он загрузит в последнюю очередь, что позволяет пользователю быстрее увидеть содержимое страницы.
Неправильно
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Hello world!</title> </head> <body> <link rel="stylesheet" href="https://mehelps.ru/css/style.css"> </body> </html> |
Правильно
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Hello world!</title> <link rel="stylesheet" href="https://mehelps.ru/css/style.css"> </head> <body> </body> </html> |
Следуйте стандартам разметки
Соблюдайте правильную структуру вложенности тегов: указывайте строчные элементы внутри блочных, а не наоборот.
Неправильно
1 2 3 | <strong><p>Hello world!</p></strong> |
Правильно
1 2 3 | <p>Hello <strong>world!</strong></p> |
Корректно закрывайте вложенные элементы.
Неправильно
1 2 3 | <p>Hello <strong>world!</p></strong> |
Правильно
1 2 3 | <p><strong>Hello world!</strong></p> |
Грамотно используйте классы и идентификаторы. Идентификатор элемента должен быть уникальным, в отличие от класса.
Неправильно
1 2 3 4 5 | <p id="some-text">Hello world!</p> <p id="some-text">Привет мир!</p> <p class="some-text">Hello мир!</p> |
Правильно
1 2 3 4 5 | <p id="some-text">Hello world!</p> <p class="some-text">Привет мир!</p> <p class="some-text">Hello мир!</p> |
Не используйте нестандартные теги, которых нет в HTML5.
Неправильно
1 2 3 4 5 | <block> <p>Hello world!</p> </block> |
Правильно
1 2 3 4 5 | <div class="block"> <p>Hello world!</p> </div> |
Используйте элементы в соответствии с их семантикой
Используйте новые html5 элементы, такие как header, nav, sidebar, main, article, section, footer — полный список можно посмотреть тут. Они доступно описывают свое предназначение как для браузера и поисковых роботов, так и для веб-разработчика.
Плохой код
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>Страница</title> </head> <body> <div class="header"> <div class="nav"></div> </div> <div class="main"></div> <div class="footer"></div> </body> </html> |
Хороший код
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>Страница</title> </head> <body> <header> <nav></nav> </header> <main></main> <footer></footer> </body> </html> |
Всему свое место. Если элемент логически является списком, то верстать его следует тегами списка (<ul>, <ol>), если он является обычным текстом, используйте тег <p>. Также ключевые слова по тексту полезно выделять тегами <strong>, <b> (жирный текст), <em>, <i> (курсив).
Но опять же, стоит помнить об удобстве пользователя. Если абзац будет на 50% заполнен словами, выделенными жирным шрифтом, то текст будет пестрить, а взгляд не сфокусируется.
Плохой код
1 2 3 4 5 6 7 | <div class="list"> <div>Пункт 1</div> <div>Пункт 2</div> <div>Пункт 3</div> </div> |
Хороший код
1 2 3 4 5 6 7 | <ul class="list"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul> |
Теги заголовков (h1-h6) очень важны для оптимизации сайта. Естественно, стоит использовать в них ключевые слова, но не забывайте о чувстве меры. В первую очередь стоит думать о том, что ваш сайт создан для пользователя, и информация, опубликованная на нем, должна быть читабельной и структурированной.
Также нужно помнить о количестве заголовков разного уровня. Заголовок <h1> должен быть один на странице. <h2> может встретиться 2-3 раза. <h3> и остальные можно использовать 3 и более раз.
Проверяйте html-код на валидность
Это позволяет понять, нужны ли исправления верстки, т.к. чистота и грамотная структура кода являются важными составляющими внутренней оптимизации сайта. Проверить можно тут – https://validator.w3.org/
Используйте альтернативный текст для изображений
Изображения должны всегда включать атрибут alt. Браузер полагается на данный атрибут, чтобы обеспечить контекст для изображения. Атрибут alt должен содержать текст, который будет отображаться в том случае, если картинка не загрузилась.
Неправильно
1 2 3 | <img src="https://mehelps.ru/img/samsung-rb-33J3400ww.jpg"> |
Правильно
1 2 3 | <img src="https://mehelps.ru/img/samsung-rb-33J3400ww.jpg" alt="Холодильник Samsung RB-33J3400WW"> |
Не используйте стили в HTML разметке
Это создает страницы, которые загружаются слишком долго и трудно поддерживаются. Прописывайте все стили в отдельном CSS-документе. Старайтесь использовать тег и атрибут style по минимуму.
Пишите комментарии
Комментируйте код, но не переусердствуйте. Комментарии, которые написаны кратко и понятно, могут послужить отличной помощью для других разработчиков, а также важным напоминанием для вас по истечении некоторого времени.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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. Благодаря этому код будет намного понятнее и его легче будет поддерживать.
Плохой код
1 2 3 4 5 6 7 | <ul class="list"> <li>Пункт меню 1</li> <li>Пункт меню 2</li> <li>Пункт меню 3</li> </ul> |
Хороший код
1 2 3 4 5 6 7 | <ul class="menu"> <li>Пункт меню 1</li> <li>Пункт меню 2</li> <li>Пункт меню 3</li> </ul> |
Правила написания CSS
В css также есть правила, следуя которым, можно сохранить код простым, легко читаемым и хорошо организованным.
Сбрасывайте стили браузера по умолчанию
Они могут мешать стилям, которые мы хотим применить на самом деле. Скачать файл для сброса стандартных стилей браузера можно тут – reset.css.
Используйте сокращённые свойства и значения
Плохой код
1 2 3 4 5 6 | padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; |
Хороший код
1 2 3 | padding: 5px 10px 15px 20px; |
Указывайте селекторы и правила с новой строки
Такой код легко читать и редактировать. Также не стоит забывать о пробеле перед значением свойства.
Плохой код
1 2 3 | .element {display:block;position: relative;padding:5px 10px 15px 20px;} |
Хороший код
1 2 3 4 5 6 7 | .element { display: block; position: relative; padding: 5px 10px 15px 20px; } |
Указывайте нулевые значения без единиц измерения
Плохой код
1 2 3 4 | padding: 10px 0px; margin-left: 0%; |
Хороший код
1 2 3 4 | padding: 10px 0; margin-left: 0; |
Пишите комментарии
Разделяйте основные блоки комментариями, это улучшит читаемость кода.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /*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 к карме и благодарности от разработчиков, которым предстоит работать над сайтом после вас.
Статья была полезной?