Фигурният таг дефинира. Избягване на често срещани грешки в маркирането на HTML5. но сега не говорим за това. Истинската грешка е прекомерното използване на елемента. трябва да се използва само когато се позовавате на него в документ. Малко вероятно е да се позовавате на

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

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

Според спецификацията на HTML5 всеки елемент принадлежи към определена (нула или повече) категория. Всеки от тях групира елементи със сходни характеристики. Разграничават се следните общи категории:

  • Мета съдържание
  • Поточно съдържание
  • Съдържание на раздела
  • Съдържание на заглавката
  • Текстово съдържание
  • Вградено съдържание
  • Интерактивно съдържание
Описание на HTML5 елементи 1. Елемент

Категории съдържание: Поточно съдържание.
Групира уводни и навигационни елементи, по избор. Може да съдържа заглавия, да обвива съдържанието на раздел на страница, формуляр за търсене или лого. Един HTML документ може да съдържа няколко елемента едновременно и те могат да бъдат разположени във всяка част на страницата.

Описание на сайта

Елемент не може да бъде поставен вътре в елементи или друг елемент.

2. Елемент

Категории съдържание:
Проектиран да създаде навигационен блок за уеб страница или цял уебсайт, но не е задължително да е вътре в . На една страница може да има няколко елемента. Не замества тагове

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

    Можете да използвате повече от елементи от списък като елементи на лентата за навигация:

    ...

    ...

    Можете също да добавите заглавки вътре в елемент:

    ...

    3. Елемент

    Категории съдържание: поточно съдържание, съдържание на секции.
    Използва се за групиране на записи - публикации, статии, записи в блогове, коментари. Това е независим, отделен блок, предназначен за многократна употреба, обикновено започващ със заглавка. Може да се дублира на други страници на сайта и да съдържа други елементи вътре, които са тясно свързани по съдържание със съдържанието на външната статия. Ако има само една статия на страница със заглавие и текстово съдържание, не е необходимо тя да бъде обвита с . Препоръчително е да използвате елемент само ако съдържанието на елемента ще бъде изрично указано в схемата на документа.

    Пролетта идва (и си отива) в окръг Съсекс

    Вчера се присъединих към Brooklyn Bird Club за годишното ни пътуване до Западен Ню Джърси, по-специално Hyper Humus, сравнително наскоро открито горещо място.

    Но брои ли се за списъка ви с живота?

    Изглежда вече можете да гледате птици през интернет. Все още не съм успял да го тествам (очевидно ограничение от 20 потребители), но това със сигурност е готино. Лично аз не мога да си представя, че може да замени действителното пребиваване на полето с някаква малка сума.

    « Предишни записи

    4. Елемент

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

    ... ... ...

    вътре

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

    Бележки за природата ... ... Исторически бележки ... ...

    5. Елемент

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

    ... ...

    .........

    6. Елемент

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

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

    ... @2014...

    7. Елемент

    Категории съдържание: Поточно съдържание.
    Използва се за определяне информация за контактавтор/собственик на документа или статията. За да посочи автора на документа, тагът се поставя вътре в елемента, за да се покаже авторът на статията - вътре в тага. Браузърът обикновено показва курсив.

    8. Елемент

    Категории съдържание: Поточно съдържание.
    Елементът представлява основното съдържание на документа (съдържание на елемента). Съдържанието вътре в елемента трябва да бъде уникално и да не се повтаря във всички документи на сайта, като връзки за навигация, информация за авторски права, лога, формуляри за търсене (ако формата за търсене е основната функция на документа).

    Един елемент не може да бъде дъщерен на елементи като , , или .

    Пудел

    За породата Разновидности Външен вид Характер Copyright © 2016 My dog.ru

    9. Елемент

    Категории съдържание: поточно съдържание, съдържание на основна секция.
    Елементът представлява самостоятелно съдържание (по избор със заглавие), което е отделен елемент от основния поток. Елемент може да бъде преместен от съдържанието на основния документ в странична лента или приложение, без да се засяга потокът на документа. С помощта на елемента можете да добавите кратки характеристикикъм илюстрации, снимки, диаграми, кодови фрагменти и др.

    Есенна гора

    Елементът е блоков елемент, неговата ширина заема цялата ширина на контейнерния блок минус външните полета:

    10. Елемент

    Елементът е наследник на елемента и не принадлежи към никоя категория съдържание. Елементът е на ниво блок, ширината е равна на ширината на елемента, височината по подразбиране е 18px.

    11. Елемент

    Категории съдържание:
    Определя часа (24 часа) или датата според григорианския календар, с възможно посочване на час и отместване на часовата зона. Текстът, ограден в този етикет, не е стилизиран от браузъра. Атрибутът datetime е наличен за тага, чието съдържание показва какво ще види потребителят на екрана на своя компютър:

    За да се прочете автоматично датата, тя трябва да е във формат ГГГГ-ММ-ДД. Часът, който също може да бъде посочен, се посочва във формат HH:MM с добавяне на разделителен префикс T (час):

    12. Елемент

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

    13. Елемент

    Категории съдържание: поточно съдържание, текстово съдържание.
    Разделя част от текста, която трябва да бъде изолирана от останалия текст за двупосочно форматиране на текст. Използва се за текстове, написани едновременно на езици, четени отляво надясно и отдясно наляво.

    14. Елемент

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

    15. Елементи за описание на източноазиатските герои

    Категории съдържание: поточно съдържание, текстово съдържание.
    Елементът ви позволява да маркирате един или повече елементи от категорията на текстовото съдържание, като използвате рубинена анотация. Рубинената анотация се използва предимно в източноазиатската типография като ръководство за произношение или за включване на други характеристики. Елементът може да съдържа:
    — един или повече текстови възли или елементи;
    — един или повече елементи , , всеки от които предшества или непосредствено следва елемента .

    Елементите , , и не принадлежат към никоя категория съдържание.

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

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

    Не използвайте етикет като обвивка за стил Един от най-честите проблеми, които забелязах, е баналната замяна на "s с HTML5 структурни елементи, особено "s. Тези. когато какво в XHTML или HTML4 изглежда така:
    Моята супер дупер страница Пренапишете така:
    Просто е погрешно: не е обвивка. Този елемент се отнася до семантичния блок на вашето съдържание, който се използва за конструиране на „контур на документа“ и трябва да съдържа заглавие. Ако имате нужда от опаковъчен елемент, опитайте да се справите (Kroc Kamen може да предложи). Ако това не реши проблема с необходимостта от допълнителни обвивки, използвайте добрите стари "s. HTML5 "s не умряха и те са перфектни в този случай.

    Като вземем всичко по-горе предвид, би било добре да маркирате горния пример с помощта на HTML5 по следния начин:
    Моята супер супер страница

    Ако не сте сигурни кой елемент да използвате, тогава ви съветвам да използвате нашата блок-схема за избор на елементи ( прибл. преводач: вижте най-долу на записа).

    Използвайте и само когато е необходимо. Няма смисъл да пишете код, ако не е необходимо, нали? Уви, често наблюдавам как и къде не са необходими. Можете да прочетете за елементите по-подробно, но аз ще очертая накратко основните моменти:
    • Елементът представлява група от уводни или навигационни помощни средства и обикновено съдържа заглавие на раздел
    • Елементът групира набор от елементи - представлява заглавие на раздел, в случай че се състои от няколко нива (подзаглавия, алтернативни заглавия и т.н.)
    Излишни елементи Както съм сигурен, че добре знаете, един елемент може да се използва многократно в един документ. Следователно това често се случва:
    Най-добрата ми публикация в блога

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

    Неправилна употреба И отново относно заглавията: често виждам елемента да се използва неправилно. Не трябва да се използва заедно с ако:
    • Има само един хедър
    • добър сам по себе си (т.е. без ).
    Първи случай:
    Най-добрата ми публикация в блога

    от Рич Кларк

    В този случай просто премахнете hgroup.
    Най-добрата ми публикация в блога

    от Рич Кларк

    Вторият случай е друг пример за използване на елемент ненужно.
    Моята компания, основана през 1893 г

    Ако имате единствено дете, „и затова ви е нужно, ако нямате? допълнителни елементив "e (т.е. сестра на ), просто премахнете .
    Моята компания, основана през 1893 г

    Не рамкирайте всички връзки в HTML5 въведе 30 нови елемента, за да ни даде възможност да създаваме структуриран и смислен код. Но не трябва да прекалявате с новите семантични елементи. За съжаление, точно това се случва с. Спецификацията го описва по следния начин: Елементът nav представлява секция от страница, която я свързва с други страници или части от текущата (секция с връзки за навигация).

    Забележка: Не всички групи връзки трябва да се поставят в навигационния елемент. Трябва да се използва за основна навигация. Често в долните колонтитули има малък списък с връзки към различни страници на сайта (Начало, Помощ, условия за ползване, и т.н). В този случай един долен колонтитул трябва да е достатъчен, въпреки че нищо не ви пречи да използвате nav, това не е необходимо.

    WHATWG HTML спец

    Ключова фраза- “главна навигация”. Човек може да спори дълго за това какво се разбира под основното, но за мен е:

    • Основна навигация
    • Търсете в сайта
    • Вторична навигация (спорна)
    • Навигация в страницата (в рамките на дълга статия, например)
    Въпреки че в този случай е трудно да се прецени кое е правилно и кое не, смятам, че не трябва да се прави заключение:
    • Превключватели на страници
    • Социални връзки (въпреки че може да има изключения в случаите, когато социалните връзки са основната навигация. Например сайтове като about.me или flavors.me)
    • Публикувайте етикети
    • Категории публикации
    • Третично корабоплаване
    • Обемни колонтитули
    Ако не сте сигурни дали да рамкирате списъка си с връзки в , запитайте се „Това основната навигация ли е?“ Моля, обърнете внимание на следното:
    • „Не използвайте, ако смятате, че заглавието също ще работи“ - Hixie в IRC
    • Може би трябва да добавим „Отидете на“ за удобство?
    Ако отговорът на тези въпроси е „Не“, това вероятно не е мястото за .Често срещани грешки при използването на елемента брадва. Справете се с правилна употребаТози елемент, подобно на брат си, не е лесен. Нека да разгледаме някои често срещани грешкисвързани с този елемент. Не всяко изображение Преди това съветвах да не пишете повече код, отколкото е необходимо. Тук ситуацията е подобна. Виждал съм сайтове, където всяка снимка е поставена в рамка. Не използвайте повече маркиране само за да използвате повече маркиране. Вие просто създавате повече работа за себе си, но не подобрявате описанието на съдържанието си.

    Спецификацията го описва като „самостоятелно съдържание, вероятно със заглавка и обикновено самостоятелен елемент на потока“. Ето я цялата красота - елементът може лесно да бъде преместен от основното съдържание, например, в страничната лента.

    Горната блок-схема за избор на елемент ще ви помогне да се справите с .

    Ако дадено изображение е само за презентационни цели и не се споменава никъде в документа, то определено не е . В противен случай си задайте въпроса: „Необходим ли е този образ в настоящия контекст за разбиране?“ Ако не, очевидно не е (евентуално). Ако е така, запитайте се „Мога ли да преместя това в приложение?“ Ако отговорът и на двата въпроса е Да, тогава може да работи.

    Вашето лого не е. Същото важи и за логото. Често виждам това приложение:
    Името на фирмата ми
    Няма какво да добавя тук. Това просто не е вярно. Можете да спорите дълго време дали логото трябва да присъства, но сега не говорим за това. Истинската грешка е прекомерната употреба на .
    трябва да се използва само когато се позовавате на него в документ. Малко вероятно е някъде да се свържете с вашето лого. Това е достатъчно:

    Името на фирмата ми може да бъде повече от просто изображение Друго често срещано погрешно разбиране на елемент е предположението, че той може да се използва само за изображения. Но това не е вярно. Може да съдържа видео, аудио, графики (в SVG, например), цитат, таблица, блок от код, стихотворение или всяка комбинация от горните. Не се ограничавайте само до снимки. Нашата работа като привърженици на уеб стандартите е да опишем съдържанието на нашето маркиране.

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

    , намерени в галерията на HTML5. Въпреки че това не е грешка, мисля, че е най-добре да я избягвате.

    В HTML5 няма нужда да се указва атрибут тип за и елементи. Въпреки че може да е трудно да се отървете от тях, ако се добавят автоматично от вашата CMS, няма смисъл да ги включвате в кода, ако го пишете сами или можете да управлявате шаблони. защото Всички браузъри по подразбиране приемат, че всички скриптове са написани на JavaScript, а стиловете са CSS, такова маркиране става излишно:

    Вместо това можете просто да напишете:

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

    Някои от новите атрибути на формуляра са булеви, т.е. присъствието им в маркирането определя поведението на елементите. Включително това:

    • автофокус
    • автоматично довършване
    • изисква се

    Рядко ги виждам, но в случай на необходимост видях това:

    В крайна сметка това не заплашва нищо лошо. Клиентски HTMLанализаторът ще срещне необходимия атрибут в маркирането и ще приложи подходящите правила. Но какво ще стане, ако го направим по различен начин и напишем required="false"?

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

    Булева стойност може да се приложи по три начина: (Вторият и третият са типични за XHTML)

    • изисква се
    • задължително = ""
    • изисква = изисква се =

    Във връзка с нашия пример по-горе, можем да напишем това (в HTML):

    В обикновени печатни публикации, като например книги и списания, изображенията, таблиците или примерите за код обикновено са придружени от надпис. Досега не сме имали начин семантично да маркираме този тип съдържание директно в HTML, вместо да прибягваме до имена на CSS класове. HTML5 се надява да реши този проблем с нови елементи: и . Нека разберем!

    елемент

    Елементът е предназначен да се използва заедно с елемента за подчертаване на диаграми, илюстрации, снимки и примери за код (наред с други неща). Ето какво пише в спецификацията:

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

    елемент

    Елементът не е задължителен и може да се появи преди илислед съдържанието вътре. Само един елемент може да бъде поставен в , въпреки че самият елемент може да съдържа множество дъщерни елементи (например, или ).

    Използвайте и

    И така, разбрахме какво казва спецификацията за тези елементи. Как да ги използваме? Нека да разгледаме това с примери.

    за изображение

    Изображение в елемент без надпис:

    Ето кода за това:

    с изображение и подпис

    Изображение вътре в елемента с обяснителен надпис:


    Нахален макак от Борнео. Снимка от Ричард Кларк

    И кодът, който използвахме:

    Нахален макак от Борнео.

    Снимка от Ричард Кларк

    с множество изображения

    Поставяне на няколко изображения в един елемент с общ надпис:

    Отляво надясно: кукабара, пеликан и многоцветен лорикет. Снимки от Ричард Кларк

    И самия код:

    Отляво надясно: кукабара, пеликан и многоцветен лорикет.

    Снимки от Ричард Кларк

    с кодов блок

    Елементът може да се използва и за примери на код:

    Лиценз Creative Commons Attribution Споделяне на подобни условия

    Използване на елемент около връзка за лиценз Creative Commons с rel="license" .

    По-долу е кодът за това:

    Лиценз Creative Commons Attribution Споделяне на подобни условия

    Използване на елемент около връзка за лиценз Creative Commons с rel="license".

    • Разлики между и
    • Вече говорихме за елемента в предишна статия, но е важно да отбележим разликата между двата. Когато избирате между или , струва си да се запитате дали съдържанието на елемента е важно за разбирането на съдържанието:

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

    Имайте предвид, че ако позицията на съдържанието в текста е тясно свързана с предишното и последващото съдържание, трябва да се използват по-подходящи елементи - например доброто старо

    , или дори в зависимост от вида на съдържанието.

    Не спирайте до тук! .

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

    Използването на елемента обаче не винаги е препоръчително. Например, графичен банер не трябва да се поставя в . Просто използвайте това

    Заключение

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