Не всё так просто. Подробнее об HTML-элементах

{"document": [{"text": [{"type": "string", "attributes": {}, "string": "Во "}, {"type": "string", "attributes": {"href": "https://vk.com/@hcj_explorer_community-html-for-what"}, "string": "вводной статье"}, {"type": "string", "attributes": {}, "string": " мы упомянули об HTML-элементах и различиях в их структуре. Сегодня мы поговорим о них подробнее, более полно обсудим их «анатомию» и не только."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "Обложка-элементы.png", "filesize": 59516, "height": 720, "pic_id": 663396, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/08/%D0%9E%D0%B1%D0%BB%D0%BE%D0%B6%D0%BA%D0%B0-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B.jpeg", "width": 1280}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Классификация html-элементов (простой вариант) "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Элементы делятся на две категории – блочные и строчные. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Блочные являются структурными разделами контента и веб-страницы (шапка, списки, абзац, блочная цитата, боковая панель и др.) Они по умолчанию начинаются с новой строки. Следующий за ними контент тоже начинается с новой строки. Блочные элементы могут быть вложены только в другие блочные элементы (и то не всегда. Например, абзац нельзя вкладывать в абзац)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Строчные элементы влияют лишь на небольшую часть контента в документе. Они часто вкладываются в блочные элементы и предназначены для выделения слов в абзаце, встраивания изображений и других целей."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Среди блочных и строчных элементов встречается особый подтип – пустые или void-элементы. Именно их структура не подходит под шаблон, который мы недавно разобрали. Пустые элементы не имеют содержимого и закрывающего тега. "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Классификация элементов (упрощённая)", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "Элементы.png", "filesize": 134999, "height": 1076, "pic_id": 663414, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/08/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B.jpeg", "width": 2168}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Атрибуты: что такое и как пишутся "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Часто элемент содержит один или несколько атрибутов. Они прописываются в открывающем теге, влияют на отображение и поведение содержимого. При этом пользователь не видит ни имя атрибута, ни его значение."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Есть несколько правил написания атрибутов: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Они должны отделяться от тега и друг от друга пробелом."}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "После имени атрибута пишется знак равенства и открываются кавычки (у этого правила есть "}, {"type": "string", "attributes": {"href": "https://vk.com/away.php?to=https%3A%2F%2Fhtml.spec.whatwg.org%2Fmultipage%2Fintroduction.html%23a-quick-introduction-to-html&cc_key="}, "string": "исключения"}, {"type": "string", "attributes": {}, "string": ")"}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "В кавычках пишется значение атрибута."}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Кавычки можно использовать как одинарные, так и двойные. При этом одни должны оборачивать значение, а другие – находится внутри. "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Пример строчного void-элемента <img> с атрибутами src и alt", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "схема-атрибут.jpg", "filesize": 58415, "height": 894, "pic_id": 663420, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/08/%D1%81%D1%85%D0%B5%D0%BC%D0%B0-%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82.jpeg", "width": 1905}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Дополнительно: спецсимволы или проблема с содержимым элементов "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Некоторые символы могут отсутствовать на раскладке клавиатуры или путать браузер, выдавая себя за часть синтаксиса HTML. Как тогда правильно вписать их в документ? Ответ– ссылки мнемоники."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Ссылки мнемоники – это специальный код, который «приказывает» браузеру отобразить нужный символ. Такие ссылки имеют общие черты: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Начинаются на «&» и заканчиваются на «;» "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Браузеры не ставят после них пробел, если он не прописан в коде."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "схема-ссылки-мнемоники.png", "filesize": 90829, "height": 1120, "pic_id": 663424, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/08/%D1%81%D1%85%D0%B5%D0%BC%D0%B0-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8-%D0%BC%D0%BD%D0%B5%D0%BC%D0%BE%D0%BD%D0%B8%D0%BA%D0%B8_5pk9S20.jpeg", "width": 1170}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Задание"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Откройте "}, {"type": "string", "attributes": {"href": "https://vk.com/away.php?to=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_XML_and_HTML_character_entity_references&cc_key="}, "string": "список ссылок-мнемоников"}, {"type": "string", "attributes": {}, "string": ". Найдите код значка авторства (буква «с» в кружочке). Скопируйте его и перейдите на "}, {"type": "string", "attributes": {"href": "https://vk.com/away.php?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fplay&cc_key="}, "string": "Mdn Playground"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Вставьте код в раздел «HTML» и через пробел напишите Copyrighted by «Ваше имя/ник» (без кавычек)."}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Поздравляю! Вы создали пометку о защите контента авторским правом. Примерно то же самое верстальщики прописывают в футере сайтов. "}], "attributes": []}], "selectedRange": [2390, 2390]}