Как связать теги 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, который тоже сможет подсказать, правильно ли вы вкладывали теги, или нет.

  Источник

  Парные теги

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

  

  

  Рис. 3.1. Вложение тегов, а — правильное, б — неверное

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

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

  Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

  Популярные рецепты

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

  Популярные задачи

  • TEX
  • Отступы между блоков
  • Андроид в тени
  • Ссылка как кнопка
  • Вложенные списки
  • Форма регистрации
  • Объединение ячеек таблицы
  • Обязательные поля формы
  • Цвет и фон в таблице
  • Асуанская плотина
  • Батарейка
  • Заголовки

  Источник

  Парные теги

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

  

  

  Рис. 3.1. Вложение тегов, а — правильное, б — неверное

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

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

  Правила применения тегов

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

  Атрибуты тегов и кавычки

  Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных («пример») или одинарных кавычках (‘пример’). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 3.2).

  Пример 3.2. Использование кавычек в атрибутах тегов

  HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

  

  

  

  В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.

  Теги можно писать как прописными, так и строчными символами

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

  Переносы строк

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

  Пример 3.3. Переносы строк в коде тега

  HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

  

  

  alt=»Вид заголовка в браузере IE»

  

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

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

  Источник

  Парные теги

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

  

  

  Рис. 3.1. Вложение тегов, а — правильное, б — неверное

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

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

  Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

  Популярные рецепты

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

  Популярные задачи

  • TEX
  • Отступы между блоков
  • Андроид в тени
  • Ссылка как кнопка
  • Вложенные списки
  • Форма регистрации
  • Объединение ячеек таблицы
  • Обязательные поля формы
  • Цвет и фон в таблице
  • Асуанская плотина
  • Батарейка
  • Заголовки

  Источник

  Читайте также:  Nginx php files downloading