{"draftJsState":{"blocks":[{"data":{"image":{"id":"68ff0d3d4a5a361f835746ba"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9qo33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Народ, всем привет. В среде веб-разработки есть теги, которые видны и понятны сразу, ну например,

или , а есть такие, которые играют некую вспомогательную роль. Один из самых часто используемых и универсальных тегов второго типа, это (кстати, мой любимчик). Несмотря на простоту, он является довольно мощным инструментом для оформления и, скажем, структурирования текста на веб-страницах. Давайте сегодня, в этой статье мы подробно разберем, что такое , зачем он нужен, как его правильно применять, и я покажу его действие на примерах из практики.","type":"unstyled","key":"am4jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое ","type":"header-two","key":"74ht6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сам по себе тег это строчный (inline) контейнер без какого-либо собственного смыслового значения. Он используется для оборачивания фрагмента текста или других строчных элементов, чтобы можно было применить к ним стили CSS или поведение с помощью JavaScript. Если говорить еще проще, то нужен, чтобы выделить часть текста внутри строки и что-то с ней сделать, скажем, поменять цвет, добавить эффект наведения, скрыть, выделить и т.д.","type":"unstyled","key":"1piip"},{"data":{"image":{"id":"68ff0d609888ca4a710c8346"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d19r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Это важное слово выделено красным цветом.
","type":"blockquote","key":"b1si0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результатом будем, что слово «важное» отображается красным, а остальной текст остаётся обычным. Если говорить об основных характеристиках, то, как я сказал, это строчный элемент, закрывающий тег обязателен (), поддерживает все основные, в том числе, глобальные атрибуты, а также события (например, class, id, style, onclick и др.). И он не имеет собственного визуального стиля или структуры, и без CSS он никак не влияет на внешний вид текста.","type":"unstyled","key":"9j87j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда использовать ?","type":"header-two","key":"q0lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Ну, использование тега оправдано, когда нужно просто выделить часть текста для стилизации. Например, изменить цвет, размер, шрифт или добавить подчеркивание.","type":"unstyled","key":"mo99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Я люблю программировать.
","type":"blockquote","key":"1sfn2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Когда нужно добавить JavaScript-поведение, например, вы можете назначить обработчики событий:","type":"unstyled","key":"6grvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажми на меня","type":"blockquote","key":"21the"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Ну и семантически разделить контент, если других тегов не подходит. Например, если нужно стилизовать только часть фразы в абзаце, но использовать или неуместно. Я чаще всего использую его именно так, когда у меня, скажем, есть часть стиля текста (не заголовки, а просто отдельные элементы), которые повторяются.","type":"unstyled","key":"d7csh"},{"data":{"image":{"id":"68ff0df9065c8752bc5df560"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"87be7"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":8,"offset":41}],"inlineStyleRanges":[],"text":"Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.","type":"blockquote","key":"55vmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но при этом, несмотря на универсальность, не должен подменять собой семантические теги, и это важно. Не злоупотребляйте им, и если можно использовать более точный тег, то выбирайте его. Чаще всего его используют вместо заголовков, и это плохо. И даже если хотите выделить важное слово, то лучше применить или , а не просто . Тут нужно чувствовать эту грань. По факту нужно применять там, где семантика не нужна, а просто нужно что-то выделить «для красоты и стиля».","type":"unstyled","key":"7oncr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Еще иногда новички путают и
. Это тоже плохо, ведь у первого тип элемент строчный (inline), а у второго блочный (block).","type":"blockquote","key":"etk9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применение CSS к ","type":"header-two","key":"b7hic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Использование классов","type":"header-three","key":"aone5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Сегодня солнечно и тепло.
","type":"blockquote","key":"2mg6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cup24"},{"data":{"image":{"id":"68ff0ddb3332bd720b73e785"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3ogg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Использование идентификаторов","type":"header-three","key":"36p3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Алексей","type":"blockquote","key":"d0sbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1lmuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Комбинации","type":"header-three","key":"2quop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно применять несколько классов сразу:","type":"unstyled","key":"cbirr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"текст","type":"blockquote","key":"a743c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"e17p3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наш и JavaScript","type":"header-two","key":"e3sgh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег часто используется как интерактивный элемент для JavaScript. Например, чтобы обрабатывать клики или изменять текст динамически.","type":"unstyled","key":"6rpt6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Привет, гость!
","type":"blockquote","key":"7c873"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2k296"},{"data":{"image":{"id":"68ff0d852c86e33ffc41f4a8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6eu5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда пользователь нажимает кнопку, текст внутри изменяется.","type":"unstyled","key":"bbbs4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По факту вот и все. Тут важно помнить, что, поскольку не несет смысловой нагрузки, поисковые системы и программы экранного доступа (например, для людей с нарушениями зрения) не придают значения содержимому . Если информация имеет смысл, то всегда используйте семантические теги:","type":"unstyled","key":"3k55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"}],"text":" — для выделения важности или интонации,","type":"unordered-list-item","key":"2t933"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"}],"text":" — для сильного выделения,","type":"unordered-list-item","key":"bl8l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":" — для подсветки.","type":"unordered-list-item","key":"7lupd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" оставляйте для тех случаев, когда нужна чисто визуальная или скриптовая обработка.","type":"unstyled","key":"611vf"},{"data":{"image":{"id":"68ff0e204f58bf206cf60769"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"26li6"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":13,"offset":43}],"inlineStyleRanges":[{"length":110,"offset":0,"style":"ITALIC"}],"text":"Если Вам нравятся наши статьи, и вы хотите отблагодарить автора (на развитие канала), нам будет очень приятно!","type":"unstyled","key":"69jnq"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"68f1e9f373de4b29c212d8d2","originalUrl":"https://dzen.ru/a/aPHp83PeSynCEtjS","publisherId":"6562f3ef62828f62b0249d43","publisherItemId":"-6540674709078967694","publisherName":"Каморка Программиста","publisherAvatar":{"id":"6562f41afb901e418c6c958c","groupId":271828,"imageName":"pub_6562f3ef62828f62b0249d43_6562f41afb901e418c6c958c","namespace":"zen-logos","meta":{"mainColor":"#080808","origFormat":"jpeg"}},"title":"Метод index() в Python, как он работает и где пригодится","publishTime":1761462018681,"isPublisherVerified":false,"image":{"id":"68f1ea44a5acc80110be1018","groupId":271828,"imageName":"pub_68f1e9f373de4b29c212d8d2_68f1ea44a5acc80110be1018","namespace":"zen_doc","meta":{"mainColor":"#F8F8F8","origFormat":"JPEG"},"sizes":{"orig":{"width":1280,"height":720},"scale_600":{"width":600,"height":338},"scale_1200":{"width":1200,"height":675},"scale_2400":{"width":1280,"height":720}}},"isPremium":false,"timeToReadSeconds":206}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"934b6"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"68db7a758ff00a47229f3fd2","originalUrl":"https://dzen.ru/a/aNt6dY_wCkcinz_S","publisherId":"6562f3ef62828f62b0249d43","publisherItemId":"-6540674709078967694","publisherName":"Каморка Программиста","publisherAvatar":{"id":"6562f41afb901e418c6c958c","groupId":271828,"imageName":"pub_6562f3ef62828f62b0249d43_6562f41afb901e418c6c958c","namespace":"zen-logos","meta":{"mainColor":"#080808","origFormat":"jpeg"}},"title":"Как выбрать смартфон в 2025 году, ключевые точки и параметры","publishTime":1759734078989,"isPublisherVerified":false,"image":{"id":"68db7acf384bc63d56168134","groupId":271828,"imageName":"pub_68db7a758ff00a47229f3fd2_68db7acf384bc63d56168134","namespace":"zen_doc","meta":{"mainColor":"#F8F8F8","origFormat":"JPEG"},"sizes":{"orig":{"width":1280,"height":720},"scale_600":{"width":600,"height":338},"scale_1200":{"width":1200,"height":675},"scale_2400":{"width":1280,"height":720}}},"isPremium":false,"timeToReadSeconds":261,"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"8m6nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e335m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"3hzTE3dc8nzvMpcOtFF2"}],"entityMap":{"0":{"data":{"href":"https://t.me/%204ch39yeGdP8xYzMy","url":"https://t.me/%204ch39yeGdP8xYzMy"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://dzen.ru/kamorka_programmista?donate=true","url":"https://dzen.ru/kamorka_programmista?donate=true"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}