5. Комментарии, пробелы и переносы строк

Видео на Rutube

Здравствуйте, дорогие студенты! Добро пожаловать на пятый урок нашего курса веб-разработки. На прошлом занятии мы подробно изучили теги заголовков и узнали, как структурировать текст на веб-странице с их помощью.

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

В этом уроке мы разберемся, как HTML обрабатывает пробелы и переносы строк, как использовать специальные символы и теги для управления отображением пробелов и переносов, и как применять комментарии для пояснения и организации вашего HTML-кода.

Подготовка к уроку

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

  1. Создайте новую папку для урока. На рабочем столе или в удобном для вас месте создайте новую папку и назовите ее lesson_5.

  2. Внутри папки lesson_5 создайте файл и назовите его whitespace.html. Убедитесь, что файл имеет расширение .html.

  3. Создайте еще два файла в папке lesson_5. Создайте еще два файла внутри папки lesson_5: line_breaks.html и comments.html. Убедитесь, что все три файла имеют расширение .html.

Теперь у вас есть три файла whitespace.html, line_breaks.html и comments.html, готовые для изучения пробелов, переносов строк и комментариев в HTML.

Пробелы в HTML – Игнорирование лишних пробелов

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

Давайте разберем это на примере:

  1. Откройте файл whitespace.html в текстовом редакторе и добавьте базовую структуру HTML-документа. Вы можете скопировать структуру из предыдущих уроков или использовать Emmet (! + Enter).

  2. Добавьте два параграфа в секцию <body>. Добавьте в секцию <body> два тега <p>. Первый параграф будет содержать обычный текст без лишних пробелов и переносов строк в коде. Второй параграф будет содержать тот же текст, но с добавлением множества пробелов, табуляций и переносов строк между словами и в начале строк. Скопируйте или введите следующий код в файл whitespace.html:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пробелы в HTML</title>
</head>
<body>
    <p>Это первый параграф, в котором нет лишних пробелов.</p>

    <p>
        Это    второй
        параграф,

        в котором

        много      лишних

        пробелов
        и
        переносов строк.
    </p>
</body>
</html>

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

  3. Сохраните файл whitespace.html и откройте его в браузере. Сохраните изменения и откройте файл whitespace.html в вашем веб-браузере.

Результат:

Вы увидите, что текст обоих параграфов отображается практически идентично в браузере. Несмотря на то, что во втором параграфе в коде было добавлено много лишних пробелов и переносов строк, браузер показал текст так, как будто между словами только1 по одному пробелу, и все переносы строк были проигнорированы. Браузер "схлопнул" все лишние пробелы и переносы строк до одного пробела между словами.

Инструменты разработчика:

Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Выберите теги <p> и посмотрите на HTML-код в панели "Elements". Вы увидите, что HTML-код в инструментах разработчика также отображается "схлопнутым", лишние пробелы и переносы строк удалены. Браузер интерпретировал ваш код и представил его в стандартизированном виде.

Почему так происходит?

HTML предназначен для структурирования контента, а не для точного управления пробелами и форматированием текста в стиле "как в текстовом редакторе". Браузеры разработаны так, чтобы быть гибкими и устойчивыми к ошибкам в HTML-коде. Игнорирование лишних пробелов и переносов строк – это часть этой гибкости. Это позволяет разработчикам форматировать HTML-код для лучшей читаемости (например, добавлять отступы, чтобы видеть вложенность тегов), не беспокоясь о том, что лишние пробелы повлияют на отображение веб-страницы для пользователя.

Неразрывный пробел &nbsp; – Когда пробелы необходимы

Но что делать, если вам все-таки нужно добавить несколько пробелов подряд в HTML-код, и чтобы браузер отобразил их именно как пробелы? Например, вам нужно сделать отступ в начале строки или добавить больше пространства между словами.

Для этого в HTML существует специальный символ – неразрывный пробел, который записывается как &nbsp;.

