Блочные и строчные элементы на странице

Послание № 2

Поток документа

Разобравшись основными тегами (html, head, body) и подробнее поговорив о скрытом разделе нашего сайта и о его настройках, мы подошли к очень важному разделу WEB верстки — потоку документа.

Порядок отображения элементов на странице называется потоком документа. Любой элемент, который находится в потоке, занимает на странице свою собственную площадь. Чем выше элемент в коде, тем выше он отображается на странице. Стандартное отображение элементов с верху вниз и с лева на право.

 

Блочные и строчные элементы на странице

Элементы (теги) HTML страницы делятся на блочные и строчные.

Блочные элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания разметки страницы (сетки).

Блочные элементы можно представить, как прямоугольные области на странице. Они имеют следующие особенности:

1. До и после блочного элемента существует перенос строки (то есть он всегда один находится на новой строке).

2. Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.

3. Занимают всё доступное пространство по горизонтали.

К блочным элементам относятся такие теги как: <p>, <h1> и другие.

Еще один важный и распространённый блочный тег — это тег <div>, который обозначает просто «блок» или «прямоугольный контейнер». Этот тег обычно используется для создания разметки страницы (сетки). С ним мы познакомимся позже.

Строчные элементы необходимы для оформления текста на уровне небольших фраз и отдельных слов.

Строчные элементы располагаются друг за другом в одной строке, при необходимости (если не хватает места) строка переносится. Особенности строчных элементов:

1. До и после строчного элемента отсутствуют переносы строки.

2. Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS стилей нельзя.

3. Можно задавать только горизонтальные отступы.

К строчным элементам относятся такие теги как: <a>, <strong>, <em> и другие.

 

Комментарии в HTML

       Комментарий в HTML-коде задаётся так:

<!-- любой комментарий -->

       Текст внутри комментария не отображается браузером на странице и они обычно используются в следующих случаях:

· Для комментирования кода. Всегда полезно оставить подсказку.

· Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

       Комментарии можно использовать в любом месте страницы, кроме тега <title> — внутри него они не работают. Внутри тега <style> HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете чуть позже.

 

Блочные контейнеры

       Давайте знакомится с элементами HTML которые позволяют рисовать сетку любого формата и придавать различным областям семантический смысл (логическую структуру сайта для браузера и поисковиков).

Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.

До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>. С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>).

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

< div > </ div >

d iv — является базовым контейнером для элементов.

Тег <div> не имеет свойств по умолчанию для внешнего отображения, он представляет собой так называемый контейнер, поэтому к нему можно применять всевозможные CSS-стили, чтобы элементы внутри этих тегов приняли желаемый вид.

Этот тег изначально был предназначен для деления веб-страницы на логические фрагменты, такие как нижний колонтитул (подвал), боковое меню и т.п. Но с появлением новой семантической разметки веб-страниц с помощью HTML5, необходимость в таком повсеместном использовании тега отпала.

В настоящее время тег <div> используется для группирования блочных элементов. Тег также позволяет объединять любой набор таких элементов, как заголовок, насколько абзацев, список в единственном блоке, который потом можно позиционировать на веб-странице, создавая сложную схему разметки.

Тег<div> следует применять только в случае, если для выделения области не подходит никакой другой элемент страницы.

<div> <h2>Далеко-далеко.</h2> <img src="img/picture.png" alt="Изображение"> <p>Далеко-далеко за словесными горами в стране гласных и согласных.</p> </div>

<header> </header>

Группирует вводные и навигационные элементы.

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

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

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

<header> <h1>Site description</h1> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header>

< nav > </ nav >

Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри тега <header>.

На странице может быть несколько элементов <nav>.

Не заменяет теги <ul> или <оl>, он просто их обрамляет.

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

<nav> <ul> <li><a>Link 1</a></li> <li><a>Link 2</a></li> <li><a>Link 3</a></li> </ul> </nav>

< article > </ article >

Используется для группировки записей — публикаций, статей, записей блога, комментариев.

Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.

Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article> <header> <h2>...</h2> <span>...</span> </header> <p>...</p> <footer> <a href="">…</a> </footer> </article>

< section > </ section >

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

Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>.

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

