Помимо возможностей по определению отдельных частей вашего веб-документа, таких как «абзац» или «изображение», HTML предоставляет элементы блочного уровня. Они позволяют задавать ключевые разделы сайта, например «заголовок», «навигационное меню» или «основное содержимое». В данной статье мы разбираем, как правильно спланировать базовое расположение элементов на сайте и как написать HTML-код, чтобы отразить эту структуру.
| Предварительные требования: | Общее представление об HTML изложено в Основы HTML - элементы, атрибуты и теги. Форматирование текста описано в Основы редактирования текста в HTML. О работе гиперссылок можно узнать из Создание и настройка гиперссылок в HTML. |
|---|---|
| Задача: | Освоить способы структурирования HTML-документа с использованием семантических тегов и научиться разрабатывать структуру простого веб-сайта. |
Основные составляющие документа
Веб-страницы могут сильно различаться, однако большинство из них включают классические составляющие. Исключением могут быть страницы, стилизованные под видеопроекты, игры, арт-проекты либо недостаточно грамотно структурированные страницы:
- Заголовок
- Обычно представляет собой широкую верхнюю полосу с крупным названием или логотипом. Здесь размещается основная информация о сайте, которая одинаковая на всех страницах.
- Навигационное меню
- Включает ссылки на важные секции сайта и представлено кнопками, ссылками или вкладками. Как и заголовок, навигация идентична на всех страницах, чтобы избежать путаницы у пользователей. Многие считают навигационное меню частью заголовка, но его можно выделять отдельно, чтобы повысить доступность для людей, использующих считыватели экрана.
- Основное содержимое
- Это большая часть страницы, где размещается уникальный контент — видео, статьи, карты и новости. Элемент, который варьируется от страницы к странице.
- Боковая панель
- Обычно содержит второстепенную информацию, ссылки, цитаты или рекламу. Часто она дополняет основное содержимое или включает вторичные навигационные элементы.
- Нижний колонтитул (футер)
- Нижний колонтитул страницы, содержащий информацию об авторских правах или контактные данные. Ещё может использоваться в целях SEO для отображения популярных ссылок.
Визуализация типичного веб-страницы может выглядеть следующим образом:
HTML для структурирования содержимого
Показанный выше пример не отличается красотой, но он чётко иллюстрирует типичную структуру веб-сайта. Сайты могут иметь больше колонок или сложный дизайн, но суть остается той же. Использование правильного CSS даёт свободу оформления, но важно соблюдать семантическую правильность и использовать соответствующий контексту элемент.
Визуальная привлекательность важна, но функциональность первична. Мы используем цвет и шрифт для акцента на навигации или ссылках.
В встроенном HTML-коде размечаем разделы сайта по их функциям — применяем элементы, как описано выше, чтобы вспомогательные технологии могли с ними взаимодействовать. Они помогают выполнять задачи вроде "найти главное меню" или "найти основной контент". Не использование корректной структуры и семантики делает задачи сложнее.
Для этого внедрены специальные теги HTML, которые позволяют создать такие разделы:
- Заголовок:
<header>. - Навигационное меню:
<nav>. - Основное содержимое:
<main>, комбинируемое с<article>,<section>и<div>. - Боковая панель:
<aside>, часто расположена внутри<main>. - Нижний колонтитул:
<footer>.
Исследуйте код примера
Рассмотренный выше пример использует большинство основных фрагментов кода. Изучите пример визуально, а затем посмотрите на представленный ниже код, чтобы понять его структуру.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My page 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> <h1>Header</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Our team</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> <!-- Форма поиска - это еще один распространенный нелинейный способ навигации по веб-сайту. --> <form> <input type="search" name="q" placeholder="Search query"> <input type="submit" value="Go!"> </form> </nav> <!-- Здесь основное содержимое нашей страницы --> <main> <!-- Она содержит статью --> <article> <h2>Article heading</h2> <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> <h3>subsection</h3> <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> <h3>Another subsection</h3> <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> <h2>Related</h2> <ul> <li><a href="#">Oh I do like to be beside the seaside</a></li> <li><a href="#">Oh I do like to be beside the sea</a></li> <li><a href="#">Although in the North of England</a></li> <li><a href="#">It never stops raining</a></li> <li><a href="#">Oh well...</a></li> </ul> </aside> </main> <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта --> <footer> <p>©Copyright 2050 by nobody. All rights reversed.</p> </footer> </body> </html>
Потратьте некоторое время, чтобы ознакомиться с кодом и понять его. Внутренние комментарии также в этом помогут.
Изучайте элементы HTML разметки подробнее
Полезно понять предназначение каждой структурной единицы в HTML, и это навык, который вы освоите постепенно, накапливая опыт в веб-разработке. На данный момент ознакомьтесь с основными определениями, которые важно запомнить:
- <main> используется для содержимого, уникального для этой страницы. Применяйте <main> только один раз на странице, размещая его непосредственно внутри <body>. Оптимально, если он не будет вложен в другие элементы.
- <article> охватывает блок информации, который не теряет смысла вне контекста страницы (например, пост в блоге).
- <section> схож с <article>, но чаще используется для группировки частей страницы, которые представляют единую функцию, как, например, мини-карта или раздел заголовков и кратких описаний. Основополагающей практикой считается начинать каждый <section> с заголовка. В зависимости от контекста, <article> может быть разделен на несколько <section> или, наоборот, один <section> может состоять из нескольких <article>.
- <aside> содержит контент, который косвенно связан с основным содержимым, например справочные материалы, биографию автора или связанные ссылки.
- <header> содержит вводное или навигационное содержимое страницы. Как дочерний элемент <body>, он определяет общий заголовок страницы, но как дочерний элемент <article> или <section> определяет заголовок именно этой части. Не стоит путать с титулом страницы и заголовками.
- <nav> включает в себя основные функции навигации страницы, часто дополненные логотипом или названием компании. Ссылки на менее значимые элементы туда, как правило, не включаются.
- <footer> это элемент, содержащий завершающее содержание страницы.
Несущественные обертки
Иногда вы столкнетесь с обстоятельствами, когда не сможете подобрать подходящий семантический элемент для объединения содержимого или обёртки части контента. Иногда требуется сгруппировать несколько единиц информации для CSS или JavaScript, чтобы обработать их как единое целое. Для подобных случаев в HTML предусмотрены элементы <div> и <span>. Дополняйте их подходящими значениями атрибутов class или id для избегания путаницы и правильного отображения страницы.
<span> представляет собой строчный элемент, не подразумевающий смысла, который стоит использовать, если подходящего текстового элемента не находится, или когда вы не стремитесь прикреплять конкретные стили. Например:
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the play, the lights should be down low]</span>.</p>
В этом примере, комментарий редактора дает вводные для театральной постановки с указаниями для режиссера. Однако он сам по себе не имеет семантической ценности. Слабовидящим пользователям может быть выгодно стилизовать этот элемент по-другому с использованием CSS.
<div> это блочный элемент без семантики, который целесообразно использовать в случае, если не удается обнаружить подходящий блочный элемент, или когда желаемая стилизация недооценена. Взгляните, как это может выглядеть для размещения виджета корзины в интернет-магазине, доступного в любом разделе сайта:
<div class="shopping-cart"> <h2>Shopping cart</h2> <ul> <li> <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p> <img src="../products/3333-0985/thumb.png" alt="Silver earrings"> </li> <li> ... </li> </ul> <p>Total cost: $237.89</p> </div>
Использование <aside> здесь было бы неуместно, так как виджет не имеет непосредственного отношения к основному содержимому страницы, поскольку вы хотите, чтобы его можно было просматривать из любой точки сайта. <section> также не подходит, поскольку данная информация не является частью основного содержания. Таким образом, <div> является подходящим выбором, и заголовок использован, чтобы помочь быстро находить этого элемента пользователям специальных программ чтения.
Использование div столь простое, что часто вызывает злоупотребление. Поскольку они не обладают значимыми характеристиками, это создает громоздкость вашего HTML-кода. Старайтесь использовать их только в том случае, когда разумного семантического решения нет, и сведите их применение к минимуму, иначе будет сложно обновлять и поддерживать документы.
Переносы строк и горизонтальные правило
Два часто используемых элемента, которые вы, возможно, пожелаете использовать или изучить дальше: <br> и <hr>.
<br> добавляет разрыв строки в вашем абзаце и это практически единственный способ изменить фиксированную структуру, когда вам нужно форматировать текст с отдельными короткими строками, например, адрес или стихи. Например:
<p>There once was a girl called Nell<br> Who loved to write HTML<br> But her structure was bad, her semantics were sad<br> and her markup didn't read very well.</p>
Без использования <br> текст выстроился бы в одну длинную линию, ведь HTML игнорирует простые завершения строк. Использование этого элемента позволяет оформить текст таким образом:
There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.
<hr> создает горизонтальную линию в документе, что указывает на смену темы или выделяет текст в тематическом плане. Он визуально представлен в виде простой горизонтальной линии. Например:
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> <hr> <p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
В окончательной версии это будет выглядеть так:
Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.
Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.
Создание простого веб-сайта: план
Когда у вас уже есть идея, как должна выглядеть одна страница сайта, следует задаться вопросом о структуре всего веб-сайта: какие страницы нужны, как их лучше организовать и связать для удобства пользователей. Это называется информационной архитектурой. Разработка структуры крупного, многослойного веб-сайта может потребовать значительного времени, однако для небольшого сайта, состоящего из нескольких страниц, она может стать увлекательным заданием!
- Учтите, что у вас будет несколько повторяющихся элементов на большинстве страниц, если не на всех, такие как меню навигации и нижний колонтитул. Например, на сайте компании целесообразно разместить контактные данные внизу каждой страницы. Составьте перечень элементов, которые будут общими для всех страниц.
- Теперь визуализируйте схему страниц (вы можете взять за образец наш простой дизайн, представленный ранее), чтобы определить расположение блоков.
- Создайте список уникального контента для каждой страницы, который планируется разместить на сайте.
- Группируйте контент по темам. Какие части можно разместить на одной странице? Этот метод известен как Card sorting.
- Создайте карту сайта. Обозначьте каждую страницу в виде блока и продумайте способ перемещения пользователя между этими страницами. Обычно в центре находится главная страница, с которой производятся переходы ко всем остальным. На небольших сайтах большинство страниц добавляются в основную навигацию, но не обязательно выносить туда все ссылки. Вы также можете выделить элементы страниц, используя ссылки, списки, карточки и т.д.
Задание: создайте личную карту сайта
Попробуйте использовать этот подход для вашего будущего сайта. Какая у него будет тематика?
Обязательно сохраните карту сайта, она вам пригодится в будущем.
Выводы
Теперь вы лучше понимаете методы структуры веб-страницы или сайта. В последней части этого модуля мы займемся отладкой HTML.