Содержание

Основные блоки и элементы сайта — для чего нужны и как правильно оформить

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

Если вы еще сомневаетесь, какой именно сайт вам нужен — сайт-визитка, корпоративный или лендинг, то сперва загляните в статью «Как понять, какой сайт вам нужен» или посмотрите видео на эту тему на нашем канале в «Ютубе». 

Узнать подробнее о структуре сайта можно в этой статье: от иерархии страниц зависит успешное SEO-продвижение, удобство для посетителей и продажи.

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

Создать полноценный сайт без знания кода можно с помощью «Конструктора сайтов RU-CENTER». Конструктор поддерживает готовые шаблоны, темы и шрифты — останется только придумать текст и подобрать фотографии.

Первый экран

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

Основные элементы

Заголовок. Часто это название того, что продается на сайте, слоган или вдохновляющая цитата.

Что продается — одежда, бренд — «О, май». Источник: ohmy.ru

Фоновое изображение: фотография, видео, иллюстрация, цвет или градиент. Картинка может иллюстрировать то, что человек в итоге получит, или задавать атмосферу. Если у вас нет собственных фотографий, можно прочитать нашу статью «Как законно использовать чужие изображения на вашем сайте».

Кнопка. Можно добавить целевое действие сразу на обложку: те, кто искал именно вас или уже заходил к вам, смогут сразу оформить заказ или перейти к новинкам и акциям.

На что обратить внимание

Не обязательно использовать все и сразу: фоновое изображение, заголовок и кнопку. Часто на главном экране — только картинка.

Пример первого экрана: меню (о нем дальше будет отдельный блок), изображение кольца из последней коллекции, слоган в виде закольцованной бегущей строки и кнопка. Источник: jewelry-in-august.com

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

Меню и навигация

Понятные меню и навигация помогут посетителю сайта легко найти нужную информацию.

Основные элементы

Кликабельный логотип. Нажав на него, посетитель перейдет в начало главной страницы. Блок «Главная» можно удалить из меню.

Хедер (шапка сайта). Можно добавить меню, контакты, поле для поиска, выбора языка или города. Стоит выносить сюда то, что важно для вашего бизнеса: например, разделы «Доставка» и «Возврат».

Пример хедера. Источник: moscow.petrovich.ru

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

Подчеркнутый раздел «Книги» подсказывает посетителю, где он находится. Источник: popcornbooks.me

Кнопка «Наверх» помогает быстро попасть в начало страницы, а не пролистывать ее вручную. Может быть в виде слова, стрелки вверх или другого элемента.

Пример кнопки «Вверх» в виде стрелки — появляется при скролле. Источник: travki.co/tea

Фильтры и сортировка. Возможность фильтровать и сортировать товары в интернет-магазине облегчает посетителю поиск того, что ему нужно.

Примеры фильтров и сортировки. Источник: ru.puma.com

Хлебные крошки. Это путь к разделу, в котором сейчас находится посетитель. Обычно выглядит так: главная страница — раздел — подраздел — страница. Стоит использовать их, если у вашего сайта сложная структура и большое количество разделов с подразделами.

HOME / ЖЕНЩИНЫ / ДЖИНСЫ И ДЕНИМ — это и есть хлебные крошки. Источник: cosstores.com/ru_ru

Перелинковка. Можно добавить на страницу товара блок с подборкой «Вам может понравиться» и предложить перейти на другие страницы сайта.

Пример перелинковки «Вам также понравится». Источник: 365detox.ru

Навигация в виде плитки. Можно показать сперва список товаров или услуг с картинками и ссылками. Нажав на то, что заинтересовало, посетитель перейдет в карточку товара или нужный раздел.

Каталог в виде плитки: сперва видишь все категории, что есть — и выбираешь нужную. Источник: periodica.press

На что обратить внимание

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

Фиксированное меню. Можно зафиксировать меню (слева или сверху): посетитель в любой момент при скролле найдет нужный раздел.

Фиксированное меню при просмотре сайта всегда остается слева. Источник: studio-29.ru

Лаконичность. Лучше сделать не более 4−5 пунктов меню, а их названия — из одного короткого слова.

О компании

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

Основные элементы

О проекте, бренде или компании. Кто вы такие, чем интересны и полезны для клиента, ваша миссия, как все начиналось, с какой идеи. Можно добавить сюда ленту из «Инстаграма» или видео и показать процесс создания продукта.

Это не просто картинки о производстве украшений, а гифки. Источник: jewelry-in-august.com/about/

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

