Как комментировать в HTML
Как и комментарии в CSS, добавление комментариев в ваш HTML может помочь вам написать и организовать внутреннюю часть вашей веб-страницы.
Вы можете оставлять заметки, чтобы напоминать себе, где вы остановились в процессе сборки. Вы можете объяснить предполагаемую функциональность раздела кода, будь то ради другого разработчика или для себя в будущем. Вы также можете общаться с другими разработчиками, одновременно работающими над одним и тем же кодом. Вы можете оставить предупреждение, чтобы они запускали определенную функцию только в ночное время, потому что ее выполнение занимает много времени. Или вы можете назначить им задачу или указать им на ошибку в комментарии.
Короче говоря, комментарии в HTML могут помочь вам работать умнее и лучше при создании, отладке или редизайне веб-сайта. Давайте внимательнее посмотрим, что такое комментарий в HTML, а затем определим, что означает «закомментировать» в HTML.
Что за комментарий в HTML?
В HTML комментарий – это текст, заключенный в теги. Этот синтаксис сообщает браузеру, что они являются комментариями и не должны отображаться во внешнем интерфейсе.
Вот пример. Допустим, вы создаете веб-сайт на Bootstrap с командой разработчиков. Вы хотите оставить примечание, напоминающее им, что все кнопки Bootstrap должны использовать основной класс модификатора, чтобы все они были одного цвета.
Вот как может выглядеть ваш HTML:
<div class="container">
<h2>Button with modifier class</h2>
<!-- Buttons should always have .btn-primary class -->
<button class="btn btn-primary" type="submit">Button</button>
</div>
Вот результат на интерфейсе:
Как вы можете видеть выше, комментарий успешно скрыт во внешнем интерфейсе.
Теперь, когда мы понимаем, как комментировать в HTML, давайте посмотрим, как комментировать.
Как закомментировать код в HTML
Чтобы «закомментировать» в HTML, просто поместите теги вокруг кода, который вы хотите скрыть. Эти теги сообщают браузерам не отображать этот код во внешнем интерфейсе.
Комментирование преследует две основные цели. Один из них – отладка вашего кода. Вы можете закомментировать первые несколько строк кода, проверить, возникает ли ошибка по-прежнему, и продолжать повторять процесс до тех пор, пока ошибочный код не будет изолирован.
Вторая цель связана с историей версий. Поскольку комментирование означает, что код будет оставаться видимым в серверной части, это может быть способ показать различные итерации базы кода для новых разработчиков, которые только присоединяются к веб-проекту или унаследовали его.
Давайте посмотрим на пример. Допустим, я создаю страницу в Bootstrap: у меня есть панель навигации, заголовок, два абзаца и кнопка. Может быть, я просматриваю свою работу и обнаруживаю ошибку. В этом случае я могу закомментировать каждый элемент, чтобы определить, в каком разделе кода содержится ошибка.
Или, может быть, я провожу несколько A / B-тестов и обнаруживаю, что кнопка не нажимается, и я хочу ее удалить. В этом случае я мог бы прокомментировать это, оставив примечание, что кнопка CTA на нижней странице не преобразовалась. Затем следующий человек, который придет и попытается оптимизировать коэффициент конверсии на странице, узнает, что нужно начать с другого размещения кнопки.
Вот HTML без комментариев:
<nav class="navbar navbar-expand-sm navbar-light bg-info">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</div>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>
<button class="btn btn-primary" type="submit">Button</button>
</div>
Вот как это выглядит на передней панели:
Чтобы «закомментировать» кнопку, я просто оберну элемент кнопки соответствующими тегами, как показано ниже. Остальной код останется прежним.
<nav class="navbar navbar-expand-sm navbar-light bg-info">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</div>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>
<!-- Button wasn't converting so I removed in July <button class="btn btn-primary" type="submit">Button</button>-->
Все на передней панели будет выглядеть так же, кроме кнопки. Вы можете сами убедиться в этом ниже.
Оставление комментариев в вашем HTML
Комментарии – это еще один способ «поговорить» с людьми в вашем коде. Вы можете добавить пояснительные примечания для других соавторов веб-проекта или оставить себе примечания, напоминающие вам вернуться в раздел или расставить приоритеты во время следующего редизайна. Лучшая часть? Комментарии не будут отображаться в интерфейсе вашего сайта, и их легко освоить, даже если вы только начинаете изучать HTML и CSS.
Источник записи: https://blog.hubspot.com