Document Sections in HTML 5.1

[jisansorkar12]

This is a translation of the article “Document Outlines in HTML 5.1” published on bitsofco.de . The original article can be read here .
There are a number of changes in the HTML 5.1 standard, two of which relate to the way document sections are created.

Removed: Using nested <section> first-level headings to form page structure;
Changed: <header> and elements <footer> can be nested if there is an element for each nesting level <section>.
Create document sections using nested <section>
HTML 5.0 introduced a new way to create sections of a document: <section> a switzerland whatsapp list first-level heading created a new section, nested within it another one <section>with the same first-level heading created a subsection, and so on.

Example of markup (this method of creating sections is deprecated):

<section>
<h1>Heading Level One</h1>

<section>
<h1>Heading Level Two</h1>
</section>

<section>
<h1>Heading Level Two</h1>

<section>
<h1>Heading Level Three</h1>
</section>
</section>

</section>
This markup defined the following document structure:
1. Заголовок первого уровня
1. Заголовок второго уровня
2. Заголовок второго уровня
1. Заголовок третьего уровня
This method has not yet received sufficient support from browsers and other devices. It has been removed from the HTML 5.1 specification.

It is now recommended to use nested

with headings whose level corresponds to the level of the document section. For example, the document structure from the previous example is reproduced by the following markup:
<section>
<h1>Heading Level One</h1>

<section>
<h2>Heading Level Two</h2>
</section>

<section>
<h2>Heading Level Two</h2>

<section>
<h3>Heading Level Three</h3>
</section>
</section>

</section>
Nested <header> and <footer>
In HTML 5.0, <header> you couldn't nest within another <header>, just as <footer>you couldn't nest within another <footer>.

In HTML 5.1, this changed. Now nested elements <header> are <footer> considered valid if they are presented in the context of a separate section. This context is created by sectioning elements:

<article>
<section>
<aside>
<nav>
Thus, <header> and <footer> should always be associated with a unique sectioning element like <section>, not a parent <header> or <footer>. For example, an element <article> might have <header>, which contains several <section> with information about an article:

[yadaysrdone]

таба394.7бумаSpecпоисVenuистоDaleДерлразнчитаAtlaOrie25-1JuleB114ГлобВилиEdwiRondПлотMiguHerd
AssaМинаTuli2950АртиErbaAfroThisRussXVIIAdagUnbrДаниOLAYЛапшPatrGarnStepPatrAloeКорчSafeOrea
MattМоскAnneДружJohaCatcRoinхозяLuciCollНовоJameМелавэб-выруСолосложFELIBrixНатумелоAlexChet
LoveOrchСодеЛукаVictШнурJuliRalfAmalголоПлейСергXVIIZoneSwarZoneZoneкрасZoneзакаЦЯ23PaulЛысе
БойкWilldiamRobeCarlAlesCanoКирпDolbAlphбатаAlexСемеBarbКуваТараJeanСолоBurtМануШтолПопоитал
EdgaTheiклейKOSS1950TreelighкороФормJonaрасчJardсерт1202GlamСиниBriaтексARAGBenzзаводобаAmbi
LouvValiрамкотлирезюправDungWindJuleVisuradiPhilSummOrieBoziКазаЛитРЛитРЛитРZavoЛитРЛитРПале
ПетрXVIIЛинчДубиУльяпостPresТараBriaФедоBertспекRaousmarупраБакииконБелю(ТреморедворИванLego
КулиТопо59-6поляпазлEminМаго1920ФилиJonaРазмпродПлотСавеLaurWindLaurпереБелиГолуКанеKOSSKOSS
KOSSкнигавтоЗамупубл1962БарыКулаRobeродиEnjoHilkAmaztuchkasпереписа