На данный момент большинство браузеров отображают сайты, самостоятельно расшифровывая и подправляя ошибки веб-мастеров. Однако нужно быть внимательным при написании 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>
Правильно
<strong><p>Hello world!</p></strong>
Грамотно используйте классы и идентификаторы. Идентификатор элемента должен быть уникальным, в отличие от класса.
Неправильно
<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>
Это позволяет понять, нужны ли исправления верстки, т.к. чистота и грамотная структура кода являются важными составляющими внутренней оптимизации сайта. Проверить можно тут – https://validator.w3.org/
Изображения должны всегда включать атрибут alt. Браузер полагается на данный атрибут, чтобы обеспечить контекст для изображения. Атрибут alt должен содержать текст, который будет отображаться в том случае, если картинка не загрузилась.
Неправильно
<img src="/img/samsung-rb-33J3400ww.jpg">
Правильно
<img src="/img/samsung-rb-33J3400ww.jpg" alt="Холодильник Samsung RB-33J3400WW">
Это создает страницы, которые загружаются слишком долго и трудно поддерживаются. Прописывайте все стили в отдельном 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 также есть правила, следуя которым, можно сохранить код простым, легко читаемым и хорошо организованным.
Они могут мешать стилям, которые мы хотим применить на самом деле. Скачать файл для сброса стандартных стилей браузера можно тут – reset.css.
Плохой код
padding-top: 5px;
padding-right: 10px;
padding-left: 15px;
padding-right: 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;
Разделяйте основные блоки комментариями, это улучшит читаемость кода.
Пример:
Проверка css на валидность – соответствие стандартам, ничем не отличается от проверки html. Валидация css ничем не отличается от валидации html. Проверить можно здесь – https://jigsaw.w3.org/css-validator/
Данные рекомендации и правила – лишь основы, поскольку языки HTML и CSS развиваются все быстрее, разрабатываются новые методы написания правильного кода. Следуя нашим рекомендациям, вы будете уверены, что ваш код является простым, легко читаемым и оптимизированным. А также получите +100 к карме и благодарности от разработчиков, которым предстоит работать над сайтом после вас.
Оценок: 411 (средняя 5 из 5)
Правила написания хорошего кода {descr}