Как правильно верстать в 2022 году. Часть 2. Как правильно вкладывать теги друг в друга
Вступление
Привет хабр! Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.
В этой статье мы говорим о вложении тегов друг в друга, так как это один из неочевидных моментов, в котором многие новички часто делают ошибки.
Также я расскажу о работе со спецификацией HTML — какие разделы важны для нас, как для верстальщиков и как искать там информацию.
Содержание
-
Используйте правильные теги
-
Как правильно вкладывать теги друг в друга
-
Работа с медиаконтентом
-
Пишем таблицы на HTML правильно
-
a или button? Работа с интерактивными элементами и как выбрать правильный тег
-
Различный теги для медиа-контента
-
Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы
-
Пишем доступные формы
-
Избыточная вёрстка. Как облегчить разметку
-
Современные фишки HTML и CSS способные облегчить нам жизнь
-
Экспериментальные технологии, входящие в стандарт
Как правильно вкладывать теги друг в друга
Что значит правильно? Что является источником истины при работе с HTML? Конечно же это специфиакция! В данный момент существует так называемый «живой стандарт» пятой версии HTML. Это значит, что у него нет мажорных версий и он обновляется регулярно. Посмотреть последнее обновление спецификации можно здесь: https://html.spec.whatwg.org/
Спецификация HTML — это увесистый документ с кучей разделов. Она существует как для разработчиков браузеров, так и для нас — верстальщиков. Конкретно нас интересуют третий и четвёрный раздел (Semantics, structure, and APIs of HTML documents и The elements of HTML). Эти разделы описывают, как теги можно вкладывать друг в друга и что обозначает каждый тег.
Описание элемента
Каждый элемент имеет метаинформацию и описание.
Сверху размещены метаданные, куда включна следующая информация:
-
куда можно вкладывать тег;
-
какие теги можно вкладывать внутрь этого тега;
-
перечень аттрибутов тега (глобальные, дополнительные и ARIA);
-
информация о доступности;
-
вспомогательные данные.
Далее размещено описание тега — что он обозначает и как его можно использовать.
Спецификация элемента на примере тега
Метаданные тегаМетаданные тега
Метаинформация о теге включает в себя несколько пунктов:
-
Категории — обозначает, к каким типам тегов относится элемент, могут быть следующие типы:
-
Metadata content (например и
) — метаданные страницы, обозначающие представление или поведение содержимого, или отношение к другим документам;</p> </li> <li> <p><strong>Flow content</strong> (например </p> <article>, <span>, </p> <p>) — это все теги, используемые в <body>, то есть почти все в целом, за исключением некоторых мета-тегов;</p> </li> <li> <p><strong>Sectioning content</strong> (например </p> <section>) — какие-либо большие секции, как правило имеющие конкретную структуру и заголовок;</p> </li> <li> <p><strong>Heading content</strong> (все заголовки </p> <h1> – </p> <h6>, а также тег, про который я забыл рассказать в прошлой статье — </p> <hgroup>) — определяет заголовок секции, обозначенной явно, либо <body>.</p> </li> <li> <p><strong>Phrasing content</strong> (например <a>, <span>, <strong>) — различный, в основном текстовый контент, но включающий также некоторые элементы, которые позволяют размечать текст на уровне параграфов;</p> </li> <li> <p><strong>Embedded content</strong> (например <iframe>, <canvas>, <video>) — контент, встраиваемый извне (другие сайты, файлы, скрипты);</p> </li> <li> <p><strong>Interactive content</strong> (например <a>, <button>, <input>) — теги, с которыми пользователь может взаимодействовать;</p> </li> </ul> </li> <li> <p><strong>Контекст использования элемента</strong> — где мы можем размещать элемент.</p> </li> <li> <p><strong>Контентная модель</strong> — важная для этой статьи часть! Это как раз то, что мы <strong>можем размещать внутри тега</strong>.</p> </li> <li> <p><strong>Tag omission</strong> — возможные сценарии, когда закрывающую часть тега можно опустить. Рекомендую не обращать внимания на этот раздел вообще, так как в современном вебе нормальной практикой является закрытие всех парных тегов.</p> </li> <li> <p>Доступные <strong>аттрибуты</strong> тега.</p> </li> <li> <p>Раздел, касающийся <strong>доступности</strong>. Надеюсь когда-нибудь дойдут руки написать о работе с доступностью в рамках спецификации.</p> </li> <li> <p><strong>DOM Interface</strong> — раздел, необходимый для JavaScript-разработчиков, подробно на нём останавливаться не будем.</p> </li> </ul> <p>И всё же, как правильно вкладывать теги друг в друга?Категории элементов по HTML-спецификации</p> <p>Две основные категории тегов — это <strong>Metadata</strong> (метаданные) и <strong>Flow</strong> (поточные теги). Метаданные — это то что в основном входит в <head>, а Flow — то что можно положить в <body>. Однако, некоторые мета-теги мы можем разместить в <body>, поэтому они заходят на Flow-контент (например это <noscript>, <script> и </p> <style>).</p> <p>Внутри <strong>потоковых тегов</strong> находятся все остальные категории.</p> <p><strong>Heading</strong> — это просто залоговки всех уровней, а также тег </p> <hgroup>.</p> <p><strong>Sectioning</strong> — это большие смысловые части документа, секции.</p> <p><strong>Phrasing</strong> — небольшие слова или словосочетания, фразы. В основном это строчные элементы (по крайней мере они такими являлись в спецификации HTML4). Все остальные теги, не имеющие категории Phrasing, как правило являются блочными.</p> <p><strong>Embedded</strong> — как уже писал выше, контент, имеющий внешний источник данных, то есть не имеющий прямое отношение к HTML-документу.</p> <p><strong>Interactive</strong> — категория, пересекающаяся с Flow, Phrasing и Embedded, обозначающая все элементы, с которыми пользователь может взаимодействовать.</p> <p>Проверять возможность вкладывания тегов друг в друга можено по следующему алгоритму:</p> <ol> <li> <p>Смотрим на контентную модель тега, в который вкладываем.</p> </li> <li> <p>Смотрим на категории тега, который вкладываем.</p> </li> <li> <p>Если видим, что категория нам подходит и нет ограничений, то вкладываем, если нет, то вложение запрещено.</p> </li> </ol> <p>Давайте разберёмся на примере. Есть тег </p> <section> и мы хотим вложить в него тег <b>: у секции контентая модель Flow, у <b> категории Flow, Phrasing и Palpable. Соответственно вложение <strong>допустимо</strong>.</p> <p>Другой пример:</p> <p><label></p> <p>Имя:</p> <p> <input type="text" name="name"><br /> </label></p> <p>Частая задача, когда нам нужно внутри лейбла держать и инпут и его описание. Проверям:</p> <ul> <li> <p>Для лейбла контентной моделью является Phrasing Content, но без вложения других лейблов.</p> </li> <li> <p><p> не имеет категории Phrasing, поэтому вкладывать </p> <p> в <label> <strong>нельзя</strong>!</p> </li> <li> <p><input> имеет категорию Phrasing, поэтому мы <strong>можем</strong> вложить его в <label>.</p> </li> </ul> <p>Если сильно упрощать, то во <strong>Flow</strong> мы можем вкладывать и <strong>Flow</strong>, и <strong>Phrasing</strong>, а во <strong>Phrasing</strong> только <strong>Phrasing</strong>.</p> <p>Заключение части 2</p> <p>Но всю эту простыню можно было не читать, а просто воспользоваться сервисом https://caninclude.glitch.me, написанным Александром Вишняковым и скрин которого я разместил в шапке поста. Там по аналогии с Can I Use, можно проверить, вкладывается ли один тег в другой или нет.</p> <p>Ну и не забывайте валидировать код с помощью W3C Validator, который тоже сможет подсказать, правильно ли вы вкладывали теги, или нет.</p> </div> <div class="dn"></div> <div class="clear post_clear"></div> <div class="post_block_info"> <div class="single_post_tags"> </div> <div class="blog_post_info"> <!-- post share block --> <div class="post_share_block"> <a href="javascript:void(0)"><span class="sharing_title">Share</span></a> <div class="post_share_wrap"> <ul> <li class="post_share-facebook"><a target="_blank" href="https://www.facebook.com/share.php?u=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/" data-title="Facebook"><span class="fa fa-facebook"></span></a></li><li class="post_share-twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=Как%20правильно%20верстать%20в%202022%20году.%20Часть%202.%20Как%20правильно%20вкладывать%20теги%20друг%20в%20друга%20|%20Веб-студия%20Nat.od.ua&url=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/" data-title="Twitter"><span class="fa fa-twitter"></span></a></li><li class="post_share-pinterest"><a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/&media=https://nat.od.ua/wp-content/uploads/2022/05/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno.png" data-elementor-open-lightbox="no" data-title="Pinterest"><span class="fa fa-pinterest"></span></a></li><li class="post_share-linkedin"><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/&title=Как%20правильно%20верстать%20в%202022%20году.%20Часть%202.%20Как%20правильно%20вкладывать%20теги%20друг%20в%20друга%20|%20Веб-студия%20Nat.od.ua&source=Web-студия%20NAT.od.ua" data-title="Linkedin"><span class="fa fa-linkedin"></span></a></li><li class="post_share-mail"><a target="_blank" href="mailto:?subject=%D0%9A%D0%B0%D0%BA+%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE+%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D1%82%D1%8C+%D0%B2+2022+%D0%B3%D0%BE%D0%B4%D1%83.+%D0%A7%D0%B0%D1%81%D1%82%D1%8C+2.+%D0%9A%D0%B0%D0%BA+%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE+%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D1%8B%D0%B2%D0%B0%D1%82%D1%8C+%D1%82%D0%B5%D0%B3%D0%B8+%D0%B4%D1%80%D1%83%D0%B3+%D0%B2+%D0%B4%D1%80%D1%83%D0%B3%D0%B0+%7C+%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D1%8F+Nat.od.ua&body=https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/" data-title="Email"><span class="fa fa-envelope"></span></a></li> </ul> </div> </div> <!-- //post share block --> <div class="likes_block post_likes_add " data-postid="17633" data-modify="like_post"> <span class="fa fa-heart-o icon"></span> <span class="like_count">0</span> </div> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <div id="comments"></div> </section> </div> </div> </div> <div data-rocket-location-hash="dd864ffe2a8af9dec9ddba3f2735d3b9" class="single_prev_next_posts"> <div class="container"> <div class="fleft"><a href="https://nat.od.ua/2022/11-hitrostej-chrome-devtools-kotorye-pomogut-vam-stat-senior-frontend-razrabotchikom-habr-veb-studija-nat-od-ua/" rel="prev"><span class="gt3_post_navi" data-title="11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком / Хабр | Веб-студия Nat.od.ua">Prev</span></a></div><a href="javascript:history.back()" class="port_back2grid"><span class="port_back2grid_box1"></span><span class="port_back2grid_box2"></span><span class="port_back2grid_box3"></span><span class="port_back2grid_box4"></span></a><div class="fright"><a href="https://nat.od.ua/2022/php-dajdzhest-222-3-26-marta-25-aprelja-2022-habr-veb-studija-nat-od-ua/" rel="next"><span class="gt3_post_navi" data-title="PHP Дайджест № 222/3 (26 марта – 25 апреля 2022) / Хабр | Веб-студия Nat.od.ua">Next</span></a></div> </div> </div> </div><!-- .main_wrapper --> </div><!-- .site_wrapper --> <div data-rocket-location-hash="8b892e8057798953331509231742ee3e" data-elementor-type="wpda-footer" data-elementor-id="4110" class="elementor elementor-4110 wpda-builder-page-4110 wpda-builder wpda-footer-builder" data-elementor-post-type="elementor_library"> <section class="elementor-section elementor-top-section elementor-element elementor-element-1f1a41e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="1f1a41e" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bf10177" data-id="bf10177" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <section class="elementor-section elementor-inner-section elementor-element elementor-element-b50a47f elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b50a47f" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-d3eaf9a" data-id="d3eaf9a" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-9680a26 elementor-widget elementor-widget-wpda-header-logo" data-id="9680a26" data-element_type="widget" id="logo_image__footer" data-widget_type="wpda-header-logo.default"> <div class="elementor-widget-container"> <div class="wpda-builder-logo_container "> <a aria-label="Logo" href="https://nat.od.ua/"> <img class="wpda-builder-logo" src="https://nat.od.ua/wp-content/uploads/2021/11/nat-logo.png" alt="Разработка и продвижение сайтов или интернет-мазинов под ключ в Одессе. Веб-студия Nat.od.ua" title="nat-logo" width="800" height="600"/> </a> </div> </div> </div> <div class="elementor-element elementor-element-57b6a96 elementor-widget elementor-widget-spacer" data-id="57b6a96" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-7babad7" data-id="7babad7" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-47b350d elementor-widget elementor-widget-spacer" data-id="47b350d" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element elementor-element-554c80a elementor-position-left elementor-widget__width-auto elementor-widget-tablet__width-auto elementor-widget-mobile__width-inherit elementor-vertical-align-top elementor-widget elementor-widget-gt3-core-imagebox" data-id="554c80a" data-element_type="widget" data-widget_type="gt3-core-imagebox.default"> <div class="elementor-widget-container"> <div class="gt3-core-imagebox-wrapper elementor-image_icon-position-default"><figure class="gt3-core-imagebox-img"><a href="tel:+380634149529"><img width="58" height="74" src="https://nat.od.ua/wp-content/uploads/2019/08/img_box_29.png" class="attachment-full size-full wp-image-1444" alt="" decoding="async" title="img_box_29" /></a></figure><div class="gt3-core-imagebox-content"><div class="gt3-core-imagebox-title"><span class="gt3-core-imagebox-title"><a href="tel:+380634149529">+38 063 414 95 29</a></span></div><p class="gt3-core-imagebox-description">info@nat.od.ua</p></div></div><a href="tel:+380634149529"></a> </div> </div> <div class="elementor-element elementor-element-3e4def9 elementor-position-left elementor-widget__width-auto elementor-widget-tablet__width-auto elementor-widget-mobile__width-inherit elementor-vertical-align-top elementor-widget elementor-widget-gt3-core-imagebox" data-id="3e4def9" data-element_type="widget" data-widget_type="gt3-core-imagebox.default"> <div class="elementor-widget-container"> <div class="gt3-core-imagebox-wrapper elementor-image_icon-position-default"><figure class="gt3-core-imagebox-img"><a href="https://www.google.com/search?q=map+nat.od.ua&oq=map+nat.od.ua&aqs=chrome..69i57j69i64j69i60l3.4016j0j7&sourceid=chrome&ie=UTF-8#"><img width="76" height="74" src="https://nat.od.ua/wp-content/uploads/2019/08/img_box_30.png" class="attachment-full size-full wp-image-1445" alt="" decoding="async" title="img_box_30" /></a></figure><div class="gt3-core-imagebox-content"><p class="gt3-core-imagebox-description">Украина, г. Одесса, ул. Бугаёвская, 35</p></div></div><a href="https://www.google.com/search?q=map+nat.od.ua&oq=map+nat.od.ua&aqs=chrome..69i57j69i64j69i60l3.4016j0j7&sourceid=chrome&ie=UTF-8#"></a> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-cb19c3f elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="cb19c3f" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-c7b7f8b" data-id="c7b7f8b" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-0d591c3 elementor-widget elementor-widget-spacer" data-id="0d591c3" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-3149677 elementor-widget elementor-widget-text-editor" data-id="3149677" data-element_type="widget" data-widget_type="text-editor.default"> <p>Web-Studio Nat.od.ua</p> </div> <div class="elementor-element-custom_font_size elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-2641689 elementor-widget elementor-widget-text-editor" data-id="2641689" data-element_type="widget" data-widget_type="text-editor.default"> <p>Мы работаем, для того чтобы дать возможность Вам зарабатывать в интернете. </p> </div> <div class="elementor-element elementor-element-33054d3 elementor-shape-square e-grid-align-left elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="33054d3" data-element_type="widget" data-widget_type="social-icons.default"> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-5ffa149" href="https://www.facebook.com/natodua/" target="_blank"> <span class="elementor-screen-only">Facebook-f</span> <i class="fab fa-facebook-f"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-91c0e5f" href="https://www.instagram.com/nat.od.ua/" target="_blank"> <span class="elementor-screen-only">Instagram</span> <i class="fab fa-instagram"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-google-plus-g elementor-repeater-item-affb931" href="https://www.google.com/maps/place/nat.od.ua/@46.4723938,30.7022737,15z/data=!4m5!3m4!1s0x0:0x40bd6617ba4ea433!8m2!3d46.4723938!4d30.7022737" target="_blank"> <span class="elementor-screen-only">Google-plus-g</span> <i class="fab fa-google-plus-g"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-telegram elementor-repeater-item-473615c" href="https://t.me/natodua" target="_blank"> <span class="elementor-screen-only">Telegram</span> <i class="fab fa-telegram"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-viber elementor-repeater-item-ababeec" href="viber://add?number=380634149529" target="_blank"> <span class="elementor-screen-only">Viber</span> <i class="fab fa-viber"></i> </a> </span> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-2553905" data-id="2553905" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-8f1042e elementor-widget elementor-widget-spacer" data-id="8f1042e" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-0ed0b2b elementor-widget elementor-widget-text-editor" data-id="0ed0b2b" data-element_type="widget" data-widget_type="text-editor.default"> Разработка сайтов </div> <div class="elementor-element elementor-element-da1e5f6 wpda_alignment-left elementor-widget elementor-widget-wpda-builder-menu" data-id="da1e5f6" data-element_type="widget" data-widget_type="wpda-builder-menu.default"> <div class="elementor-widget-container"> <div class="wpda-mobile-navigation-toggle"> <div class="wpda-toggle-box"> <div class="wpda-toggle-inner"></div> </div> </div> <div class="wpda-navbar-collapse"> <nav class="wpda-builder-menu"> <ul id="menu-razrabotka-sajtov" class="wpda-menu"><li id="menu-item-9640" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9640"><a href="https://nat.od.ua/our-projects/razrabotka-internet-magazinov/">Разработка интернет-магазинов</a></li> <li id="menu-item-9641" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9641"><a href="https://nat.od.ua/our-projects/business-site/">Разработка корпоративных сайтов</a></li> <li id="menu-item-9642" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9642"><a href="https://nat.od.ua/our-projects/landing-page/">Разработка landing-page</a></li> <li id="menu-item-9643" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9643"><a href="https://nat.od.ua/our-projects/perenos-na-novie-cms/">Перенос на современные CMS</a></li> <li id="menu-item-9644" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9644"><a href="https://nat.od.ua/our-projects/redesign-ili-dorabotka-sitov/">Доработка или редизайн сайта</a></li> </ul> </nav> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-df42308" data-id="df42308" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-1483eb9 elementor-widget elementor-widget-spacer" data-id="1483eb9" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-27a447b elementor-widget elementor-widget-text-editor" data-id="27a447b" data-element_type="widget" data-widget_type="text-editor.default"> <p>Продвижение сайтов</p> </div> <div class="elementor-element elementor-element-87c5085 wpda_alignment-left elementor-widget elementor-widget-wpda-builder-menu" data-id="87c5085" data-element_type="widget" data-widget_type="wpda-builder-menu.default"> <div class="elementor-widget-container"> <div class="wpda-mobile-navigation-toggle"> <div class="wpda-toggle-box"> <div class="wpda-toggle-inner"></div> </div> </div> <div class="wpda-navbar-collapse"> <nav class="wpda-builder-menu"> <ul id="menu-prodvizhenie-sajtov" class="wpda-menu"><li id="menu-item-9645" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9645"><a href="https://nat.od.ua/our-projects/seo-sites/">SEO продвижение</a></li> <li id="menu-item-9647" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9647"><a href="https://nat.od.ua/our-projects/smm-sites/">SMM продвижение</a></li> <li id="menu-item-9646" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9646"><a href="https://nat.od.ua/our-projects/google-reklama-sitov/">Контекстная реклама</a></li> <li id="menu-item-9648" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9648"><a href="https://nat.od.ua/our-projects/vigruzka-feeda-google-merchant-center/">Торговая реклама</a></li> <li id="menu-item-9649" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9649"><a href="https://nat.od.ua/our-projects/prodvijenie-saita-na-kartah-katalogah/">На картах и в каталогах</a></li> </ul> </nav> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-360e1c4" data-id="360e1c4" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-aa54bce elementor-widget elementor-widget-spacer" data-id="aa54bce" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-a764dfc elementor-widget elementor-widget-text-editor" data-id="a764dfc" data-element_type="widget" data-widget_type="text-editor.default"> Оглавление </div> <div class="elementor-element elementor-element-5413d9d wpda_alignment-left elementor-widget elementor-widget-wpda-builder-menu" data-id="5413d9d" data-element_type="widget" data-widget_type="wpda-builder-menu.default"> <div class="elementor-widget-container"> <div class="wpda-mobile-navigation-toggle"> <div class="wpda-toggle-box"> <div class="wpda-toggle-inner"></div> </div> </div> <div class="wpda-navbar-collapse"> <nav class="wpda-builder-menu"> <ul id="menu-bystroe-oglavlenie" class="wpda-menu"><li id="menu-item-12231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-privacy-policy menu-item-12231"><a href="https://nat.od.ua/">Главная</a></li> <li id="menu-item-9638" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9638"><a href="https://nat.od.ua/about-us/">О нас</a></li> <li id="menu-item-9639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9639"><a href="https://nat.od.ua/services/">Услуги</a></li> <li id="menu-item-9991" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9991"><a href="https://nat.od.ua/blog-razrabotka-saytov/">Блог</a></li> <li id="menu-item-9990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9990"><a href="https://nat.od.ua/contact-us/">Контакты</a></li> </ul> </nav> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-e23a8f5 elementor-widget elementor-widget-text-editor" data-id="e23a8f5" data-element_type="widget" data-widget_type="text-editor.default"> <p style="text-align: center;">© 2014–2025 — by Nat.od.ua</p> </div> </div> </div> </div> </section> </div> <div data-rocket-location-hash="8b8ee982d9d44072942280e1c143dcf8" class="wpda-builder__burger_sidebar burger-id-9b6c8d8"><div data-rocket-location-hash="45aacae316f183c96958ff67b101eeea" class="wpda-builder__burger_sidebar-cover"></div><div data-rocket-location-hash="c72648a08523492180c0e5032f83d1e3" class="wpda-builder__burger_container"><aside class="sidebar"><div id="icl_lang_sel_widget-2" class="widget gt3_widget open widget_icl_lang_sel_widget"> <div class="wpml-ls-sidebars-sidebar_header-sidebar wpml-ls wpml-ls-legacy-list-horizontal"> <ul><li class="wpml-ls-slot-sidebar_header-sidebar wpml-ls-item wpml-ls-item-ru wpml-ls-current-language wpml-ls-first-item wpml-ls-last-item wpml-ls-item-legacy-list-horizontal"> <a href="https://nat.od.ua/2022/kak-pravilno-verstat-v-2022-godu-chast-2-kak-pravilno-vkladyvat-tegi-drug-v-druga-veb-studija-nat-od-ua/" class="wpml-ls-link"> <img class="wpml-ls-flag" src="https://nat.od.ua/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png" alt="" width=20 height=20 /><span class="wpml-ls-native">Русский</span></a> </li></ul> </div> </div><div id="block-8" class="widget gt3_widget open widget_block"><p><img decoding="async" class="alignnone size-full wp-image-1456" src="https://nat.od.ua/wp-content/uploads/2021/11/nat-logo.png" alt="" width="200" height="auto"></p> <p><a class="button_size_elementor_custom alignment_left border_icon_none hover_type5 btn_icon_position_left" href="https://nat.od.ua/logotip-onlajn-konstruktor-besplatno/"><span class="gt3_module_button__container"> <span class="elementor_gt3_btn_text">Конструктор логотипа онлайн</span> </span><br /> <br /></a></p> <p></p> <p><a class="button_size_elementor_custom alignment_left border_icon_none hover_type5 btn_icon_position_left" href="https://nat.od.ua/whois-domain-uznat-informaciju-o-domene-i-vladelce"> <span class="elementor_gt3_btn_text">Информация о домене или доступность имени</span><br /> </span><br /> </a></p></div><div id="nav_menu-2" class="widget gt3_widget open widget_nav_menu"><h4 class="widget-title">Услуги</h4><div class="menu-razrabotka-sajtov-container"><ul id="menu-razrabotka-sajtov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9640"><a href="https://nat.od.ua/our-projects/razrabotka-internet-magazinov/">Разработка интернет-магазинов</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9641"><a href="https://nat.od.ua/our-projects/business-site/">Разработка корпоративных сайтов</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9642"><a href="https://nat.od.ua/our-projects/landing-page/">Разработка landing-page</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9643"><a href="https://nat.od.ua/our-projects/perenos-na-novie-cms/">Перенос на современные CMS</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9644"><a href="https://nat.od.ua/our-projects/redesign-ili-dorabotka-sitov/">Доработка или редизайн сайта</a></li> </ul></div></div><div id="block-9" class="widget gt3_widget open widget_block"><div class="textwidget"> <p><a class="gt3_icon_link gt3_custom_color" style="font-size: 17px;color: #5747e4;margin-right: 15px;margin-top: -20px" href="tel:+380634149529" target="_blank" rel="noopener noreferrer" data-color="#5747e4" data-hover-color="#f47215"><br /> <i class="fa fa-phone" style="font-weight: bold"> </i><br /> </a>+38 063 414 95 29</p> <p><a class="gt3_icon_link gt3_custom_color" style="font-size: 17px;color: #5747e4;margin-right: 15px;margin-top: -5px" href="mailto:info@nat.od.ua" target="_blank" rel="noopener noreferrer" data-color="#5747e4" data-hover-color="#f47215"><i class="fa fa-envelope"> </i></a> info@nat.od.ua</p> <p><a class="gt3_icon_link gt3_custom_color" style="font-size: 17px; margin-top: 7px; margin-right: 15px; margin-bottom: 20px; float: left; color: rgb(87, 71, 228);" href="https://www.google.com/maps/place/nat.od.ua/@46.4723938,30.7022737,15z/data=!4m5!3m4!1s0x0:0x40bd6617ba4ea433!8m2!3d46.4723938!4d30.7022737" target="_blank" rel="noopener noreferrer" data-color="#5747e4" data-hover-color="#f47215"><img decoding="async" class="alignnone" src="https://nat.od.ua/wp-content/uploads/2021/11/map_point.png" alt="" width="12" height="17"></a>Украина, г. Одесса, ул. Бугаёвская, 35</p> </div></div><div id="block-10" class="widget gt3_widget open widget_block"><div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-7310046 elementor-shape-square e-grid-align-right elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="7310046" data-element_type="widget" data-widget_type="social-icons.default"> <div class="elementor-widget-container"> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-f9f8056" href="https://www.facebook.com/natodua/" target="_blank"><br /> <span class="elementor-screen-only">Facebook-f</span><br /> <i class="fab fa-facebook-f"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-f1ebd89" href="https://www.instagram.com/nat.od.ua/" target="_blank"><br /> <span class="elementor-screen-only">Instagram</span><br /> <i class="fab fa-instagram"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-google-plus-g elementor-repeater-item-ce2da41" href="https://www.google.com/maps/place/nat.od.ua/@46.4723938,30.7022737,15z/data=!4m5!3m4!1s0x0:0x40bd6617ba4ea433!8m2!3d46.4723938!4d30.7022737" target="_blank"><br /> <span class="elementor-screen-only">Google-plus-g</span><br /> <i class="fab fa-google-plus-g"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-telegram elementor-repeater-item-270a40e" href="" target="_blank"><br /> <span class="elementor-screen-only">Telegram</span><br /> <i class="fab fa-telegram"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-viber elementor-repeater-item-a4ec2b5" href="viber://add?number=380634149529" target="_blank"><br /> <span class="elementor-screen-only">Viber</span><br /> <i class="fab fa-viber"></i> </a><br /> </span> </div> </p> </div> </div> </div> </div></div></aside></div></div> <script> if (localStorage.getItem('gt3_gridlist_woo') === null) { localStorage.setItem('gt3_gridlist_woo','off') } </script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/ewebot-child/*","/wp-content/themes/ewebot/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Consent Preferences" style="background-color:#0056A7"> <button class="cky-btn-revisit" aria-label="Consent Preferences"> <img src="https://nat.od.ua/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#212121">We value your privacy</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking "Accept All", you consent to our use of cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Customise" data-cky-tag="settings-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC">Customise</button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="reject-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC">Reject All</button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#1863DC;border-color:#1863DC">Accept All</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#212121">Customise Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://nat.od.ua/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p><p>The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. </p><p>We also use third-party cookies that help us analyse how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p><p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#212121">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#212121">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#212121">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#212121">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#212121">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="detail-reject-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC"> Reject All </button> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC"> Save My Preferences </button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="detail-accept-button" style="color:#ffffff;background-color:#1863DC;border-color:#1863DC"> Accept All </button> </div></div></div></div></script> <div data-rocket-location-hash="b0fab23df6bbc6e64863f404d614b7e7" class="progress-wrap btn-right-side"> <svg class="progress-circle" width="100%" height="100%" viewBox="-2 -2 104 104"> <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/> </svg> </div> <div data-rocket-location-hash="9a73822b7763eb4d4f8222001fe0a94d" class="nbdp-popup" id="nbd-catalog-option-popup" data-animate="scale"> <div data-rocket-location-hash="cf2f49ff838bf4aeb47044d532884512" class="overlay-popup"></div> <div data-rocket-location-hash="b3f23814f81cdd1dd07873966878eb8f" class="main-popup"> <div data-rocket-location-hash="7c49240b29b6f18c2506c2bcb48653e4" class="nbdp-popup-head"> <i class="close-popup"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <title>close
-
How would you like to design your
Upload a full design
- - Have a complete design
- - Have your own designer
Design here online
- - Already have your concept
- - Customise every detail
