{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":9,"offset":21}],"inlineStyleRanges":[{"length":69,"offset":0,"style":"BOLD"}],"text":"Могучий и вездесущий язык HTML – основа основ современного интернета. Благодаря этой простой технологии мы смотрим видео, читаем новости, общаемся с друзьями и планируем свою жизнь. Именно язык HTML определяет отображение и порядок содержимого на веб-страницах. И хотя язык HTML является очень старой и широко известной технологией, хорошему веб-мастеру всегда есть куда расти - изучая всё новые и новые механизмы совершенствования своего мастерства. ","type":"unstyled","key":"fsf4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантические теги HTML - это как раз этап развития мастерства современного программиста и грамотного веб-мастера. Это важный механизм структурирования веб-страниц, благодаря которому сайт становится лучше и понятней. Как минимум, семантически-ориентированный сайт гораздо лучше ранжируется поисковыми системами, привлекая большее количество посетителей. Иначе говоря, чем больше в сайте семантических тегов (и если они применены правильным образом) - тем выше он показывается в поисковике по сравнению с другими сайтами.","type":"unstyled","key":"bmuv8"},{"data":{"image":{"id":"64f31789b73c8d26710a368b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-разработка на языке HTML - это настоящее искусство. И чем более эффективно и правильно ты пишешь свой HTML-код, тем более эффективным становится твой веб-сайт. В конечном итоге, пользу от качественного и семантически-ориентированного HTML получают все - и живые посетители сайта, и роботы поисковых систем, и ИИ-ботты.","type":"atomic:image","key":"89h01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":169,"offset":0,"style":"BOLD"}],"text":"Стиль того, как ты пишешь свой HTML, имеет важное значение, поскольку стилистика и правильность применения кода прямым образом влияет на эффективность индексации сайта. Что в конечном итоге определяет правильность представления информации посетителям. Хороший сайт это не только набор тегов

, и . Это эффективная структура, которая одинаково хорошо работает как для живых людей, так и для роботов, которые анализируют информацию и транслируют её в окружающий мир.","type":"unstyled","key":"fqjmi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы поговорим семантический HTML, который относится к HTML-коду, само-описывающему своё назначение. В этом руководстве для начинающих я расскажу, что такое семантический HTML, как его писать и почему он так важен для маркетологов и начинающих веб-разработчиков. Наконец, мы предоставим список общих семантических элементов для улучшения твоих навыков.","type":"unstyled","key":"dagiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое семантический HTML? \uD83D\uDCCB","type":"header-two","key":"8gnle"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":179,"offset":0,"style":"BOLD"}],"text":"Семантический HTML (также известный как семантическая разметка) представляет собой способ использование специальных тегов HTML для точного определения функций элементов страницы. Такой способ написания кода эффективно передает значение HTML-элементов как компьютерам, так и людям. Это очень сильно помогает веб-браузерам, поисковым системам, вспомогательным технологиям и разработчикам понимать различные компоненты веб-страницы - и явным образом трактовать их назначение.","type":"unstyled","key":"30k5i"},{"data":{"image":{"id":"64f224f5be84d973e4b2f0c9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантический HTML подразумевает использование HTML-тегов, которые передают смысл и структуру содержимому, улучшая доступность и оптимизацию для поисковых систем.","type":"atomic:image","key":"4dr3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантические теги имеют явные имена, которые дают четкие инструкции как людям, так и машинам, интерпретирующим код. В конечном итоге, компьютерные поисковые системы в прямом смысле \"понимают\", из чего состоит веб-страница, и на что нужно обратить внимание в первую очередь. И если понятный текст на естественном языке помогает передать содержимое страницы живым людям, то семантические теги помогают передать содержимое страницы поисковым роботам и системам искусственного интеллекта.","type":"unstyled","key":"722bi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простым примером может служить тег

(paragraph) в HTML, который служит семантическим тегом для абзацев. Любое устройство или программное обеспечение, распознающее этот тег, будет интерпретировать содержимое между открывающим и закрывающим тегами как абзац текста. То есть, как часть страницы с текстом, которая содержит некоторый смысл, связанный с этой страницей.","type":"unstyled","key":"39eqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":0,"style":"BOLD"}],"text":"Различные другие распространенные семантические теги HTML:","type":"unstyled","key":"ell0v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

,

и т.д.: заголовки на странице в порядке убывания важности.","type":"unordered-list-item","key":"6eb9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":": гиперссылка.","type":"unordered-list-item","key":"2kvhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

, пользователи могут использовать специальные элементы управления клавиатурой для навигации по строкам по вертикали и по горизонтали между столбцами. Написание хорошо структурированного и осмысленного HTML позволяет расширить возможности специальных возможностей без каких-либо дополнительных усилий.","type":"unstyled","key":"8h1bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователи могут использовать программы чтения с экрана для более эффективной навигации по веб-страницам, перемещаясь между похожими элементами или извлекая сводку похожих элементов. Это подчеркивает важность точного использования семантических тегов.","type":"unstyled","key":"4od29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SEO - поисковая оптимизация","type":"header-three","key":"3p47t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":158,"offset":0,"style":"BOLD"}],"text":"Семантическая разметка, подобно вспомогательным технологиям, помогает сканерам поисковых систем эффективно понимать структуру и содержание твоей веб-страницы. Использование семантического HTML позволяет поисковым системам идентифицировать и определять приоритетность индексируемого контента.","type":"unstyled","key":"20qqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, Тег охватывает основное содержимое страницы, помогая идентифицировать отдельные разделы и предотвратить индексирование избыточных элементов. Теги
,
и
можно использовать для менее важного контента, а тег
направляет ботов в меню навигации для перехода по ссылкам всего сайта.","type":"unstyled","key":"d1b7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем лучше твой сайт адаптирован под сканирование поисковыми системами - тем более быстро и более правильно его просканируют поисковые роботы. А это в свою очередь, прямым образом повлияет на позиции твоего сайта в поисковых системах - и количество посещений сайта, которое ты сможешь в итоге получить.","type":"unstyled","key":"3jus1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читабельность и удобная структура для человека","type":"header-three","key":"dn10c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":138,"offset":0,"style":"BOLD"}],"text":"Веб-разработчики часто ежедневно пишут и проверяют большие объемы кода. Поэтому любой инструмент или техника, упрощающие их работу, ценны. Использование семантически значимой разметки позволяет разработчикам более эффективно находить определенные элементы страницы по сравнению с поиском по многочисленным тегам
. Например, если им нужно найти навигацию по странице, они могут просто выполнить поиск по тегу
.","type":"unstyled","key":"ap6f3"},{"data":{"image":{"id":"64f2251d9d222159bbd3ee54"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-теги сами по себе не предназначены для чтения человеком, поскольку они в первую очередь служат структурными элементами для веб-браузеров, позволяющими правильно интерпретировать и отображать веб-страницы. Однако разработчики могут добавлять комментарии и использовать согласованные отступы и форматирование, чтобы улучшить читаемость HTML-кода для понимания и обслуживания человеком.","type":"atomic:image","key":"9a6un"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошая читаемость имеет решающее значение, особенно при работе в команде. Нереально предполагать, что твои коллеги или даже ты в будущем мгновенно поймут твой код. Тем не менее, благодаря эффективной организации твоего контента другие разработчики быстро поймут структуру, что приведет к более эффективной разработке.","type":"unstyled","key":"bgeon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Краткий список основных семантических HTML-тегов \uD83D\uDC68‍\uD83D\uDCBB","type":"header-two","key":"4hnsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Учитывая, что семантический HTML основан на правильном использовании тегов, давай рассмотрим несколько часто используемых семантических тегов, которые ты можешь включить на свой веб-сайт. Эти теги сгруппированы в теги, используемые для текста, теги, передающие структуру страницы, и другие полезные семантические теги.","type":"unstyled","key":"bv56u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантические HTML-теги для текста","type":"header-three","key":"dudto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот эти теги передают смысл текста, который они содержат:","type":"unstyled","key":"e5c97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
(абзац): абзац текста, представленный в виде блока.","type":"unordered-list-item","key":"6r49k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
,
,
,
,
,
(заголовок): заголовок страницы.
– это заголовок верхнего уровня, и на странице он должен быть только один. Следующие теги упорядочены по убыванию важности. Браузеры будут применять стиль шрифта и его размер соответствующим образом.","type":"unordered-list-item","key":"6n65t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
(упорядоченный список): список элементов, которые должны отображаться в определенном порядке. Обычно браузеры присваивают номера каждому элементу.","type":"unordered-list-item","key":"7k06s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
(неупорядоченный список): список элементов, порядок в которых не важен. Браузеры обычно обозначают каждый элемент маркерами или тире","type":"unordered-list-item","key":"e3a1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" (привязка): гиперссылка. По умолчанию браузеры меняют цвет ссылки на синий и добавляют подчеркивание, которое ты можешь удалить .","type":"unordered-list-item","key":"71aul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" (цитата) и
: цитата. Используй для более коротких кавычек и
для более длинных.","type":"unordered-list-item","key":"92pud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<код>: Компьютерный код. Браузеры обычно применяют стили, чтобы отличить этот текст от окружающего текста.","type":"unordered-list-item","key":"4r095"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" (выделение): выделяет текст. Большинство браузеров по умолчанию выделяют курсивом текст внутри этого тега.","type":"unordered-list-item","key":"air6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":": привлекает внимание к важному тексту. Большинство браузеров по умолчанию выделяют текст внутри этого тега жирным шрифтом.","type":"unordered-list-item","key":"dblpi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантические HTML-теги для структуры","type":"header-three","key":"fm6rt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти HTML-теги позволяют классифицировать дочерние элементы внутри разделов, при этом каждый раздел содержит связанный контент.","type":"unstyled","key":"7u5te"},{"data":{"image":{"id":"64f2254747d7fd70efe7dbe3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантические HTML-теги для структуры включают
,
,
,
,
,
,
,
и
.","type":"atomic:image","key":"af462"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
: относится к разделу заголовка веб-страницы, обычно включающему название организации, логотип, главную навигацию, панель поиска, приглашение для входа в систему и значок корзины покупок.","type":"unordered-list-item","key":"d9ssu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
: нижняя часть веб-страницы, часто содержащая дополнительную информацию, такую как адрес, контактную форму и юридические данные.","type":"unordered-list-item","key":"ad45d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
: содержит основное содержимое веб-страницы, специфичное для этой страницы и на котором посетители обычно проводят большую часть своего времени.","type":"unordered-list-item","key":"enrf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
: представляет собой навигацию по сайту и обычно состоит из списка ссылок на различные части сайта.","type":"unordered-list-item","key":"15tdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
: содержит связанный контент, который не является частью основного контента, но все же связан с ним, например список связанных сообщений или боковую панель с медийной рекламой.","type":"unordered-list-item","key":"5j059"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
: представляет собой отдельный фрагмент контента, например сообщение в блоге или новостную статью.","type":"unordered-list-item","key":"dtpp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
: обозначает определенную часть более длинного текста, например, назначение разных
разным заголовкам h2 в сообщении блога.","type":"unordered-list-item","key":"3bpkf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополнительные семантические теги HTML включают в себя:","type":"unstyled","key":"773h1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":": этот тег представляет изображение","type":"ordered-list-item","key":"41nr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

: используется для создания таблицы со столбцами и строками для отображения данных","type":"ordered-list-item","key":"aree3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
и
: эти теги используются для изображений, которым необходимо описание. Тег
содержит изображение, а тег
содержит подпись к изображению","type":"ordered-list-item","key":"7imbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":": этот тег является встроенным элементом.","type":"ordered-list-item","key":"9akam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантическая разметка улучшает читаемость кода, поисковую оптимизацию и доступность вспомогательных технологий. Кроме того, твои коллеги-разработчики оценят твоё внимание к деталям и приверженность лучшим практикам.","type":"unstyled","key":"333tj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо использования общих тегов, таких как <span> или <div>, при структурировании веб-страницы полезно рассмотреть каждый элемент и найти семантический способ его позиционирования. Инвестирование времени и усилий в этом стоит того.","type":"unstyled","key":"3p6pr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантический HTML - это хороший стиль программирования и структурирования веб-страниц. От его правильного использования выигрывают все участники процесса. Будь джедаем, будь блистающим и доблестным рыцарем светлой стороны. Используй семантический HTML.","type":"unstyled","key":"ae56v"},{"data":{"image":{"id":"64f22e851da1401515a23403"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантический HTML – это хорошо продуманный HTML, соответствующий лучшим практикам. Включение этих практик на ранних этапах твоего пути к программированию, особенно при изучении базового языка, такого как HTML, имеет решающее значение. Развитие хороших привычек с самого начала увеличивает вероятность того, что ты будешь придерживаться их по мере приобретения более продвинутых навыков.","type":"atomic:image","key":"4h52c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDD25 Понравилось? Подпишись! Победим восстание роботов вместе! \uD83D\uDD25","type":"unstyled","key":"dr3b1"},{"data":{"image":{"id":"658988b4cf03b714f2a9ba58"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e7ji4"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":6,"offset":218}],"inlineStyleRanges":[{"length":223,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDE80 P.S. Ты можешь круто поддержать меня и проект \"Войти в IT\" на boosty! Я публикую там более эксклюзивный и профессиональный, иногда немного личный контент. Хочешь посмотреть как я выгляжу в реальной жизни? Тогда жми: Ссылка \uD83D\uDE80","type":"unstyled","key":"912rm"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":6,"offset":80}],"inlineStyleRanges":[],"text":"P.S.2 У меня ещё есть Telegram-канал. Там посты чуть попроще, и чуть повеселей. Ссылка","type":"unstyled","key":"2lgf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"qzJTn34X523qK5RWkqoB"}],"entityMap":{"0":{"data":{"url":"https://dzen.ru/a/ZOd3IfbMwVvRJWr4"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://dzen.ru/a/ZOv1cJ5vyGlcAr_E"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://boosty.to/vitvit"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://t.me/+cnhuPUAZeGBhNDli"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>