Структура документа и веб-сайта
В дополнение к определению отдельных частей вашей страницы (таких как абзац или изображение), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта:
- Заголовок
- Навигационное меню
- Колонка основного содержимого
Эти элементы помогают определить структуру вашего сайта.
Необходимые знания
Для работы с HTML вам потребуется базовое знакомство с языком HTML. Форматирование текста в HTML описывается в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача
Изучить, как структурировать документ с помощью семантических тегов и разработать структуру простого веб-сайта.
Основные составляющие документа
Веб-страницы обычно состоят из стандартных компонентов:
- Шапка: большая полоса вверху страницы, с крупным заголовком и/или логотипом. Здесь располагается общая информация о сайте.
- Навигация: ссылки на основные разделы сайта. Навигация остаётся неизменной на всех страницах для удобства пользователей.
- Основное содержимое: область в центре страницы, содержащая уникальный контент каждой страницы.
- Боковая панель: содержит второстепенную информацию, ссылки, рекламу и другие элементы.
- Нижний колонтитул (футер): полоса внизу страницы с уведомлениями об авторских правах или контактной информацией.
Каждая часть документа имеет свою функцию и помогает пользователям легко ориентироваться на сайте. Обеспечивая качественную структуру сайта, вы сделаете его более удобным для пользователей и улучшите SEO показатели.
Описание структуры типичного веб-сайта
HTML для создания структуры содержимого
Итак, типичный веб-сайт может иметь различные разделы, и для структурирования его содержимого можно использовать HTML. Хотя приведенный выше пример довольно прост и примитивен, он демонстрирует основные элементы типичного макета веб-сайта.
Зачем нужна верная структура
С правильным CSS вы можете стилизовать элементы веб-сайта по своему усмотрению. Однако важно помнить, что визуальные эффекты не единственное, на что следует обращать внимание. Необходимо учитывать и аудиторию с ограниченными возможностями, такими как слабовидящие. Поэтому важно следовать семантике и использовать правильные HTML элементы.
Важность семантической разметки
Правильная семантика облегчает взаимодействие с контентом сайта людей с ограниченными возможностями и улучшает опыт всех пользователей. HTML предоставляет теги для создания структурных элементов, таких как разделы и развлекательные блоки.
Пример HTML кода
Вот фрагмент кода для нашего примера веб-сайта:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<h1>Заголовок веб-сайта</h1>
</header>
<nav>
<ul>
<li>Главная</li>
<li>О нас</li>
<li>Контакты</li>
</ul>
</nav>
<section>
<article>
<h2>Заголовок раздела контента</h2>
<p>Текст статьи...</p>
</article>
</section>
<aside>
<h3>Связанные статьи</h3>
<ul>
<li>Статья 1</li>
<li>Статья 2</li>
<li>Статья 3</li>
</ul>
</aside>
<footer>
<p>© Год</p>
</footer>
</body>
</html>
Обзор элементов HTML макета
Понимание структурных элементов HTML поможет создавать более удобные и доступные веб-сайты. Ниже приведены основные элементы, которые вам следует знать:
Несемантические обёртки
Необходимо ограничивать использование несемантических оберток, таких как div. Они могут усложнить код и затруднить его поддержку.
Важность HTML элементов
Использование правильных HTML элементов поможет отделить различные части содержимого и улучшить пользовательский опыт. Следует придерживаться семантической структуры для создания удобных и понятных веб-сайтов.
Планирование простого веб-сайта
Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!
Создайте свою собственную карту сайта
Применить наш метод к своему сайту. О чем он будет?
Примечание: Сохраните свой код, он вам ещё понадобится.
Заключение
Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
Дополнительные материалы
Если поисковая оптимизация королева, то король однозначно контент. Вместе эти двое способны свернуть горы и обеспечить сайту высокие позиции в выдаче.
Что такое контент сайта
Простыми словами контент — это информационное наполнение страниц сайта, простыми словами, это могут быть статьи блога, карточки товара, тексты страниц, фотографии, видеообзоры — все, что несет смысловую нагрузку.
Продвижение сайта контентом
Логично, что сайт без контента, то есть содержания, будет просто ни о чем. Это способ донести важную информацию и получить обратную связь. Но это еще не все:
Признаки хорошего контента
Как определить, качественный ли контент на вашем сайте, понравится ли он пользователям и поисковым системам? Давайте прогоним его по основным критериям.
Виды и форматы контента
Мы делим его и на виды, и на форматы, это деление не является абсолютом, просто так удобнее ориентироваться.
Виды контента
Некоторые инструкции проще один раз увидеть, чем сто раз прочитать
Виды контента на страницах сайта часто пересекаются: например, текст статьи блога может перемежаться иллюстрациями и видео. Чем больше информации в разных видах дается пользователю, тем лучше.
Контент любого вида делится на несколько форматов, основной критерий деления — цель, которой вы хотите достичь.
Чтобы создать и разместить качественный контент на сайте, можно воспользоваться различными подходами.
Форматы контента:
Форматы часто пересекаются и в одной статье блога могут сочетаться информационная часть, продающие вставки и имиджевые элементы. Главное – вставлять их органично и релевантно основной цели текста, чтобы читатель не запутался.
Источники контента:
Копипаст или неуникальный – заимствование текста с других сайтов. Это может привести к проблемам с авторским правом и к понижению позиций сайта в поисковых результатах.
Рерайтинг – переписывание текстов из поисковой выдачи. Качество часто оставляет желать лучшего и не всегда ценен для читателей.
Оригинальный или авторский – копирайтинг, при котором автор добавляет свои мысли, опыт и экспертизу. Это наиболее ценный контент для сайта.
Переводы – отличный способ наполнения сайта, особенно если речь идет о интересных темах и точках зрения.
Пользовательский – бесплатный способ переработать текст в разные форматы. Отзыв клиента в видео можно превратить в текст, кейс или даже развлекательный контент.
Создание контента на сайте:
Своими силами – если вы эксперт в своей области, то создать контент самостоятельно может быть отличным вариантом.
Силами сотрудников – использование специалистов, экспертов в теме или копирайтеров для создания качественного контента.
Выбирайте форматы и источники контента, которые подходят вашему сайту, и не забывайте о цели каждого текста. Уникальный и интересный контент поможет вашему сайту выделиться среди конкурентов и привлечь больше посетителей.
Либо пишете, снимаете, фотографируете все сами, либо привлекаете сотрудников. Самостоятельная работа с текстом сайта хороша тем, что вы и ваши сотрудники полностью в теме, не допустите ошибок и неточностей. Но есть и минус: время, время, время. Создание качественного контента требует погружения в материал. А в случае, если нужно снимать видео или делать фото, придется потратиться еще и на оборудование.
Плюс вы можете быть экспертом в своем деле, но не знать тонкостей. В этом случае проще нанять автора и редактора или обратиться в агентство.
Обратиться к фрилансеру
Специалисты-одиночки, как правило, берут дешево. Но есть опасность, что у них будет недостаточно опыта. Или же ваш проект будет у них в числе прочих, а это значит, должного погружения в ваш бизнес не будет.
Мы подробно рассказывали о плюсах и минусах частных специалистов в этой статье. Там про SEO-специалиста, но суть та же.
Если все же решите обратиться к частнику, заранее обговорите механизм работы. Обязательно давайте автору экспертизу, чтобы он отражал ее в статье. Ответьте на вопросы о бизнесе, продукте, целевой аудитории, конкурентах. Только в этом случае есть шанс, что контент будет отвечать поставленным целям и бить точно в сердце своей ЦА.
Обратиться в агентство
Самый надежный способ: у агентства уже есть достаточный опыт, чтобы решить самую сложную задачу. Есть сотрудники, которые действуют слаженной командой: например, вам могут подобрать и автора текстов, и SEO-специалиста, и дизайнера, и контент-менеджера сайта, чтобы на выходе получился полностью упакованный и оптимизированный текст. И конечно, агентства работают строго по договору и предоставляют клиенту отчетность.
Отчет по контенту агентства «Кокос»
Пишем качественные тексты для сайтов