Возможности — это тоже о преимуществах. Источник: e-kontur.ru/possibilities

Сценарии использования и польза. Рассказать с примерами, как пользоваться вашим товаром или услугой: с картинками, видео, схемами, постами клиентов из соцсетей. Здесь акцент на выгоде и пользе для клиента: не почему продукт или услуга хороши, а как они помогут человеку.

Покажите, как клиент будет пользоваться услугой: например, гифками. Источник: geekbrains.ru

Факты с цифрами. Цифры легко воспринимаются и привлекают внимание. Оптимально использовать 3–5 факта в цифрах и краткое пояснение к ним. Главное — чтобы они были понятными и классными не для вас, а для посетителей. «В прошлом году мы продали 3 000 смартфонов» — непонятно, много это или мало. А вот цифры у издательства МИФ звучат убедительно: «Мы издали 3 145 книг за 15 лет. Если посчитать, то это — книга за 2 дня».

Факты с цифрами можно подавать нестандартно. Источник: skyeng.ru

Кейсы и портфолио. Собрать истории компаний или клиентов, которые добились успеха с помощью вашего продукта. Рассказать, как вы помогли разным клиентам, какие были задачи, или показать фотографии «до и после».

Пример кейсов. Источник: plantsforfriends.ru/projects

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

На что обратить внимание

Не ставьте иконки ради иконок. Первые попавшиеся в стоках иконки могут смазать впечатление.

Для иконок можно использовать эмодзи, если это выглядит органично. Источник: ru.bookmate.com

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

На этом сайте каждый блок визуально отличается от другого: например, раздел «Курсы» выполнен на черном фоне, а раздел «Микрорубрики» — на белом. Источник: arzamas.academy

Продукты и услуги

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

Основные элементы

Описание проекта, продукта или услуги. Как продукт или услуга помогает решить проблему человека, какую несет пользу, чем интересен или как и зачем создавался: с картинками, видео и доказательствами. В интернет-магазинах это карточки товаров.

Способ приготовления и что во вкусе: информация для любителей спешелти-кофе. Источник: chernyi.coffee

Товарные сетки. Как расположить товары в интернет-магазине, зависит от количества категорий и самих товаров. Например, платья можно расположить в виде плитки товаров: при нажатии на понравившееся откроется поп-ап с карточкой товара.

Пример плитки товаров в категории «Платья». Источник: my812.ru

Пример поп-апа с карточкой товара. Источник: my812.ru

Доставка. Условия, куда доставляете, сколько стоит и куда обращаться за поддержкой.

Возврат. Условия, как сделать и что заполнить. Можно сразу прикрепить формы заявлений.

Все документы по возврату — в одном месте. Источник: chernyi.coffee

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

Источник: stories.com/ru_ru/

На что обратить внимание

Четко дать понять, что предлагается на сайте. Посетитель впервые сталкивается с вашим продуктом, услугой и проектом: пусть за короткое время он максимально полно поймет, что вы предлагаете.

Объяснять понятно для клиента, а не себя. Чем проще и понятнее описание продукта, тем легче будет клиенту принять решение о покупке.

Отзывы

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

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

Пример отзывов в карточке товара. Источник: divan.ru

Форма для заявок, бронирования и записи

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

Форма может быть развернутой, как на скрине, или открываться, когда посетитель нажмет на кнопку (CTA). Источник: excusemyfrench. ru

Блок обычно состоит из заголовка, подзаголовка и формы, или только из заголовка и кнопки. Иногда нужно объяснить, зачем, например, подписываться на вашу рассылку. И стоит настроить страницу благодарности или сообщение, которые будут появляться после подписки: «Спасибо, что подписались на рассылку».

На сайте можно разместить простую форму подписки на рассылку и настроить поп-ап, где уже будут объяснения, зачем стоит подписаться. Источник: vetermagazine.ru

Вопросы и ответы

Этот блок работает со страхами и сомнениями клиентов, которые собираются что-то купить. Можно собрать частые вопросы и развернуто ответить на них.

Посетитель может открыть ответ на вопрос, который его интересует. Источник: postpartum.ru

Блог и новости

Раздел добавляет экспертности и доверия к компании, продуктам или услугам. А еще показывает, что вы растете, меняетесь и не боитесь делиться опытом.

Можно публиковать свежие интервью со ссылками. Источник: lucyzharikova. com/about

Основные элементы

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

В блоге можно подробнее рассказать о преимуществах продукта, о том, как его выбирать и ухаживать за ним. Источник: linentexture.com/blog

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

