HTML: Вложенность тегов
Важной концепцией HTML является вложенность тегов. Внутрь HTML-тега можно помещать не только текст, как было ранее, но и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее.
Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:
- , который указывает, что это маркированный список. Внутри располагаются теги
, определяющие элементы нашего списка.
Интересно: тег, внутри которого вложены другие теги, ещё называют обёрткой или враппером/wrapper
Дерево может разрастаться и дальше. В уроках про списки будет показано, что внутри элементов списка могут располагаться другие списки и этот процесс почти бесконечен.
Но бывают и исключения. В HTML нельзя вкладывать параграфы в параграфы. Пример ниже будет неправильным:
Параграф
А вот ещё параграф внутри параграфа
. Параграф недоволен таким соседством В этом уроке мы познакомились с концепцией вложенности тегов в HTML и рассмотрели её на примере создания маркированных списков. В процессе прохождения курса вы изучите множество ситуаций, когда вложенность является лучшим решением, а так же узнаете о тегах, которые нельзя вкладывать друг в друга
Задание
Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Что нужно знать об HTML-элементах
Как я уже говорил ранее, все элементы веб-документа, созданные с помощью пары тегов — открывающего и закрывающего — могут выполнять роль контейнеров , содержимым которых может быть не только текст, но и другие — вложенные — элементы.
Язык HTML предоставляет много вариантов вложения элементов, например, можно вложить один элемент в другой, а затем эту комбинацию вложить в еще один элемент и т.д. до бесконечности. Однако надо заметить, что вкладывать одни элементы в другие можно не как взбредёт в голову, а только в соответствии с определёнными правилами, о которых речь пойдёт ниже.
Блочные и строчные элементы
Ещё в первой версии стандарта HTML были введены понятия блочных ( block structuring elements ) и строчных ( phrase elements ) элементов.
К блочным относятся элементы, которые всегда представляют собой прямоугольную область и, будучи вложенными в другой элемент, по умолчанию занимают всю ширину элемента-контейнера. Браузеры обычно отображают блочные элементы с переводом строки до и после элемента (то есть каждый блочный элемент отображается с новой строки, как и любой другой элемент, следующий за ним). Высота области блочного элемента определяется объёмом его содержимого.
Основным предназначением блочных элементов является формирование структуры документа, выделение в нём крупных блоков — статей, заголовков, абзацев, таблиц и т.п.
Чтобы увидеть, как всё это выглядит на деле, наберём небольшой фрагмент HTML-кода и с помощью средств CSS установим для основных структурных элементов документа границы: синего цвета — для элемента-контейнера , красного цвета — для заголовков и абзацев:
charset="utf-8"> Example body border: 2px solid #4169E1> h2, h3, p border: 2px solid #FF4500> Введение в HTML Как появился язык разметки Первые языки разметки появились где-то в конце 80-х годов прошлого века. Толчком к их появлению стало повсеместное распространение глобальных компьютерных сетей, пользователями которых в то время являлись прежде всего различные университеты и научно-исследовательские центры. Учёным было просто необходимо обмениваться различной научной и технической документацией, и им пришла мысль размещать эту документацию в глобальной сети в виде страниц гипертекста. Именно для создания таких страниц и были разработаны языки разметки гипертекста, а для просмотра - специальные программы - браузеры.
При открытии в браузере это будет выглядеть следующим образом:
Строчными же принято называть элементы, которые могут быть только частью других элементов. Обычно они являются частью какой-либо текстовой строки и занимают только то пространство, которое необходимое для отображения их содержимого.
Основным предназначением строчных элементов является выделение отдельных частей текстового содержимого, например, формул, примеров кода и т.п., а также вставка в это содержимое ссылок, рисунков и других объектов.
Чтобы увидеть, как выглядят строчные элементы на экране, воспользуемся уже имеющимся фрагментом HTML-кода, но добавим в него строчный элемент (данный элемент имитирует выделение текста с помощью маркера):
charset="utf-8"> Example body border: 2px solid #4169E1> h2, h3, p border: 2px solid #FF4500> Введение в HTML Как появился язык разметки Первые языки разметки появились где-то в конце 80-х годов прошлого века. Толчком к их появлению стало повсеместное распространение глобальных компьютерных сетей, пользователями которых в то время являлись прежде всего различные университеты и научно-исследовательские центры. Учёным было просто необходимо обмениваться различной научной и технической документацией, и им пришла мысль размещать эту документацию в глобальной сети в виде страниц гипертекста. Именно для создания таких страниц и были разработаны языки разметки гипертекста, а для просмотра - специальные программы - браузеры .
Уже из определений блочных и строчных элементов становится понятен основной принцип, по которому одни элементы могут вкладываться в другие. Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них строчные элементы. Внутри строчного же элемента может находиться только текстовое содержимое и другие строчные элементы.
Добавлять внутрь строчных элементов блочные категорически запрещено, но, тем не менее, в спецификации HTML 5 было сделано исключение для элемента (см. спецификацию). Например, для создания блоков-ссылок разрешается заключать между тегами и абзацы, списки, таблицы и даже целые разделы, но при условии, что внутри последних нет интерактивного содержимого — кнопок или других ссылок.
Примечание: Надо заметить, с выходом спецификации HTML 5 понятия блочных и строчных элементов исчезли из языка разметки и перекочевали в язык стилей. Теперь блочными принято называть элементы, у которых CSS-свойство display имеет значение block , а строчными — элементы, у которых свойство display имеет значение inline . Для элементов, которые согласно спецификациям HTML ранее были отнесены к блочным или строчным, данные значения свойства display применяются по умолчанию.
Порядок чередования тегов вложенных элементов
При создании многоуровневых конструкций, когда одни элементы вкладываются в другие, следует особенно внимательно относиться к порядку чередования тегов вложенных элементов и тегов элементов-контейнеров. Вложенный элемент полностью, включая его открывающий и его закрывающий теги, должен находиться внутри элемента-контейнера. Никаких пересечений границ элементов быть не должно.
Пример правильного вложения элементов:
Пример неправильного вложения элементов
Согласно существующим стандартам, закрывающие теги некоторых блочных элементов (например, абзацев, элементов списка и некоторых других) являются необязательными, то есть их можно опускать. Это оговаривается в спецификации языка HTML при описании соответствующих тегов. Браузер в таких случаях будет расценивать начальный тег следующего блочного элемента как конец предыдущего блока. Однако если элемент представляет собой контейнер для других (вложенных) элементов, присутствие закрывающего тега становится желательным, так как будет способствовать лучшей читаемости исходного кода, сделает его более наглядным и позволит избежать многочисленных ошибок.
Другие статьи по схожей тематике
- Веб-разработка
- CSS
- HTML
- JavaScript
- Инструментарий
- 1С версии 6.0
- 1С версии 7.7
- Браузеры
- Бухгалтерские программы
- Криптографическое ПО
- Офисные программы
- Прочий софт
Словарь терминов
Вложенность тегов (от англ. tag – бирка, метка, ярлык) —- это способ построения и создания языка разметки гипертекста (в формате HTML, XML и др.), при котором происходит вложение одного тега в другой.
Теги (дескрипторы) — это ключевые слова, с помощью которых строится контент на веб-страницах и в программном обеспечении. В формате XML теги являются элементом документа, а текст, расположенный между первым (начальным) и последним (конечным) тегом, является его содержанием.
Используют начальный (открывающий тег) вместе с конечным (закрывающим) тегом. Пример пустого элемента: HR>/HR>
Свойства тегов
Теги имеют дополнительные свойства в виде атрибутов, которые помогают разнообразить редактирование и форматирование текста, наделяют теги дополнительными возможностями. С помощью атрибутов тегов создается кодировка web-страницы. Например, при использовании тега font> и его атрибутов можно выделить часть текста другим шрифтом. Для этого необходимо внести данные о размере шрифта и его наименовании: font face=»Times, Calibry» size=8> выделяемый текст /font>
Часто одни теги вкладываются в другие. Это делается для того, чтобы действие внутреннего (вложенного) тега накладывалось на действие внешнего тега. Например, P>Добро пожаловать всем EM>STRONG>Участникам форума!/STRONG>/EM>. /P>
Здесь мы видим, что текст «…участникам форума» заключен в тег STRONG> для того, чтобы выделить его жирным шрифтом. Далее тег STRONG> вложен в тег EM> для того, чтобы текст выделился курсивом. И все это вложено в тег P>, чтобы текст «Добро пожаловать всем Участникам форума!» начинался с новой строки.
Вложенность дает возможность наиболее полно и разнообразно использовать свойства тегов. Каждый тег имеет свое значение, вся интерпретация определена организацией W3C.
Доска почета
Автозапчасти спб, продажа автозапчастей Санкт-Петербург. Купить запчасти для иномарок
Вложенность тегов html
Если внутри какого либо тега используется еще один или даже несколько других — это называется вложенность тегов html.
Давайте еще раз взглянем на размещенную часть кода html в листинге 1.2
Под влиянием тега слово «HTML» выделено полужирным шрифтом, но все так же остается частью абзаца
.
Давайте рассмотрим еще один пример:
Добро пожаловать на сайт по изучению языка html
В этом абзаце мы выделили «языка html» курсивом, да еще и полужирным шрифтом. И обратите внимание: в этом примере вложен в тег . А если прописать наоборот? Вложить в тег . А никаких изменений не произойдет. Можете поэкспериментировать. Здесь нет приоритета тегов.
Далее нам надо усвоить еще одно правило написания тегов html. Очередность проставления закрывающих тегов. Иными словами — вложенный тег (и открывающий и закрывающий) должны быть внутри родительского тега.
В настоящее время браузеры научились исправлять мелкие опечатки в html-коде, но только мелкие. В противном случае страница может отобразиться не корректно.
Тег, в котором непосредственно размещен другой тег, называют родительским (родителем) для данного тега, а вложенный тег называют дочерним (потомком).
Каждый тег может иметь довольно много дочерних, а вот родительский лишь один.
Количество тегов, в которые последовательно вложен тот или иной тег, называют уровень вложенности. У некоторых страниц уровень вложенности отдельных тегов может достигать нескольких десятков.
Для более удобного чтения html-кода в нем отмечают уровень вложенности, проставляя отступ конкретного тега от левого края (листинг 1.3).
Взглянув на этот фрагмент html-кода видим, что
и являются вложенными в .
