Когда мы пишем HTML-код, строгое следование определенным правилам форматирования и последовательности открытия и закрытия тегов не является обязательным условием для работы кода. Однако, ясность, красота и читаемость кода играют ключевую роль в его дальнейшем сопровождении и поддержке.
Примеры HTML кода
Рассмотрим пример «грязного» кода:
<!DOCTYPE html>
<html>
<head><title>My First Page</title></head>
<body><h1>Welcome!</h1><p>This is a test.</p></body>
</html>
И сравним его с «чистым» и понятным вариантом:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a test.</p>
</body>
</html>
Разница очевидна: структурированный код легче читать и поддерживать.
Блочные и инлайновые элементы
Все элементы HTML можно разделить на две большие категории: блочные и инлайновые. Блочные элементы занимают всю ширину родительского контейнера и располагаются друг под другом, даже если в исходном коде они написаны в одну строку:
<h2>Learning HTML</h2><div>HTML is fun.</div>Результат:
Learning HTML
HTML is fun.Инлайновые элементы, наоборот, располагаются в одной строке:
<span>Inline</span> <span>elements</span>Результат:
Inline elementsВложенные элементы и отступы
Некоторые теги служат оболочкой для других тегов. Например, <html> содержит <head>, <body>, <style>, <script> и так далее. Важно правильно оформлять отступы и переносы строк, чтобы показать вложенность элементов.
Некоторые разработчики могут не делать отступы для тегов <head> и <body>, так как очевидно, что они являются дочерними элементами <html>. Тем не менее, для удобства восприятия лучше соблюдать отступы:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example Page</title>
</head>
<body>
<header>
<h1>Example Page</h1>
</header>
<main>
<section>
<p>Sample text here.</p>
</section>
</main>
</body>
</html>
Обычно для отступов используют 2 или 4 пробела. В большинстве редакторов кода это делается автоматически.
Переносы строк
Переносы на новую строку делают только для блочных элементов. Содержимое и закрывающие теги коротких элементов, таких как <li> или <title>, можно не переносить на новую строку:
<ul>
<li>Languages
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>Ruby</li>
</ul>
</li>
</ul>Написание чистого и понятного кода не только демонстрирует вашу заботу о коллегах и будущих читателях вашего кода, но и является выражением вашей профессиональной гордости и любви к работе. Структурированный подход к написанию HTML-кода делает процесс разработки более эффективным и приятным.
