Вложение элементов HTML

Development | Amber | Комментировать запись

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

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

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

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

Элементы HTML могут быть вложенными – то есть один элемент может быть помещен внутри другого элемента. Вложение позволяет применять несколько тегов HTML к одному фрагменту контента. Для примера попробуйте вставить следующий фрагмент кода в файл index.html:

<strong>My bold text and <em>my bold and emphasized text</em></strong>

Сохраните файл и перезагрузите его в браузере.

Примечание: Инструкции по созданию файла index.html вы найдете в руководстве Подготовка HTML-проекта, а о загрузке файла в браузер – в мануале Основы работы с HTML-элементами.

 Вы должны получить такую страницу:

My bold text and my bold and emphasized text

Рекомендации по вложению элементов HTML

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

К примеру, в приведенном ниже коде тег <em> закрывается первым, поскольку это был последний тег, который открывался. Тег <strong> закрывается последним, так как он открывался первым.

This sentence contains HTML elements that are <strong><em>nested according to best practices</em></strong>.

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

This sentence contains HTML elements that are <strong><em>not nested according to best practices</strong></em>.

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