Елементи за HTML структура на страница | dLambow

HTML general page structure elements -

Каква HTML структура на страница е обичайна в един сайт?

Когато строите къща, първо започвате с изграждането на конструкцията (скелета), а след това попълвате по-малките елементи. Същото важи и при изграждането на уеб страница в един сайт. Всеки сайт поддържа HTML по начин, който представя по-нагледно структурата на страниците, поместени в него. Това намалява усилията на потребителите при разглеждане и ползване на сайта и прави различните сайтове да се показват надеждно в браузърите, екранните четци и търсачките.

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

Структура на уебсайт

Основните структурните елементи в HTML

Уеб страниците могат да изглеждат доста различни една от друга, но всички те споделят сходни стандартни структурни елементи, освен ако страницата не е част от някакъв арт проект или е просто зле структурирана.

<header>:

Раздел в горната част на уеб страница, който често включва заглавие на сайта, лого, а понякога и навигация;

<nav>:

Набор от елементи в менюто, които позволяват на потребителя да се придвижва до различни страници в даден сайт. Връзки към основните раздели на сайта, обикновено представени с бутони, линкове или раздели. Подобно на заглавката, това съдържание обикновено остава постоянно за всеки сайт. Непоследователната навигация на вашия уебсайт просто ще доведе до объркани, разочаровани потребители. Много уеб дизайнери смятат, че лентата за навигация е част от заглавката, а не отделен компонент, но това не е всеобщо изискване.

<section/main content>:

Общ раздел със свързано по някакъв начин съдържание. Това е голямата област под главното меню, която съдържа по-голямата част от уникалното съдържание на сайта. Това е частта от уебсайта, която определено ще варира от страница на страница.

<article>:

Част от главното съдържание, което може да бъде споделено независимо, като самостоятелна публикация в блог или статия във вестник (дори ако не показвате пълния текст на статия, като просто показвате визуализация, все още можете да използвате маркер на статия, за да очертаете това съдържание);

<aside/sidebar>:

Съдържание в страничната колона, което се допълва, но не е от решаващо значение за основното съдържание на страницата (това може да бъде информативна странична секция по свързана тема). Тук влизат някои периферни данни, връзки, цитати, реклами и др. Обикновено това е контекстуално спрямо съдържанието в основното съдържание (например, колона с новинарски статии, биографията на автора или връзки към свързани статии), но там също са случаи, в които ще намерите някои повтарящи се елементи, като вторична навигационна система.

<figure>:

Групирано изображение и надпис, които създават някакъв информативен визуален елемент.

<footer>:

Секцията или лента в долната част на страницата, която често има допълнителни връзки и може би икони за споделяне в социалните мрежи. Тя обикновено съдържа по-дребен шрифт, известия за авторски права или информация за контакти. Това е място за поставяне на обща информация, но обикновено тази информация не е критична или вторична спрямо самия уебсайт. Долният колонтитул понякога се използва и за SEO цели, като предоставя връзки за бърз достъп до популярно съдържание в сайта.

Към дефинирането на отделни части от страницата могат да се добавят още:

• - paragraph - "абзац"
• - image - "изображение").

HTML код може да се използва и за създаването на редица елементи на ниво блок, с цел дефиниране на определени области от вашия уебсайт, като:

• - navigation menu - "меню за навигация",
• - main content column - "колоната с главно съдържание".

Структурни HTML тагове

За да създадете HTML елемент (като heading), използвате набор от отварящи - <header> и затварящи - </header> тагове. Например следните маркери ще създадат заглавие ("h1"):

<h1>Пролетно почистване</h1>

Форматът е абсолютно същият за създаване на другите структурни елементи, като секции или долни колонтитули. Ето една поредица от тагове, които  последователно създават структурните елементи в общата структура на един уебсайта, както я описахме по-горе: 

header-nav-section-article-footer.

Ето една примерна структура на малък сайт:

<header><!-съдържание-></header>
<nav><!-съдържание-></nav>
<section1><!-съдържание1-></section1>
    <article><!-съдържание-></article>
    <article><!-съдържание-></article>
<section2><!-съдържание2-></section2>
    <article><!-съдържание-></article>
    <article><!-съдържание-></article>
<section3><!-съдържание3-></section3>
    <article><!-съдържание-></article>
    <article><!-съдържание-></article>....
<footer><!-съдържание-></footer>

Планиране структурата на прост уебсайт

 

Информационна архитектура

След като сте планирали структурата на обикновена уеб страница, следващата логична стъпка е да се опитате да определите какво съдържание искате да поставите  в сайта, от какви страници имате нужда и как те трябва да бъдат подредени и да се свързват помежду си за възможно най-добро потребителско изживяване. Това се нарича информационна архитектура. В голям, сложен уебсайт, това е тежка планова работа, но за обикновен уебсайт от няколко страници това може да бъде доста просто и забавно.

Общи елементи

Имайте предвид, че ще имате няколко общи елемента за повечето (ако не и за всички) страници - като например менюто за навигация и съдържанието на долния колонтитул. Ако вашият сайт е за бизнес, например, добра идея е информацията ви за контакт да е налична в долния колонтитул на всяка страница. Така, че запишете какво искате да имате, така че то да е общо за всяка страница от сайта.

Структура на страниците

След това нарисувайте груба скица на начина, по който бихте искали да изглежда структурата на всяка страница. Обърнете внимание на всеки отделен блок. След това, помислете за всичко друго, което искате да имате на уебсайта ви - съставете списък. Опитайте да сортирате всички тези елементи в групи, за да стане ясно кои части могат да съществуват заедно на различни страници.

Груба скица на сайта

Сега се опитайте да направите груба скица за структурата на сайта - направете балонче за всяка страница и нарисувайте линии, за да покажете типичния работен процес между страниците. Началната страница вероятно ще бъде в центъра и ще има връзка към повечето, ако не и към всички останали. Повечето страници в малък сайт трябва да са достъпни от основната навигация, въпреки че има изключения. Може също така да включите бележки за това как могат да бъдат представени нещата.

Във вашия HTML код може да маркирате раздели за съдържание въз основа на тяхната функционалност - можете да използвате елементи, които представляват недвусмислено описаните по-горе, но също и помощни технологии, за разпознаване тези елементи, които да подпомагат задачи като "намерете основната навигация", или "намери основното съдържание".

Могат да възникнат редица нежелани последици от неизползването на правилната структура на страница с общоприетите елементи и семантика за правилната работа при изграждането на сайт. Но спазвайки основните принципи, могат да се изградят почти всякакви елементи, за да се представят различните секции и да изглеждате така, както искате.

Допълнителни ресурси по темата:

=Page Structure and Site Design
https://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
=Document and website structure
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
=Create general page structure
https://openclassrooms.com/en/courses/5265446-build-your-first-web-pages-with-html-and-css/5268106-create-general-page-structure

----------------