подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.
:!: **Предупреждение: Внимание:** div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.
====Перенос строки и горизонтальный разделитель====
Два элемента, которые вы будете периодически использовать или захотите узнать о них: [[software:development:web:docs:Web:HTML:Element:br|
]] и [[software:development:web:docs:Web:HTML:Element:hr|
]]:
[[software:development:web:docs:Web:HTML:Element:br|
]] создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:
Жила-была девчушка Нелл,
Любившая писать HTML:
Её семантика ужасна была —
Она и сама прочитать ничего не могла.
Без элемента [[software:development:web:docs:Web:HTML:Element:br|
]] абзац разместится в одну длинную линию (как было сказано ранее, [[software:development:web:docs:Learn:HTML:Introduction_to_HTML:Getting_started#whitespace_in_html|HTML игнорирует переносы строк]]), а с ним в коде — разметка будет выглядеть следующим образом:
Жила-была девчушка Нелл, Любившая писать HTML: Её семантика ужасна была — Она и сама прочитать ничего не могла.
[[software:development:web:docs:Web:HTML:Element:hr|
]] создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:
Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.
Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".
Будет выглядеть примерно так:
=====Планирование простого веб-сайта=====
Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется [[software:development:web:docs:Glossary:Information_architecture|Information architecture]]. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!
* Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
{{:software:development:web:docs:learn:html:introduction_to_html:common-features.png?|}}
* Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?
{{:software:development:web:docs:learn:html:introduction_to_html:site-structure.png?|}}
* Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
{{:software:development:web:docs:learn:html:introduction_to_html:feature-list.png?|}}
* Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод [[software:development:web:docs:Glossary:Card_sorting|Card_sorting]].
{{:software:development:web:docs:learn:html:introduction_to_html:card-sorting.png?|}}
* Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.
{{:software:development:web:docs:learn:html:introduction_to_html:site-map.png?|}}
====Самостоятельная работа: создайте свою собственную карту сайта====
Применить наш метод к своему сайту. О чем он будет?
:!: **Примечание:** Сохраните свой код, он вам ещё понадобится.
=====Заключение=====
Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
====Дополнительные материалы====
[[software:development:web:docs:Web:HTML:Element:Heading_Elements|Using HTML sections and outlines (en-US)]]: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.