<article> <h2>...</h2> <section> <h3>...</h3> <p>...</p> </section> <section> <h3>...</h3> <p>...</p> </section> <p>...</p> </article>

<aside> < / aside>

Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого).

Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи.

Не подходит для блоков, просто позиционированных в стороне.

<aside> <h2>...</h2> <p>...</p> </aside>

<footer> </footer>

Представляет собой нижний колонтитул содержащей его секции или корневого элемента.

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

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>.

<footer> <address>...</address> <small>@2021...</small> </footer>

< main > </ main >

Элемент <main> представляет основное содержимое документа (содержимое элемента <body>).

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

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>

<body> <header> … </header> <main> <h1>Следы невиданных зверей</h1> <p>История о том, как возле столовой появились загадочные розовые слоны… </p> </main> <footer> … </footer> </body>

Атрибуты HTML тегов

Теги могут иметь атрибуты. Атрибут — это дополнительное свойство тега. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки, без этого атрибута браузер просто не сможет загрузить её.

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

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

Картинки в HTML

       <img src=””>

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

Картинки добавляются на веб-страницы с помощью тега <img>.

Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчно-блочным (это единственный элемент, которому доступны свойства и строчных элементов и блочных), то рекомендуется располагать его внутри блочного элемента, например, <div>.

Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению.

Размеры изображения

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и heigh или стилей CSS. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

Форматы графических файлов

Ниже приведены самые часто используемые форматы изображений с кратким описанием.

Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

       Формат WebP — достаточно новый формат, созданный и развиваемый с 2010 года компанией Google. Главная цель этого формата — ещё больше уменьшить вес при сохранении такого же качества.

Особенности WebP:

·сжимает изображения без потерь лучше, чем PNG;

·сжимает изображения с потерями лучше, чем JPEG;

·поддерживает прозрачность (альфа-канал).

 

Ссылки Якоря

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

Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте, присвоив элементу уникальный идентификатор id.

В качестве значения href="" для перехода к этому якорю используется указанный id с символом решетки (#) впереди.

<ul> <li><a href="#one">Lorem.</a></li> <li><a href="#two">Rem?</a></li> </ul> <div> <p id='one'> Далеко-далеко за словесными горами в стране гласных и согласных.</p> <p id='two'> Буквенных родного вершину, дал которой текста инициал агентство, решила!</p> </div>

 

 

HTML Атрибуты

Атрибут Описание src ="…" Задает путь к файлу, который необходимо загрузить или использовать. Применяется в тегах: Img, script, iframe и др. alt ="…" Устанавливает альтернативный текст для изображений. Он позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. title =”…” Описывает содержимое элемента в виде всплывающей подсказки, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей. width ="…"

Для изменения размеров изображения средствами HTML. Допускается использовать значения в пикселах или процентах. Если установлены проценты, то размеры изображения вычисляются относительно родительского элемента — контейнера. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения

height ="…" href ="…" Задает адрес документа, на который следует перейти. target ="…" По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. Этот атрибут может принимать следующие значения: _blank — загружает страницу в новое окно браузера; _self — загружает страницу в текущее окно; _parent — загружает страницу во фрейм-родитель; _top — отменяет все фреймы и загружает страницу в полном окне браузера. data-* =”…” В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-. Это позволяет хранить разную информацию, которая может помочь в работе скриптов, а также для оформления элементов через CSS. hidden представляет собой выключатель, который определяет, отображать объект в окне браузера или нет. id =”…” Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз. class =”…” Задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом. style ="…" Задает стиль элементу с помощью правил CSS.

Таблицы

HTML-таблицы упорядочивают информацию и выводят её на экран с помощью строк и столбцов.

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

Важно!

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

Создаем таблицу

Таблица создаётся при помощи парного тега <table> </table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:

<table>

<tr><td>ячейка 1</td><td> ячейка 2</td></tr>

<tr><td>ячейка 3</td><td> ячейка 4</td></tr>

</table>

Так! Стоп! Стоп! Стоп!!! Я немного разогнался и не объяснил, что к чему, поэтому сейчас пойдем подробнее))) Если с созданием общего контейнера таблицы при помощи тега <table> … </table> все просто, то теперь давайте разберем строки.