&nbsp; – это HTML-сущность (entity), специальный код, который представляет символ пробела, который не будет "схлопнут" браузером. Браузер отобразит &nbsp; именно как один пробел, и несколько &nbsp; подряд будут отображены как несколько пробелов.

Давайте посмотрим, как использовать &nbsp;:

  1. Вернитесь к файлу whitespace.html в текстовом редакторе.

  2. Измените второй параграф, добавив несколько &nbsp; в начале строки и между словами. Скопируйте или измените код второго параграфа следующим образом:

    <p>
    &nbsp;&nbsp;&nbsp;&nbsp;Это    второй &nbsp;&nbsp;&nbsp; параграф, &nbsp;
    в котором &nbsp;&nbsp; используются &nbsp;&nbsp;&nbsp; неразрывные &nbsp; пробелы.
</p>

    В этом примере мы добавили четыре &nbsp; в начале строки, и несколько &nbsp; между словами, чтобы создать дополнительные пробелы.

  3. Сохраните файл whitespace.html и обновите страницу в браузере. Сохраните изменения и обновите страницу whitespace.html в браузере.

Результат:

Теперь вы увидите, что во втором параграфе появились дополнительные пробелы там, где мы добавили &nbsp;. В начале строки появился отступ, и между некоторыми словами стало больше пространства. Браузер отобразил &nbsp; именно как пробелы, в отличие от обычных пробелов в коде, которые он игнорирует.

Когда использовать &nbsp;?

  • Для создания отступов в начале строк (редко рекомендуется). В современной веб-разработке для создания отступов обычно используются CSS-стили, а не &nbsp;.

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

  • Для отображения специальных символов, которые иначе могут интерпретироваться браузером как HTML-код. Например, чтобы показать символ < или > на странице, нужно использовать &lt; и &gt; соответственно.

Важно:

  • Не злоупотребляйте &nbsp; для создания отступов и форматирования текста. Для этих целей лучше использовать CSS. Избыточное использование &nbsp; может сделать HTML-код менее читабельным и усложнить поддержку.

  • &nbsp; – это символ пробела, а не тег переноса строки. Он не создает новую строку. Для переноса строки используется тег <br>, который мы рассмотрим далее.

Переносы строк <br> – Создание новых строк внутри абзаца

Как мы уже выяснили, обычные переносы строк в HTML-коде браузер игнорирует. Если вы хотите принудительно перенести текст на новую строку внутри абзаца или другого текстового блока, вам нужно использовать специальный HTML-тег – <br>.

<br> – это тег переноса строки (line break). Он не является парным тегом (это самозакрывающийся тег), то есть ему не нужен закрывающий тег </br>. Простое использование <br> в любом месте текста в HTML-коде заставит браузер начать новую строку с этого места.

Давайте разберемся с переносами строк на примере:

  1. Откройте файл line_breaks.html в текстовом редакторе и добавьте базовую структуру HTML-документа.

  2. Добавьте один параграф в секцию <body> и напишите в нем пример текста, который мы будем разделять на строки с помощью <br>. Скопируйте или введите следующий код в файл line_breaks.html:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Переносы строк</title>
</head>
<body>
    <p>
        Это пример текста,
        который
        мы разделим
        на
        несколько
        строк
        с помощью тега &lt;br&gt;.
    </p>
</body>
</html>

    В этом примере мы добавили переносы строк в HTML-коде внутри тега <p>, чтобы текст был расположен в несколько строк в редакторе.

  3. Сохраните файл line_breaks.html и откройте его в браузере. Сохраните изменения и откройте файл line_breaks.html в браузере.

Результат:

Вы увидите, что текст отображается в виде одного сплошного параграфа, все переносы строк в HTML-коде были проигнорированы. Браузер "схлопнул" переносы строк, как и пробелы.

  1. Добавьте теги <br> в файл line_breaks.html там, где вы хотите сделать переносы строк. Измените код параграфа следующим образом:

    <p>
    Это пример текста,<br>
    который<br>
    мы разделим<br>
    на<br>
    несколько<br>
    строк<br>
    с помощью тега &lt;br&gt;.
