Кога да използвате елемента HTML5 SECTION

И кога да ползвате членове, ASIDE и DIV

Новият елемент HTML5 SECTION може да бъде малко объркващ. Ако сте създавали HTML документи преди HTML5, вероятно сте вече използвате елемента, за да създадете структурни деления в страниците си и след това да оформите страниците с тях. Така че може да изглежда като естествено нещо просто да замените съществуващите елементи на DIV с елементите SECTION. Но това е технически неправилно. Така че, ако не замените елементите на DIV с елементите SECTION, как ги използвате правилно?

Елементът SECTION е семантичен елемент

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

Това може да изглежда като много общо семантично описание и това е така, защото е така. Има и други елементи на HTML5, които осигуряват по-голямо семантично разграничаване на съдържанието ви, което първо трябва да използвате, преди да използвате елемента SECTION:

Кога да използвате елемента SECTION

Използвайте елемента ARTICLE, когато съдържанието е самостоятелна част от сайта, която може да стои сама и да бъде синдикирана като статия или публикация в блог. Използвайте елемента ASIDE, когато съдържанието е тангенциално свързано или със съдържанието на страницата, или със самия сайт, като странични ленти, пояснения, бележки под линия или свързана с тях информация за сайта. Използвайте елемента NAV за съдържание, което е навигация.

Елементът SECTION е генеричен семантичен елемент. Вие го използвате, когато никой от другите семантични елементи на контейнера не е подходящ. Вие го използвате, за да комбинирате части от вашия документ заедно в отделни единици, които можете да опишете като свързани по някакъв начин. Ако не можете да опишете елементите в секцията в едно или две изречения, тогава вероятно не трябва да използвате елемента.

Вместо това трябва да използвате елемента DIV. Елементът DIV в HTML5 е несемантичен контейнер. Ако съдържанието, което се опитвате да комбинирате, няма семантично значение, но все пак трябва да го комбинирате за оформяне, тогава елементът DIV е подходящият елемент, който да използвате.

Как функционира елементът SECTION

Част от вашия документ може да се появи като външен контейнер за статии и ASIDE елементи. Той може също да съдържа съдържание, което не е част от член или ASIDE. Елемент от SECTION може да бъде намерен и в член, NAV или ASIDE. Можете дори да вмъкнете секции, за да посочите, че една група съдържание е част от друга група от съдържание, която е част от статия или от страницата като цяло.

Елементът SECTION създава елементи в очертанията на документа. И като такъв, винаги трябва да имате елемент на заглавната част (H1 до H6) като част от секцията. Ако не можете да излезете с заглавие за секцията, отново елементът DIV вероятно е по-подходящ. Не забравяйте, че ако не искате заглавието на секцията да се показва на страницата, винаги можете да го маскирате с CSS.

Когато не използвате елемента SECTION

Освен препоръките по-горе, за да използвате по-конкретните семантични елементи на първо място, има една определена област, в която не бива да използвате елемента SECTION: само за стил.

С други думи, ако единствената причина, поради която поставяте елемент на това място, е да прикачите свойства на Стил на CSS, не трябва да използвате елемент SECTION. Намерете семантичен елемент или използвайте елемента DIV вместо това.

В крайна сметка това може да не е важно

Трудността при писането на семантичен HTML е, че това, което ми е семантично, може да ви е абсолютно безсмислено. Ако смятате, че можете да обосновете използването на елемента SECTION в документите си, трябва да го използвате. Повечето агенти на потребителите не се интересуват и ще покажат страницата, както бихте могли да очаквате, ако сте написали DIV или SECTION.

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