Создаем ячейку тела таблицы

Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, внутри тегов <tr> … </tr>, определяют количество ячеек в строке таблицы.

Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>.

<table>

<tr><th>ячейка заголовка 1</th><th>ячейка заголовка 2</th></tr>

<tr><td>ячейка тела таблицы 1</td><td>ячейка тела таблицы 2</td></tr>

<tr><td>ячейка тела таблицы 3</td><td>ячейка тела таблицы 4</td></tr>

</table>

Добавляем рамку

Как вы думаете, чего не хватает в таблице из примера выше? Правильно — рамок. Рамки отсутствуют, потому что браузер использует стандартный атрибут border со значением 0. Давайте исправим это и изменим атрибут border с 0 на 1.

<table border="1">

<tr><th>ячейка 1</th><th>ячейка 2</th></tr>

<tr><td>ячейка 3</td><td>ячейка 4</td></tr>

<tr><td>ячейка 5</td><td>ячейка 6</td></tr>

</table>

Убираем отступы

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

Чтобы избавиться от таких двойных рамок, используется атрибут cellspacing равный 0. Вот так:

<table border="1" cellspacing="0">

<tr><th>ячейка 1</th><th>ячейка 2</th></tr>

<tr><td>ячейка 3</td><td>ячейка 4</td></tr>

<tr><td>ячейка 5</td><td>ячейка 6</td></tr>

</table>

Добавляем подпись к таблице

Элемент <caption> создает подпись таблицы. Добавляется он непосредственно после тега <table>, вне строки или ячейки.

<table>

<caption>Перечень продуктов</caption>

<tr>

<th>№</th><th>Наименование товара</th>

</tr>

<tr>

<td>1</td><td>Томаты свежие</td

</tr>

<tr>

<td>2</td><td>Огурцы свежие</td>

</tr>

</table>

Table атрибуты

Атрибут Описание colspan Количество ячеек в строке для объединения по горизонтали. <td colspan="3"> Возможные значения: число от 1 до 999. rowspan Количество ячеек в столбце для объединения по вертикали. <td rowspan="2"> Возможные значения: число от 1 до 999. border Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной. Когда в теге <table> используется атрибут border без значений (<table border>), то браузер отображает рамку толщиной один пиксел. cellspacing Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет.

Селекторы в CSS

Следом за тегом мы видим h 1 — это так называемый селектор.

Когда вы задаёте стили тега с помощью атрибута style, браузер сразу же понимает, к какому именно тегу применить эти стили (потому что стили находятся внутри тега). Но когда стили подключаются через тег <style>, браузер ищет стилизуемые теги с помощью «селекторов».

Селектор — непонятное слово, правда? Но, мы упростим его и будем называть — проводник, потому что он берет CSS стили и проводит их до тега, на который мы указываем. В данном случае это тег <h1>. У каждого проводника (селектора), есть свое уникальное имя.

Язык селекторов очень мощный и гибкий. Простейший тип селекторов — селекторы по имени тега: p, h1 и так далее. Когда браузер видит такой селектор, он применяет стили и правила ко всем подходящим тегам. Например, ко всем текстовым абзацам или ко всем заголовкам первого уровня.

В общем случае написание CSS-правил выглядит так:

селектор {

       свойство1: значение;

       свойство2: значение;

}

Разобравшись с проводниками (селекторами) по имени тега, давайте подумаем, а удобно использовать только такой вид селекторов или нет.

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

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

На помощь к нам приходят классы и идентификаторы.

 

Классы в CSS

Класс — это всего лишь один из атрибутов HTML-тегов, например:

<p class="help">...</p>

В CSS можно задавать стили для элементов с определённым классом. Для этого используется селектор по классу, который пишется так: .имя-класса, например:

.help { color: green; } — выберет все теги у которого есть атрибут class="help"

Классы гибкие, их можно создавать много и называть любыми понятными именами.

 

Идентификаторы в CSS

Идентификатор — это еще один из атрибутов HTML-тегов, например:

<p id="name">...</p>