</p>

    Мы добавили тег <br> после каждой фразы, где хотим начать новую строку. Обратите внимание, что &lt;br&gt; в последней строке – это просто текст, который будет отображен на странице, а не HTML-тег. Мы используем HTML-сущность &lt; для отображения символа < в тексте, чтобы браузер не интерпретировал <br> как HTML-тег в этом месте.

  2. Сохраните файл line_breaks.html и обновите страницу в браузере. Сохраните изменения и обновите страницу line_breaks.html в браузере.

Результат:

Теперь вы увидите, что текст в параграфе разделен на несколько строк именно в тех местах, где мы добавили теги <br>. Браузер интерпретировал теги <br> и создал переносы строк, как мы и хотели.

Инструменты разработчика:

Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Выберите тег <p> и разверните его содержимое. Вы увидите, что теги <br> присутствуют в HTML-коде в инструментах разработчика и отображаются как самозакрывающиеся теги <br>.

Когда использовать <br>?

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

  • В случаях, когда визуальное форматирование текста важнее семантической структуры. Однако, старайтесь не злоупотреблять <br> для создания визуальных отступов и пробелов. В большинстве случаев для визуального оформления лучше использовать CSS.

Важно:

  • Тег <br> следует использовать умеренно и только тогда, когда это действительно необходимо для переноса строки внутри текстового контента.

  • Для создания логических разделов текста и абзацев используйте теги <p>, а не <br>. <p> создает новый абзац, который имеет семантическое значение и браузер обрабатывает его как отдельный блок текста (с отступами сверху и снизу). <br> – это просто визуальный перенос строки внутри текущего блока текста.

  • В современной веб-разработке для управления расстояниями между элементами, отступами и вертикальным расположением блоков на странице обычно используются CSS-стили (margin, padding, flexbox, grid и т.д.), а не тег <br>. <br> предназначен именно для переносов строк внутри текстовых блоков, а не для общего макета страницы.

Комментарии в HTML <!-- --> – Пояснения и организация кода

Комментарии в HTML – это важный инструмент для разработчиков, позволяющий добавлять пояснения, заметки и подсказки непосредственно в HTML-код. Комментарии не отображаются браузером на веб-странице, они видны только в исходном коде HTML.

Комментарии используются для:

  • Пояснения сложных участков кода: Чтобы другие разработчики (или вы сами через некоторое время) могли легче понять, что делает тот или иной участок HTML-кода.

  • Описания структуры HTML-документа: Чтобы сделать код более организованным и понятным. Можно комментировать разделы, блоки, отдельные теги и т.д.

  • Временного отключения (комментирования) участков кода: Чтобы временно скрыть какой-то элемент или функциональность на странице, не удаляя код полностью. Это полезно при отладке и тестировании, когда нужно временно исключить какой-то блок кода из работы.

  • Заметок для себя и других разработчиков: Например, "TODO: Добавить валидацию формы", "FIXME: Исправить ошибку в скрипте" и т.д.

Синтаксис комментариев в HTML:

Комментарии в HTML начинаются с символов <!-- и заканчиваются символами -->. Всё, что находится между <!-- и -->, считается комментарием и игнорируется браузером.

Комментарии могут быть однострочными или многострочными – HTML не делает различия. Всё, что находится внутри <!-- --> – это комментарий.

Давайте посмотрим, как использовать комментарии в HTML:

  1. Откройте файл comments.html в текстовом редакторе и добавьте базовую структуру HTML-документа.

  2. Добавьте несколько параграфов в секцию <body>. Добавьте три параграфа с простым текстом.

  3. Добавьте комментарии в файл comments.html. Добавьте однострочный комментарий перед первым параграфом, многострочный комментарий между первым и вторым параграфами, и закомментируйте второй параграф целиком, заключив его в теги комментариев. Скопируйте или измените код файла comments.html следующим образом:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Комментарии в HTML</title>