Источник: detali.net/news

Полезные материалы. Можно предложить посетителю что-то, что он сможет использовать прямо сейчас: обучающее видео, статью или файл с инструкцией. Люди больше доверяют тем, кто не боится делиться своими опытом и знаниями. Если к материалам добавить кнопки соцсетей для шеринга, о вас узнает больше людей.

Можно поделиться фрагментом лекции, чтобы получить контакт посетителя. Источник: authentic.academy

Публикации. Они выступают как социальное доказательство: о вас пишут, значит, вы существуете. Иногда достаточно добавить логотипы СМИ: даже не читая текст, посетитель может заметить их.

Вариант с логотипами, которые говорят сами за себя. Источник: heisplant.ru

Контакты

Как с вами связаться: адрес, email, телефон или карта с инструкцией, как добраться. Сюда можно добавить форму обратной связи.

Источник: arzamas.academy

Футер

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

Источник: monochrome.ru

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

Перейти ко всем материалам блога

Структура документа и веб-сайта — Изучение веб-разработки

  • Назад
  • Обзор: Introduction to HTML
  • Далее

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

Необходимые знания:Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:

Заголовок (колонтитул)

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

Навигационное меню

Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.

Основное содержимое

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

д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!

Боковая панель

Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.

Нижний колонтитул (футер)

Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

«Типичный веб-сайт» может быть структурирован примерно так:

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы.

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?

Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

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

Как мы упоминали ранее в ходе курса, существует ряд последствий неиспользования правильной структуры элементов и семантики для правильной работы.

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

  • Заголовок: <header>.
  • Навигационное меню: <nav>.
  • Основное содержимое:     <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
  • Боковая панель: <aside>, обычно располагается внутри <main>.
  • Нижний колонтитул: <footer>.

Активное обучение: исследование кода для нашего примера

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок моей страницы</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">
    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
    <header>
      <h2>Заголовок</h2>
    </header>
    <nav>
      <ul>
        <li><a href="#">Домашняя страница</a></li>
        <li><a href="#">Наша команда</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
       <!-- Форма поиска — это ещё один распространённый нелинейный способ навигации по веб-сайту.
 
 
  -->
       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>
    <!-- Здесь основное содержимое нашей страницы -->
    <main>
      <!-- Она содержит статью -->
      <article>
        <h3>Заголовок статьи</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
        <h4>Подраздел</h4>
        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
        <p>Pelientesque auctor nisi id magna consequat sagittis.
 
  Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
        <h4>Ещё один подраздел</h4>
        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>
      <!-- Дополнительный контент также может быть вложен в основной контент -->
      <aside>
        <h3>Связанные темы</h3>
        <ul>
          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
          <li><a href="#">Даже на севере Англии</a></li>
          <li><a href="#">Здесь не перестаёт дождь</a></li>
          <li><a href="#">Лаааадно.
 
 ..</a></li>
        </ul>
      </aside>
    </main>
    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
    <footer>
      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
    </footer>
  </body>
</html>

Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут вам в этом. Мы не просим вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.

Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью HTML-элементы. Пока что это основные определения, которые вы должны попытаться понять:

  • <main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице и размещайте прямо внутри <body>. В идеале он не должен быть вложен в другие элементы.
  • <article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
  • <section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
  • <aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
  • <header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
  • <nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
  • <footer> представляет собой группу конечного контента для страницы.

Несемантические обёртки

Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы <div> и <span>. Вам следует использовать их с подходящим значением атрибута class или id, чтобы можно было легко получить к ним доступ.

<span> — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

<p>Пьяный Король возвратился в свою комнату в 01:00
и всё никак не мог войти в дверь: хмель мешал <span>[Примечание редактора: В этот момент
свет на сцене должен быть приглушён]</span>.</p>

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

<div> — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:

<div>
  <h3>Корзина</h3>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Итого: $237.89</p>
</div>

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

Предупреждение: Внимание: div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.

Перенос строки и горизонтальный разделитель

Два элемента, которые вы будете периодически использовать или захотите узнать о них: <br> и <hr>:

<br> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

<p>Жила-была девчушка Нелл,<br>
Любившая писать HTML:<br>
Её семантика ужасна была — <br>
Она и сама прочитать ничего не могла.</p>

Без элемента <br> абзац разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

Жила-была девчушка Нелл, Любившая писать HTML: Её семантика ужасна была — Она и сама прочитать ничего не могла.

<hr> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
<hr>
<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>