В CSS также можно задавать стили для элементов с определённым идентификатором. Для этого используется селектор по id, который пишется так: #имя-идентификатора, например:

#name { color: red; } — выберет все теги с id="name"

 

Различия id и class

Так стоп, а в чем же разница между id и class, ведь с виду они выполняют одинаковую работу?

Верно, работу они выполняют одинаковую, а вот функционал у них разный. Id служит для объявления одного уникального и неповторимого элемента на WEB странице (такой элемент только один), а вот class в свою очередь может примется ко многим элементам. Например, можно сделать много одинаковых блоков зеленого цвета.

Важно!

Имя класса или идентификатора может содержать в себе латинские символы, цифры, символы дефиса “-” и подчеркивания “_” и начинаться оно должно с латинского символа.

Свойства и значения CSS

Итак, язык CSS состоит из селекторов и свойств. Селекторы указывают на то, к каким элементам применять стили, а свойства — на то, как именно отображать выбранные элементы.

Существует огромное количество CSS-свойств, которые влияют практически на все аспекты отображения элементов. Их можно разбить на следующие группы:

· оформление текста;

· работа с размерами и отступами;

· позиционирование элементов;

· декоративные: цвета, фон, тени;

· другие.

Причём каждому свойству соответствует определённый набор значений. Некоторые значения задаются с помощью текстовых констант, например: red, bold, другие с помощью цифровых значений: 12px, 120% и т.п.

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

.block{ background-color: blue; }

И все теги с классом.block изменят свой цвет. Теперь представьте, как долго делать то же самое через инлайновые стили (атрибут тега style=””), когда таких блоков сотни.

 

Комментарии в CSS

Комментарии в CSS языке тоже есть.

Однострочный комментарий создается двумя символами слеша //, такой комментарий можно использовать если мы хотим закомментировать только одну строчку.

Но если мы хотим закомментировать несколько строк кода, то тогда нам на помощь приходит многострочный комментарий, который создается при помощи слешей и звездочек /* … */

Вот как это выглядит в коде:

// Однострочный комментарий

/* Это многострочный комментарий в

CSS языке*/

Послание № 2

Поток документа

Разобравшись основными тегами (html, head, body) и подробнее поговорив о скрытом разделе нашего сайта и о его настройках, мы подошли к очень важному разделу WEB верстки — потоку документа.

Порядок отображения элементов на странице называется потоком документа. Любой элемент, который находится в потоке, занимает на странице свою собственную площадь. Чем выше элемент в коде, тем выше он отображается на странице. Стандартное отображение элементов с верху вниз и с лева на право.

 

Блочные и строчные элементы на странице

Элементы (теги) HTML страницы делятся на блочные и строчные.

Блочные элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания разметки страницы (сетки).

Блочные элементы можно представить, как прямоугольные области на странице. Они имеют следующие особенности:

1. До и после блочного элемента существует перенос строки (то есть он всегда один находится на новой строке).

2. Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.

3. Занимают всё доступное пространство по горизонтали.

К блочным элементам относятся такие теги как: <p>, <h1> и другие.

Еще один важный и распространённый блочный тег — это тег <div>, который обозначает просто «блок» или «прямоугольный контейнер». Этот тег обычно используется для создания разметки страницы (сетки). С ним мы познакомимся позже.

Строчные элементы необходимы для оформления текста на уровне небольших фраз и отдельных слов.

Строчные элементы располагаются друг за другом в одной строке, при необходимости (если не хватает места) строка переносится. Особенности строчных элементов:

1. До и после строчного элемента отсутствуют переносы строки.

2. Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS стилей нельзя.

3. Можно задавать только горизонтальные отступы.

К строчным элементам относятся такие теги как: <a>, <strong>, <em> и другие.

 

Комментарии в HTML

       Комментарий в HTML-коде задаётся так:

<!-- любой комментарий -->

       Текст внутри комментария не отображается браузером на странице и они обычно используются в следующих случаях:

· Для комментирования кода. Всегда полезно оставить подсказку.

· Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

       Комментарии можно использовать в любом месте страницы, кроме тега <title> — внутри него они не работают. Внутри тега <style> HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом, о котором вы узнаете чуть позже.