</head>
<body>
    <!-- Это однострочный комментарий -->
    <p>Это параграф 1. Он будет отображаться на странице.</p>

    <!--
    Это многострочный комментарий.
    Он может занимать несколько строк.
    -->

    <!--
    <p>Это параграф 2.
    Он закомментирован и не будет виден на странице.</p>
    -->

    <p>Это параграф 3. Он тоже будет отображаться на странице.</p>
</body>
</html>

    В этом примере мы добавили комментарии разного типа и закомментировали целый параграф, чтобы показать, как это работает.

  4. Сохраните файл comments.html и откройте его в браузере. Сохраните изменения и откройте файл comments.html в браузере.

Результат:

Вы увидите, что на странице отображаются только параграфы 1 и 3. Параграф 2, который мы закомментировали, полностью исчез с веб-страницы. Комментарии, которые мы добавили в HTML-код, не видны в браузере.

Инструменты разработчика:

Откройте инструменты разработчика (F12) и перейдите на вкладку "Elements". Посмотрите на HTML-код в инструментах разработчика. Вы увидите, что комментарии присутствуют в HTML-коде на вкладке "Elements", они отображаются серым2 цветом и выделены специальными символами <!-- -->, но браузер не отображает их на самой веб-странице. Вы также увидите, что закомментированный параграф 2 (вместе с тегами <p>) также присутствует в HTML-коде в инструментах разработчика, но браузер не отображает его содержимое на странице.

Быстрое добавление комментариев в VS Code и других редакторах:

Большинство текстовых редакторов для веб-разработки, включая Visual Studio Code, предоставляют горячие клавиши для быстрого добавления и удаления комментариев. Это очень удобно при работе с кодом.

  • Закомментировать строку или выделенный блок кода:

    • Windows/Linux: Ctrl + /

    • macOS: Cmd + /

  • Раскомментировать закомментированный код: Выделите закомментированный код и снова нажмите ту же комбинацию клавиш (Ctrl + / или Cmd + /).

Используйте комментарии активно! Хорошо прокомментированный код – это признак хорошего стиля программирования и уважение к другим разработчикам (и к себе в будущем!).

Итоги урока

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

  • Браузеры по умолчанию игнорируют лишние пробелы, табуляции и переносы строк в HTML-коде, "схлопывая" их до одного пробела. Это сделано для гибкости и удобства форматирования кода разработчиками.

  • Для отображения нескольких пробелов подряд в HTML используется специальная HTML-сущность &nbsp; (неразрывный пробел). Однако, не следует злоупотреблять &nbsp; для визуального форматирования, для этого лучше использовать CSS.

  • Для создания принудительного переноса строки внутри текстового блока (без создания нового абзаца) используется тег <br> (самозакрывающийся тег). Используйте <br> умеренно, в основном для переносов строк внутри текста, а не для общего макета страницы.

  • Комментарии в HTML создаются с помощью конструкции <!-- -->. Комментарии не отображаются браузером на веб-странице, но видны в исходном коде. Комментарии используются для пояснений, организации кода и временного отключения участков кода. Активно используйте комментарии для улучшения читабельности и понимания вашего HTML-кода!

Поздравляю, вы отлично поработали, если дошли до конца этого урока!

Теперь вы знаете, как управлять пробелами и переносами строк в HTML, и умеете использовать комментарии для организации и пояснения вашего кода. Эти знания помогут вам создавать более качественный и понятный HTML-код.

Спасибо за внимание, и до встречи на следующем занятии! Не забывайте практиковаться, экспериментировать с кодом и использовать инструменты разработчика для изучения результатов!

Updated on
4. Заголовки
6. Популярные теги