Подібне розділення допомагає нам орієнтуватися на веб-сторінці і відразу виділяти головний і другорядний вміст
Основні розділи сайту:
- Навігація - основні посилання для переходу до різних веб-сторінках сайту.
- «Шапка» - вступна верхня частина веб-сторінки, що містить логотип сайту, його назва, пошук по сайту, навігацію і ін.
- Основний вміст - для інформаційних сайтів це стаття з назвою, датою публікацією, автором, коментарями до статті.
- Бічна панель - як правило, вертикальний блок, що містить другорядну інформацію, начебто форми пошуку, меню, голосування, реклами та ін.
- «Підвал» - заключна нижня частина веб-сторінки, зазвичай містить контактну і правову інформацію. Це телефони, адреси, схема проїзду, кнопки соціальних мереж, дублювання навігації і ін.
У HTML є кілька елементів, що дозволяють поділити веб-сторінку на розділи і задати їм певний сенс.
- <Section> - задає загальний універсальний розділ.
- <Header> - шапка сайту або розділу.
- <Footer> - підвал сайту або розділу.
- <Nav> - основні навігаційні посилання.
- <Main> - унікальний основний вміст веб-сторінки.
- <Aside> - розділ, побічно пов'язаний з основним вмістом, зазвичай використовується для бічної панелі.
- <Article> - самостійний розділ, що представляє собою статтю, повідомлення в блозі або на форумі, коментар.
1. Приклад створення одноколонкового макету сторінки:
See the Pen maket-1column by kravets (@raisa69) on CodePen.
2. Приклад створення двоколонкового макету на основі Float:
See the Pen maket-2column-float by kravets (@raisa69) on CodePen.
jj
Tags:
CSS