HTML: чистый код

пишем чистый и красивый html-код

2020-01-20 dr.Brain

время чтения 2 мин.

Когда мы пишем html-код, нет необходимости строго придерживаться определенного формата и всегда соблюдать последовательность открытия и закрытия тегов, потому что в абсолютном большинстве случаев код будет работать. Тем не менее, Ваш код должен быть понятным, красивым и хорошо читаемым.

Вот пример “грязного” кода:

<!DOCTYPE html>
<html>
<head><title>HELLO WORLD! It is a Computer Program!</title></head>
<body>
<p>Hello World!<p>
</body>
</html>

А это чистый и понятный код:

<html>
<head>
    <title>HELLO WORLD!</title>
</head>
<body>
    <p>
       Hello World!
       It is a Computer Program!
    </p>
</body>
</html>

Все элементы делятся на две большие группы: блочные и инлайновые (строчные). Блочные элементы занимают значительную часть документа. Даже, если мы помещаем их в строку друг за другом при написании кода, после рендеринга каждый из них займет всю ширину экрана:

<p>Coding is awesome!</p><p>Everyone should learn to code.</p>

Результат:

Coding is awesome!
Everyone should learn to code.

Для инлайновых элементов текст будет располагаться в строку - один за другим:

<i>iC0dE</i> <i>Magazine</i>

Результат:

iC0dE Magazine

Некоторые теги являются оболочкой для других тегов. Так <html> на различных уровнях вложенности содержит <head>, <body>, <style>, <script> и так далее, в то время, как другие теги, например <p>, могут содержать и текст и вложенные инлайновые элементы. Таким образом, для того чтобы корректно показать связи между элементами в документе, мы должны делать соответствующие отступы и переносы строк.

Есть разработчики, которые отказываются делать отступы для тегов <head> и <body>, так как совершенно очевидно, что эти элементы находятся внутри родительского - <html>. <head> и <body> являются элементами одного уровня, а для тега <html> - они, соответственно, дочерние элементы.

Для того, чтобы отделить в коде дочерние и родительские элементы используются оступы длиной в 2 или 4 пробела, обычно, в большинстве редакторов, это происходит автоматически, и Вам не приходится беспокоиться по этому поводу.

Перенос на другую строку мы делаем только для блочных элементов. Так же, не имеет смысла переносить на другую строку содержимое и закрывающие теги для очень коротких элементов, например, для <li> или <title>:

<ul>
    <li>Programming Languages
        <ul>
            <li>Python</li>
            <li>C++</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

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

Спасибо за внимание.