Как сделать секции в html

Обновлено: 06.07.2024

При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

Запомните: минимальная доступность лучше, чем её отсутствие.

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

Шапка сайта

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

Один из примеров шапки сайта:

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

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

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

Заменим простой блочный элемент div на его семантичного брата nav:

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

Уникальный контент

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

Для разметки уникального контента в стандарте HTML5 появился специальный тег main. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Добавим такую область в нашу вёрстку:

Так как внутри main содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.

Секции

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

С правильно разделённым контентом удобно работать. Мы легко можем перемещать такие области, менять местами или удалять. В коде их будет легко найти.
Правильная группировка разделов — важная часть при создании доступного web'а.

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

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

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

Независимые секции

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

Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.

Дополняющие секции

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

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

Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в nav, так как оно не является основным.

Самостоятельная работа

Создайте файл index.html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

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

Об обучении на Хекслете

Открыть доступ

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

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

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

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию . Внутри создайте две секции с заголовками в теге h2

Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе

Элемент section является новым в HTML5 и, как и предполагает его название, обозначает раздел документа. При использовании элементов заголовка, вы создаете подразумеваемые разделы, а этот элемент позволяет сделать их явными, а также позволяет вам освободить разделы вашего документа от элементов h1 - h6 . Нет жестких правил о том, когда должен быть использован элемент section , но, в принципе, элемент section используется для того, чтобы содержать контент, который будет перечислен в структуре документа или оглавлении. Элементы разделов обычно содержат один или несколько абзацев и заголовок, хотя заголовок не является обязательным. В таблице 10-5 представлен элемент section .

Элемент	section
Тип элемента	Потоковый
Разрешенные родительские элементы	Любой элемент, который может содержать потоковые элементы. section не может быть дочерним элементом элемента address
Локальные атрибуты	Нет
Содержание	Элементы style и потоковый контент
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Да
Изменения в HTML5	N/A
Соглашение по стилям	section

В листинге 10-4 показано, как используется элемент section .

В этом листинге я определил три элемента section , один из которых вложен в другой. Обратите внимание, что элементом заголовка в каждом из них является h1 . При использовании элемента section браузер несет ответственность за выяснение иерархии элементов заголовка, избавляя вас от необходимости определять и поддерживать соответствующую последовательность элементов h1 - h6 , по крайней мере, таков принцип. Фактическая реализация у разных браузеров незначительно различается. Google Chrome, Internet Explorer 9 (IE9) и Firefox способны различить иерархию и указать позицию для каждого элемента h1 , как показано на рисунке 10-3.

Все это хорошо, но если вы наблюдательны, вы заметили, что шрифт, используемый для отображения элемента h1 , содержимым которого является Fruits I Like, меньше, чем шрифт, используемый для другого элемента h1 того же уровня, содержимым которого является Activities I like. Это произошло потому, что некоторые браузеры (включая Chrome и Firefox) применяют различные стили для элементов h1 ( h2 - h6 ), когда они находятся внутри элементов section , article , aside и nav . (Последние три описаны далее в этой главе). Этот новый стиль такой же, как и стиль по умолчанию для элемента h2 . Как показано на рисунке 10-4, IE9 не применяет специальный стиль. И это правильное поведение.

Кроме того, не все браузеры правильно поддерживают создание подразумеваемой иерархии вложенных элементов заголовка одинакового типа. На рисунке 10-5 вы можете увидеть, как с такими элементами работает Opera. Safari таким же образом работает с этими элементами, то есть просто игнорирует иерархию, созданную элементами section .

Вы можете переделать тот стиль, который применяют Chrome и Firefox, путем создания собственных стилей, ведь они имеют приоритет над стилями, определенными в браузере (как я объяснил в главе 4). Internet Explorer работает с обычными стилями. Но вы ничего не можете сделать с Opera и Safari, и до последовательной реализации в основных браузерах эта удобная функция должна использоваться с осторожностью.

или RSS канал:

Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

1. Основные понятия

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

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

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

CENTER – содержит основной текст страницы;

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

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

Описание web-страницы в основном делается в CSS документе.

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку:

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

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает.

4. Одной строкой между тегами и присоедините документ mystyle.css к документу HTML (рисунок 3).

5. В таблице стилей наберите код как на рисунке 4.

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

7. Добавим HTML документ следующий код между тегами body (рисунок 6).

И у Вас должно получиться следующее (рис. 7).

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

8. Откройте css-документ и добавьте следующий код (рисунок 8).

9. Сразу после закрывающегося тега

10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

Создайте html-документ, в теле которого разместите код, как на рисунке 12.

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

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13.

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14). Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!