Будет выглядеть примерно так:

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

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: «Думаю, самое время вернуться к работе».

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

  1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
  2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?
  3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
  4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
  5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

Самостоятельная работа: создайте свою собственную карту сайта

Применить наш метод к своему сайту. О чем он будет?

Примечание: Сохраните свой код, он вам ещё понадобится.

Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.

  • Using HTML sections and outlines (en-US): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.
  • Назад
  • Обзор: Introduction to HTML
  • Далее
  • Начало работы с HTML
  • Что такое заголовок? Метаданные в HTML
  • Основы редактирования текста в HTML
  • Создание гиперссылок
  • Углублённое форматирование текста
  • Структура документа и веб-сайта
  • Отладка HTML
  • Разметка письма
  • Структурируем страницу

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Путеводитель по разделам сайта

Благодаря разделам создать собственный сайт стало проще, чем когда-либо. Но что такое раздел? И для чего нужны все разные разделы? Короче говоря, раздел — это готовый строительный блок, и вы можете использовать их в любой комбинации для создания своего веб-сайта. Все они настраиваемые, так что у вас все еще есть свобода сделать свой веб-сайт собственным, но мы сделали часть работы за вас! Чтобы упростить задачу, мы создали руководство по различным типам разделов, которые мы предлагаем:

Герой

Раздел героев так же важен, как кажется! Как правило, это самая крупная и впечатляющая вещь, которую люди увидят, впервые зайдя на ваш веб-сайт, поэтому она должна содержать ключевую информацию, такую ​​как название вашей компании, короткую ленту и наиболее релевантные кнопки призыва к действию, такие как «Купить сейчас». » или «Контакты».

Изображение и текст

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

Текст

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

Изображение

Как и в случае с текстовой частью, это нужно, когда вы хотите добавить отдельное изображение. Это может быть фотография ваших продуктов на вашей домашней странице, ваша фотография на странице «О нас» или (соответствующее) стоковое изображение, чтобы разбить ситуацию. Исследования показывают, что изображения — отличный способ привлечь внимание, поэтому разделы с изображениями позволят вам сделать именно это.

Галерея и слайд-шоу

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

Форма

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

Контакт

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

Рекламные

Выделите свой магазин, товары или специальные предложения с помощью рекламных разделов, размещенных в любом месте вашего веб-сайта. Это отличный способ привлечь внимание людей во время просмотра!

Социальные сети

Социальные сети и веб-сайт лучше всего использовать вместе. Убедитесь, что люди могут легко найти ваши социальные сети с помощью социальных разделов. Вы также можете использовать это, чтобы ссылаться на обзоры на таких сайтах, как Yelp.

Название страницы

Как вы могли догадаться, в этом разделе можно дать имя каждой странице. Почти всегда имеет смысл разместить его в верхней части вашего сайта или рядом с ним. Вы можете легко настроить шрифты и цвета здесь, чтобы они соответствовали остальной части вашего веб-сайта и брендингу.

Видео и аудио

Использование видео на целевой странице может увеличить коэффициент конверсии на целых 80%. Легко добавляйте видео с введением или без него. Если у вас есть канал на YouTube, вы можете включить свои последние видеоролики или видео о своих продуктах в действии, чтобы продемонстрировать их в своем магазине.

Файлы

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

Встроить

Если у вас есть какой-либо код, который вы хотите добавить для добавления пользовательских функций или сторонних сервисов (таких как SoundCloud или формы бронирования) на свой веб-сайт, вы можете использовать этот раздел. Как и другие разделы, его можно разместить где угодно. Возможности безграничны!

Логотипы

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

Магазин

Если на вашем веб-сайте есть интернет-магазин, разделы, стимулирующие продажи, могут иметь решающее значение. Рекомендуемые продукты и разделы «корзина» — отличный способ привлечь людей и превратить посетителей в клиентов! Часто рекомендуется размещать их вверху для быстрого доступа, но вы можете поэкспериментировать с разными вариантами размещения и посмотреть, что лучше всего подходит для вас.

PayPal

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

Блог

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

Вот и все: руководство по всем разделам, необходимым для создания идеального веб-сайта! Мы всегда прислушиваемся к отзывам и добавляем интересные новые функции в наш конструктор веб-сайтов, поэтому мы обязательно будем обновлять это руководство, когда это произойдет. Если вы еще не создали свой сайт, почему бы не попробовать бесплатную пробную версию? Удачного сайтостроения!

8 лучших советов по дизайну разделов веб-сайтов

