Тег внутри тега html

HTML: Вложенность тегов

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

Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:

, который указывает, что это маркированный список. Внутри располагаются теги
, определяющие элементы нашего списка.

Интересно: тег, внутри которого вложены другие теги, ещё называют обёрткой или враппером/wrapper

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

Но бывают и исключения. В HTML нельзя вкладывать параграфы в параграфы. Пример ниже будет неправильным:

Параграф 
А вот ещё параграф внутри параграфа
. Параграф недоволен таким соседством 

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

Задание

Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

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

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

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Источник

Как правильно верстать в 2022 году. Часть 2. Как правильно вкладывать теги друг в друга

Что значит правильно? Что является источником истины при работе с HTML? Конечно же это специфиакция! В данный момент существует так называемый «живой стандарт» пятой версии HTML. Это значит, что у него нет мажорных версий и он обновляется регулярно. Посмотреть последнее обновление спецификации можно здесь.

Спецификация HTML — это увесистый документ с кучей разделов. Она существует как для разработчиков браузеров, так и для нас — верстальщиков. Конкретно нас интересуют третий и четвёрный раздел (Semantics, structure, and APIs of HTML documents и The elements of HTML). Эти разделы описывают, как теги можно вкладывать друг в друга и что обозначает каждый тег.

Описание элемента

Каждый элемент имеет метаинформацию и описание.

Сверху размещены метаданные, куда включна следующая информация:

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

Далее размещено описание тега — что он обозначает и как его можно использовать.

Метаданные тега

Метаинформация о теге включает в себя несколько пунктов:

• Категории — обозначает, к каким типам тегов относится элемент, могут быть следующие типы:
  • Metadata content (например и ) — метаданные страницы, обозначающие представление или поведение содержимого, или отношение к другим документам;
  • Flow content (например , ,

    ) — это все теги, используемые в , то есть почти все в целом, за исключением некоторых мета-тегов;

  • Sectioning content (например ) — какие-либо большие секции, как правило имеющие конкретную структуру и заголовок;
  • Heading content (все заголовки – , а также тег, про который я забыл рассказать в прошлой статье — ) — определяет заголовок секции, обозначенной явно, либо .
  • Phrasing content (например , , ) — различный, в основном текстовый контент, но включающий также некоторые элементы, которые позволяют размечать текст на уровне параграфов;
  • Embedded content (например , , ) — контент, встраиваемый извне (другие сайты, файлы, скрипты);
  • Interactive content (например , , ) — теги, с которыми пользователь может взаимодействовать;

  И всё же, как правильно вкладывать теги друг в друга?

  

  Две основные категории тегов — это Metadata (метаданные) и Flow (поточные теги). Метаданные — это то что в основном входит в , а Flow — то что можно положить в . Однако, некоторые мета-теги мы можем разместить в , поэтому они заходят на Flow-контент (например это , и ).

  Внутри потоковых тегов находятся все остальные категории.

  Heading — это просто залоговки всех уровней, а также тег .

  Sectioning — это большие смысловые части документа, секции.

  Phrasing — небольшие слова или словосочетания, фразы. В основном это строчные элементы (по крайней мере они такими являлись в спецификации HTML4). Все остальные теги, не имеющие категории Phrasing, как правило являются блочными.

  Embedded — как уже писал выше, контент, имеющий внешний источник данных, то есть не имеющий прямое отношение к HTML-документу.

  Interactive — категория, пересекающаяся с Flow, Phrasing и Embedded, обозначающая все элементы, с которыми пользователь может взаимодействовать.

  Проверять возможность вкладывания тегов друг в друга можено по следующему алгоритму:

  1. Смотрим на контентную модель тега, в который вкладываем.
  2. Смотрим на категории тега, который вкладываем.
  3. Если видим, что категория нам подходит и нет ограничений, то вкладываем, если нет, то вложение запрещено.

  Давайте разберёмся на примере. Есть тег и мы хотим вложить в него тег : у секции контентая модель Flow, у категории Flow, Phrasing и Palpable. Соответственно вложение допустимо.

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

  • Для лейбла контентной моделью является Phrasing Content, но без вложения других лейблов.

  • не имеет категории Phrasing, поэтому вкладывать

    в нельзя!

  • имеет категорию Phrasing, поэтому мы можем вложить его в .

  Если сильно упрощать, то во Flow мы можем вкладывать и Flow, и Phrasing, а во Phrasing только Phrasing.

  Заключение части 2

  Но всю эту простыню можно было не читать, а просто воспользоваться сервисом https://caninclude.glitch.me, написанным Александром Вишняковым и скрин которого я разместил в шапке поста. Там по аналогии с Can I Use, можно проверить, вкладывается ли один тег в другой или нет.

  Ну и не забывайте валидировать код с помощью W3C Validator, который тоже сможет подсказать, правильно ли вы вкладывали теги, или нет.

  Источник

  Вложенность тегов html

  Если внутри какого либо тега используется еще один или даже несколько других — это называется вложенность тегов html.

  

  Давайте еще раз взглянем на размещенную часть кода html в листинге 1.2

  Под влиянием тега слово «HTML» выделено полужирным шрифтом, но все так же остается частью абзаца

  .

  Давайте рассмотрим еще один пример:

  Добро пожаловать на сайт по изучению языка html

  В этом абзаце мы выделили «языка html» курсивом, да еще и полужирным шрифтом. И обратите внимание: в этом примере вложен в тег . А если прописать наоборот? Вложить в тег . А никаких изменений не произойдет. Можете поэкспериментировать. Здесь нет приоритета тегов.

  Далее нам надо усвоить еще одно правило написания тегов html. Очередность проставления закрывающих тегов. Иными словами — вложенный тег (и открывающий и закрывающий) должны быть внутри родительского тега.

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

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

  Каждый тег может иметь довольно много дочерних, а вот родительский лишь один.

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

  Для более удобного чтения html-кода в нем отмечают уровень вложенности, проставляя отступ конкретного тега от левого края (листинг 1.3).

  

  Взглянув на этот фрагмент html-кода видим, что

  и являются вложенными в .

  Источник

  Вложенные теги HTML

  

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

  Что значит вкладывать теги HTML?

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

  Если у вас есть блок текста, который вы хотите выделить внутри абзаца, у вас будет два HTML-элемента, а также сам текст.

  Пример: это предложение текста.
  

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

   
  Пример. Это текстовое предложение.
   
  

  Чтобы сделать предложение слова жирным, добавьте открывающие и закрывающие теги до и после этого слова.

   
  Пример. Это предложение текста.
   
  

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

  Когда вы вкладываете теги, закрывайте теги в том порядке, в котором вы их открыли. Сначала вы открываете

  , а затем , что означает, что вы изменили его и закрыли , а затем

  .

  Еще один способ думать об этом — снова использовать аналогию с блоками. Если вы поместите коробку в другую коробку, вы должны закрыть внутреннюю, прежде чем сможете закрыть внешнюю или содержащую коробку.

  Добавление дополнительных вложенных тегов

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

   
  Пример. Это предложение текста, а также текст , выделенный курсивом .
   
  

  Вы можете видеть, что наш внешний блок

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

   
   
  Пример. Это предложение текста, а также текст курсив .
   
   
  Это еще один абзац. < / p> 
  
  

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

  Почему вы должны заботиться о вложенности

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

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

  .main-content a  
   color: # F00; 
  >
  

  Другие соображения

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

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

  Источник

  Читайте также:  Виды position в css