Хотите надежный способ более эффективно предоставлять красивые веб-сайты своим клиентам из малого бизнеса? Примите участие в разработке веб-сайтов с разделы!

Разделы — это мощные инструменты для создания сайтов в Duda (и некоторых других платформах), которые позволяют создавать блоки. Раздел — это, по сути, обозначенная горизонтальная строка внутри конструктора сайтов, которая может группировать контент в визуально различимые области на веб-странице.

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

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

Вы можете найти разделы на всех видах веб-сайтов. Например, на сайте Nike используются разделы. Компания использует главный раздел в верхней части главной страницы, за которым следует трехколоночный обзор продукта, затем двухколоночный обзор продукта и, наконец, более тонкий раздел продукта. Затем веб-дизайнер воссоздает разделы продукта по всей главной странице, но каждый раз с разным содержанием. Использование повторяющихся разделов делает веб-сайт цельным, но позволяет каждой части визуально выделяться.

Почему полезно создавать сайты с разделами

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

Вы можете думать о разделах как о следующем поколении шаблонов веб-дизайна. С одними только шаблонами сайта вы должны войти и настроить десятки частей веб-сайта по отдельности — в противном случае ваш дизайн может выглядеть шаблонным и неинтересным.

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

Как получить максимальную отдачу от разделов

Вы можете настроить и сохранить предварительно созданные разделы сайта Duda для использования в будущих версиях веб-сайта, а затем вся ваша команда сможет использовать их и делиться ими! Процесс создания сайтов с разделами гарантирует, что вы создаете уникальные веб-сайты, а также используете подход plug-and-play для максимальной эффективности.

Прогони числа. Сколько времени уходит на создание раздела (например, цены или отзывы), если он не является частью выбранного вами шаблона? Может минут 15? Может минут 30? Если вам нужно сделать это 10 раз на 15-страничном веб-сайте, минуты складываются.

Только подумайте о часах, которые вы могли бы сэкономить, разбив свой сайт на мелкие кусочки. И чем больше пользовательских разделов вы создадите и сохраните, тем быстрее будет создаваться сайт!

Все эти веские причины сделали разделы одной из самых популярных функций, используемых клиентами и партнерами Duda.

Нужна платформа для веб-дизайна, которая позволит невероятно быстро создавать красивые сайты? Начните бесплатную пробную версию Duda сегодня!

8 потрясающих советов по дизайну разделов веб-сайта

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

  • Извлечение из готовых разделов Duda
  • Знайте, что разделы будут подстраиваться под ваш глобальный дизайн 
  • Добавьте настоящие изображения и продуманный текст
  • Уменьшите количество контента в каждом разделе
  • Перемещение разделов
  • Использование разделов для разбиения текста
  • Ограничение количества разделов
  • Создайте оптимальный рабочий процесс

Давайте углубимся в каждый из них…

1. Извлеките из Duda’s PreBuild Разделы

Duda предлагает множество различных готовых разделов на выбор. Чтобы начать их использовать, начните редактировать сайт и нажмите «+», который появится между строками. Выберите разделы из категорий, таких как «Планы», «Социальные сети», «Отзывы», «Команда», «О программе», «Возможности», «Введение» и т. д.

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

После добавления на сайт разделы ведут себя как «ряд» в редакторе, поэтому вы можете легко добавлять виджеты, изменять их порядок, настраивать стиль, добавлять контент и т. д.

2. Знайте, что разделы автоматически настраиваются на Ваш шаблон

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

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

3. Добавьте реальные изображения и продуманный текст

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

4. Ограничьте количество контента в каждом разделе

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

5. Переместите разделы вокруг

Если раздел не работает, просто переместите его вверх или вниз по странице и попробуйте там. Отчасти поэтому они так хорошо работают.

Если раздел, который вы пробуете, не работает на веб-странице клиента, просто добавьте другой готовый раздел. Прелесть в том, что разделы Duda работают на любом шаблоне — и есть из чего выбирать.

6.

Используйте разделы для разделения текста

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

7. Ограничение количества разделов

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

8. Создайте свой оптимальный рабочий процесс

Если вы создаете десятки или сотни веб-сайтов в месяц, более чем вероятно, что ваши дизайнеры повторяют рабочий процесс при создании каждого сайта. Наиболее успешные партнеры Duda обычно создают большие библиотеки предварительно разработанных разделов, которые соответствуют их руководству по стилю, типам клиентов и лучшим практикам, и включают их в этот процесс.