Seções e Estrutura de Um Documento HTML5 - HTML - MDN

08/01/2017
SeeseestruturadeumdocumentoHTML5|MDN
Sees e estrutura de um
documento HTML5
A especicao HTML5 traz vrios elementos novos para desenvolvedores web, permitindo-os descrever uma
estrutura de um documento web com semnticas padronizadas. Este documento descreve os elementos e
como utiliza-os para denir uma estrutura desejada para qualquer documento.
Estrutura de um documento em HTML4

A estrutura de um documento, ou seja, uma estrutura semntica que esteja dentro do corpo e do corpona
sua prpria pgina, O HTML4 usa uma noo de sees e subsees de um documento para descrever sua
estrutura. ( <div> ) com Elementos HTML de Cabealho ( <h1> , <h2> , <h3> , <h4> , <h5> , ou <h6> ) dentro de
si, Denindo seu ttulo Como relaes entre elementos levam estrutura do documento.
Ento a seguir marcao:
1
2
3
4
5
6
7
8
9
10
<divclass="section"id="elefantesdafloresta"><Divclass="section"id="elefantesda
<h1>Elefantesdafloresta</h1><H1>Elefantesdafloresta</
h1>
<p>Nestaseo,discutiremosospoucosconhecidoselefantesdafloresta.<P>Estaseo,di
...estaseocontinua......estaseocontinua...
<divclass="subsection"id="florestahabitat"><Divclass="subsection"id="Habitao">
<h2>Habitat</h2><H2>Habitat</h2>
<p>Oselefantesdaflorestanovivememrvoresmassimentreelas.<P>Oselefantesdafl
...estasubseocontinua......estasubseocontinua...
</div></Div>
</div></Div>
Leva seguinte estrutura:
1
2
1.Elefantesdafloresta1.Elefantesdafloresta
1.1Habitat1.1Habitat
Os elementos <div> no so obrigatrios para denir uma nova seo. A mera presena de um Elemento de
Cabealho HTML suciente para implicar uma nova seo. Portanto,
1
2
<h1>Elefantesdafloresta</h1><H1>Elefantesdafloresta</
h1>
<p>Nestaseo,discutiremosospoucoconhecidoselefantesdafloresta.<P>Nestaseo,di
https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FSections_and_Outli
1/12
08/01/2017
3
4
5
...estaseocontinua......estaseocontinua...
<p>Oselefantesdaflorestanovivememrvoresmassimentreelas.<P>Oselefantesdafl
6
7
8
...estasubseocontinua...Estasubseocontinua
<h2>Dieta</h2><H2>Dieta</
h2>
<h1>Esquilodamonglia</h1><H1>Esquilodamonglia</h1>
Leva
1
2
3
4
1.Elefantesdafloresta1.Elefantesdafloresta
1.2Dieta1.2Dieta
2.Esquilodamonglia2.EsquilodaMonglia
Problemas resolvidos por HTML5

A denio HTML 4 da estrutura de um documento e seu algoritmo de estruturao implcita muito difcil e
leva a inmeros problemas:
1. O Uso do <div> Para Denir Sees semnticas, sem Denir Valores Especcos Para o atributo classe
Torna a Automao do algoritmo de SADA invivel ( "Este <div> E parte da Estrutura da Pgina,
denindo Uma Seo OU Uma subsseo?" Ou " apenas um <div> representativo, usado apenas para
denio de estilo? "). Em outras palavras, uma perspectiva do HTML4 muito imprecisa em relao ao
que uma seo e como seu escopo denido. Gerao automtica de estrutura importante,
especialmente para tecnologias assistivas , que so adequadas para adaptar uma forma de
apresentao de informao para os usurios de acordo com uma estrutura do documento. O HTML5
elimina a necessidade dos elementos <div> fazer o algoritmo de estruturao de um elemento novo, O
<section> , o elemento de Seo do HTML.
2. Mesclar Diversos Documentos E UMA Tarefa complicada: a Incluso de hum subdocumento em hum
Documento principais Signica Pequenas alteraes ns Elementos de Cabealho de MoDo Que a
Estrutura Geral do novo Documento continuar Slida. Isso resolvido no HTML5 com a introduo dos
elementos de seo ( <article> , <section> , <nav> e <aside> ), que so semper subsees das sees
ancestrais mais prximas, independentemente das sees criadas pelos elementos de cabealhos
internos Cada subseo.
3. No HTML4, toda a seo parte da estrutura do documento. Mas documentos no lineares so
freqentes. Um documento pode ter informaes sobre os elementos que no fazem parte, o
contedo no relacionado, o contedo principal, como um bloco de avisos ou uma caixa de explicao.
O HTML5 introduz o elemento <aside> , permitindo assim que tal seo no faz parte da estrutura
principal do documento.
4. Novamente, no h HTML4 por fato de todas as sees semnticas com a tag <div> fazer a parte da
estrutura do documento, no h formas de ter em conta as informaes que contenham informaes
relacionadas no ao documento em si, no site no geral, como logotipos, menus , Tabelas de contedos,
direitos autorais ou avisos legais. Com este propsito, o HTML5 contm trs elementos: <nav> para
colees de links (tal como uma tabela de contedos), <footer> e <header> para informaes
2/12
08/01/2017
relacionadas ao site. Perceba que <footer> e <header> no so contedos de seo como <section> ,
ao invs disso, eles existem para delimitar semanticamente partes de uma seo.
Resumindo, o HTML5 atrs preciso em divises do documento em sees e em recursos de cabealho,
O Algoritmo de Esboo HTML5

Denindo sees em HTML5
Todo o contedo que est dentro do elemento <body> parte de uma seo. As sees em HTML5 podem
ser aninhadas. Ao lado da seo principal, denida pelo elemento <body> , os limites de seo so denidos
explicitamente ou implicitamente. Sees explicitamente denidas so o contedo de <body> , <section> ,
<article> , <aside> , <footer> , <header> e <nav> .
Nota: Cada seo pode ter sua prpria hierarquia de ttulo. Portanto, mesmo uma seo aninhada pode ter um <h1> .
Consulte Denindo Cabealhos em HTML5 .
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
<section><Section>
<h1>Forestelephants</h1><H1>Elefantesdafloresta</
h1>
<section><Section>
<h1>Introduction</h1><H1>Introduo</h1>
<p>Inthissection,wediscussthelesserknownforestelephants.<P>Nestaseo,discutir
</section></Section>
<section><Section>
<P>Forestelephantsdonotliveintreesbutamongthem.<P>Oselefantesdafloresta
12
<aside><Aside>
<p>advertisingblock<P>blocodepublicidade
13
14
</aside></Aside>
15
16
<footer><Footer>
<p>(c)2010TheExamplecompany<P>(c)2010AempresaExemplo
17
</footer></Footer>
Este snippet de HTML dene duas sees de nvel superior:
<section><Section>
2
3
h1>
<section><Section>
4
5
<h1>Introduction</h1><H1>Apresentao</h1>
<p>Inthissection,wediscussthelesserknownforestelephants.<P>Nestaseo,discuti
3/12
08/01/2017
<section><Section>
8
9
<P>Forestelephantsdonotliveintreesbutamongthem.<P>Oselefantesdafloresta
10
11
<aside><Aside>
12
13
</aside></Aside>
14
15
<footer><Footer>
16
17
</footer></Footer>
A primeira seo tem trs subseces:
1
2
<section><Section>
h1>
3
4
<section><Section>
<p>Inthissection,wediscussthelesserknownforestelephants.<P>Nestaseo,discut
6
7
<section><Section>
8
9
<P>Forestelephantsdonotliveintreesbutamongthem.<P>Oselefantesdaflorest
10
11
<aside><Aside>
12
13
</aside></Aside>
14
15
16
<footer><Footer>
17
</footer></Footer>
Isto leva seguinte estrutura:
1
2
1.Forestelephants1.Elefantesdafloresta
1.1Introduction1.1Introduo
3
4
1.3Section(aside)1.3Seco(parte)
Denindo cabealhos em HTML5

Enquanto os elementos de Seo HTML denem a estrutura do documento, um esboo tambm precisa de
ttulos para ser til. A regra bsica simples: o primeiro elemento de ttulo HTML (um de <h1> , <h2> , <h3> ,
<h4> , <h5> , <h6> ) dene o cabealho da seo atual.
4/12
08/01/2017
Os elementos de ttulo tm uma classicao dada pelo nmero no nome do elemento, onde <h1> tem a
classicao mais alta e <h6> tem a <h6> mais baixa . A classicao relativa ocupa apenas uma seo; A
estrutura das sees determina o esboo, no o ttulo rank das sees. Por exemplo, este cdigo:
1
2
<section><Section>
h1>
3
4
...thissectioncontinues......estaseocontinua...
5
6
<section><Section>
7
8
<p>Forestelephantsdonotliveintreesbutamongthem.<P>Oselefantesdaflorestanov
...thissubsectioncontinues......estasubseocontinua...
10
11
<section><Section>
12
13
<h3>Mongoliangerbils</h3><H3>GerbilsdaMonglia</h3>
<p>Inthissection,wediscussthefamousmongoliangerbils.<P>Nestaseo,discutimosos
14
15
Leva ao seguinte esboo:
1
2
2.Mongoliangerbils2.GerbilsdaMonglia
Observe que a classicao do elemento de ttulo (no exemplo <h1> para a primeira seo de nvel superior,
<h2> para a subseo e <h3> para a segunda seo de nvel superior) no importante. (Qualquer rank pode
ser usado como o ttulo de uma seo explicitamente denida, embora essa prtica no seja recomendada.)
Seo Implcita
Como os Elementos de Seo HTML5 no so obrigatrios para denir um contorno, para manter a
compatibilidade com a web existente dominada por HTML4, h uma maneira de denir sees sem eles. Isso
chamado de seccionamento implcito .
Os Elementos de Cabealho HTML ( <h1> a <h6> ) denem uma nova seo, implcita, quando no so o
primeiro ttulo de suas sees pai, explcita. A forma como essa seo implcita est posicionada no contorno
denida por sua posio relativa com o cabealho anterior em sua seo pai. Se for de uma classicao
inferior do cabealho anterior, abre uma sub-seo implcita da seo. Este cdigo:
<section><Section>
h1>
3
4
5/12
08/01/2017
5
6
<h3class="implicitsubsection">Habitat</h3><H3class="subseoimplcita">Habitat</h
<p>Forestelephantsdonotliveintreesbutamongthem.<P>Oselefantesdaflorestanov
7
8
Levando ao seguinte esboo:
1.1Habitat(implicitlydefinedbytheh3element)1.1Habitat(implicitamentedefinido
Se da mesma posio que o cabealho anterior, fecha a seo anterior (que pode ter sido explcita!) E abre
um novo implcito no mesmo nvel:
<section><Section>
2
3
4
5
h1>
6
7
8
<h1class="implicitsection">Mongoliangerbils</h1><H1class="implitsection">Gerbilsd
<p>Mongoliangerbilsarecutelittlemammals.<P>Gerbilsmongissobonitospequenosmam
2.Mongoliangerbils(implicitlydefinedbytheh1element,whichclosedtheprevioussecti
Se ele de uma classicao mais alta do que o ttulo anterior, fecha a seo anterior e abre um novo
implcito no nvel superior:
1
2
<body><Body>
<h1>Mammals</h1><H1>Mamferos</h1>
3
4
5
6
<h2>Whales</h2><H2>Baleias</h2>
<p>Inthissection,wediscusstheswimmingwhales.<P>Nestaseo,discutiremosasbaleia
<section><Section>
7
8
9
<h3>Forestelephants</h3><H3>Elefantesflorestais</h3>
10
<h3>Mongoliangerbils</h3><H3>GerbilsdaMonglia</h3>
6/12
08/01/2017
11
12
13
<p>HordesofgerbilshavespreadtheirrangefarbeyondMongolia.<P>Hordasdegerbilsesp
<h2>Reptiles</h2><H2>Rpteis</h2>
14
15
16
17
<p>Reptilesareanimalswithcoldblood.<P>Osrpteissoanimaiscomsanguefrio.
</body></Body>
1.Mammals1.Mamferos
2
3
4
1.1Whales(implicitlydefinedbytheh2element)1.1Baleias(implicitamentedefinidas
1.2Forestelephants(explicitlydefinedbythesectionelement)1.2Elefantesflorestai
1.3Mongoliangerbils(implicitlydefinedbytheh3element,whichclosesthepreviouss
1.4Reptiles(implicitlydefinedbytheh2element,whichclosestheprevioussectionat
Este no o esboo que se poderia esperar olhando rapidamente as tags de ttulo. Para tornar sua marcao
humana compreensvel, uma boa prtica usar tags explcitas para abrir e fechar sees e para coincidir com
o ranking de cabealho para o nvel de aninhamento de seo pretendido. No entanto, isso no exigido pela
especicao HTML5. Se voc achar que os navegadores esto renderizando o contorno do documento de
formas inesperadas, verique se voc tem sees que so implicitamente fechadas por elementos de ttulo.
Uma exceo regra geral de que o ttulo rank deve corresponder ao nvel de aninhamento de seo para
sees que podem ser reutilizadas em vrios documentos. Por exemplo, uma seo pode ser armazenada em
um sistema de gerenciamento de contedo e montada em documentos em tempo de execuo. Neste caso,
uma boa prtica comear em <h1> para o nvel de ttulo superior da seo reutilizvel. O nvel de
aninhamento da seo reutilizvel ser determinado pela hierarquia de seo do documento em que
aparece. As tags de seo explcita ainda so teis neste caso.
Substituindo Sees Implcitas

s vezes, uma seo precisa ter vrios ttulos. Alguns casos habituais so:
Uma seo sobre um livro, ou um lme, que tem um ttulo secundrio:
1
2
<section><Section>
<h1>Justine</h1><H1>Justine</h1>
3
4
<h2>LesMalheursdelavertu</h2><H2>LesMalheursdelavertu</h2>
1
2
1.Justine1.Justine
1.1LesMalheursdelavertu1.1LesMalheursdelavertu
7/12
08/01/2017
O cabealho secundrio pode ser usado para uma lista de tags:

1
2
3
<section><Section>
<h1>Sectionandoutlinesofadocument</h1><H1>Seoecontornosdeumdocumento</
<h2>HTML,HTML5,Sections,Outlines</h2><H2>HTML,HTML5,Sees,Contornos</h2>
1
2
1.Sectionandoutlinesofadocument1.Seoeesboosdeumdocumento
1.1HTML,HTML5,Sections,Outlines1.1HTML,HTML5,Sees,Esboos
Devido seco implcita, isto no possvel sem a ajuda do elemento de grupo <hgroup> HTML ( <hgroup>
introduzido no HTML5). Oculta todos os ttulos do contorno, exceto o primeiro, permitindo uma substituio
do corte implcito. Com este elemento o livro secundrio exemplo:
1
2
3
<section><Section>
<hgroup><Hgroup>
<h1>Justine</h1><H1>Justine</h1>
4
5
6
<h2>LesMalheursdelavertu</h2><H2>LesMalheursdelavertu</h2>
</hgroup></Hgroup>
1.Justine1.Justine
Seccionando razes
Uma raiz de seccionamento um elemento HTML que pode ter seu prprio contorno, mas as sees e ttulos
dentro deles no contribuem para o contorno de seu antepassado. Ao lado de <body> que a raiz de
seccionamento lgica de um documento, estes so frequentemente elementos que introduzem contedo
externo na pgina: <blockquote> , <details> , <fieldset> , <figure> e <td> .
Exemplo:
1
2
3
4
<section><Section>
h1>
<section><Section>
5
6
7
<p>Inthissection,wediscussthelesserknownforestelephants<P>Nestaseo,discutimo
<section><Section>
8/12
08/01/2017
9
10
11
<p>Forestelephantsdonotliveintreesbutamongthem.<P>Oselefantesdafloresta
lookwhatscientistsaresayingin"<cite>TheForestElephantinBorneo</cite>":Olheo
<blockquote><Blockquote>
12
13
14
15
<h1>Borneo<H1>Bornu
<p>TheforestelementlivesinBorneo...<P>OelementodaflorestaviveemBornu...
</blockquote></Blockquote>
16
Este exemplo resulta no seguinte esboo:
1
2
3
1.1Introduction1.1Introduo
Este esboo no contm o contorno interno do elemento <blockquote> , que, sendo uma citao externa,
uma raiz seccionadora e isola seu contorno interno.
Sees fora do contorno

O HTML5 introduz quatro novos elementos que permitem denir sees que no pertencem ao contorno
principal de um documento da Web:
1. O elemento de seqncia de lado HTML ( <aside> ) dene uma seo que, embora relacionada ao
elemento principal, no pertence ao uxo principal, como uma caixa de explicao ou um anncio. Tem
o seu prprio esboo, mas no pertence ao principal.
2. O elemento da Seo de Navegao HTML ( <nav> ) dene uma seo que contm links de navegao.
Pode haver vrios deles em um documento, por exemplo, um com links internos de pgina, como uma
tabela de contedo e outro com links de navegao no site. Esses links no fazem parte do uxo
principal e contorno e geralmente no podem ser inicialmente processados pelo leitor de tela e
tecnologia assistiva similar.
3. O Elemento de Seo de Cabealho HTML ( <header> cabealho <header> ) dene um cabealho de
pgina, contendo tipicamente o logotipo eo nome do site e, possivelmente, um menu horizontal.
Apesar de seu nome, no necessariamente posicionado no incio da pgina.
4. O Elemento de Seo de Rodap HTML ( <footer> ) dene um rodap de pgina, contendo tipicamente
os direitos autorais e legais notados e s vezes alguns links. Apesar de seu nome, no
necessariamente posicionado na parte inferior da pgina.
Endereos e tempo de publicao em elementos de

corte
O autor de um documento muitas vezes quer publicar algumas informaes de contato, como o nome do
autor e endereo. HTML4 permitiu isso atravs do elemento <address> , que foi estendido em HTML5.
9/12
08/01/2017
Um documento pode ser feito de diferentes sees de diferentes autores. Uma seo de outro autor que no
a da pgina principal denida usando o elemento <article> . Conseqentemente, o elemento <address>
agora est vinculado a seu antepassado <body> ou <article> mais prximo.
Da mesma forma, o novo elemento HTML5 <time> , com seu pubdate booleano pubdate, representa a data
de publicao associada ao documento inteiro, respectivamente ao artigo, relacionado ao seu antepassado
<body> ou <article> mais prximo.
Usando Elementos HTML5 em Navegadores NoHTML5

Os elementos de sees e ttulos devem funcionar na maioria dos navegadores no-HTML5. Embora sem
suporte, eles no precisam de uma interface DOM especial e eles s precisam de um estilo CSS especco
como elementos desconhecidos so denominados como display:inline por padro:
1
2
3
section,article,aside,footer,header,nav,hgroup{Seo,artigo,lado,rodap,cabeal
display:block;Display:bloco;
}}
claro que o desenvolvedor pode cri-los de forma diferente, mas tenha em mente que, em um navegador
no-HTML5, o estilo padro diferente do esperado para esses elementos. Observe tambm que o elemento
<time> no foi includo, porque o estilo padro para ele em um navegador no-HTML5 o mesmo que em
um compatvel com HTML5.
Este mtodo tem sua limitao embora, como alguns navegadores no permitem estilo de elementos no
suportados. Esse o caso do Internet Explorer (verso 8 e anterior), que precisa de um script especco para
permitir isso:
<![ifltIE9]>
<Script>
document.createElement("header");document.createElement("footer");document.createElemen
<![endif]>
Esse script signica que, no caso do Internet Explorer (8 e anteriores), o script deve ser habilitado para exibir
HTML5 seo e elementos de cabealhos corretamente. Se no, eles no sero exibidos, o que pode ser
problemtico como estes elementos so provavelmente denindo a estrutura de toda a pgina. por isso
que um elemento <noscript> deve ser adicionado para este caso:
2
3
4
<noscript><Noscript>
<strong>Warning!</strong><Strong>Aviso!</Strong>
BecauseyourbrowserdoesnotsupportHTML5,someelementsaresimulatedusingJScript.Com
Unfortunatelyyourbrowserhasdisabledscripting.Infelizmenteoseubrowserdesabilitous
</noscript></Noscript>
https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FSections_and_Outl
10/12
08/01/2017
Isso leva ao cdigo a seguir para permitir o suporte das sees HTML5 e elementos de cabealhos em
navegadores no HTML5, mesmo para o Internet Explorer (8 e mais antigo), com um retorno adequado para
o caso em que este ltimo navegador est congurado para no usar scripts :
<![ifltIE9]>
<Script>
document.createElement("header");document.createElement("footer");document.createElemen
<noscript><strong>Aviso!</strong>SeunavegadorwebnosuportaHTML5,edevidoaissoa
<![endif]>
Concluso
Os novos elementos de seo e cabealho introduzidos no HTML5 trazem consigo uma habilidade de
descrever uma estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem
para as pessoas com navegadores HTML5 e que precisam da estrutura para ajudar as pessoas a entender,
por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semnticos so
simples de usar e com pouqussimo trabalho, podem tambm funcionar em navegadores no-HTML5. Ento
eles seriam usados sem restrio.
Documentao HTML5
HTML
JavaScript
CSS
udio vdeo Lona
MathML
AppCache
WebGL SVG
WebForms
Microformatos
Armazenamento
WebWorkers
de protocolo
IndexedDB
Eventos Arraste e
Geolocalizao
WebSockets
solte Manipulador
Foco
NewSelectors
Efeitos
SemanticTags
Tipograa Visual
https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FSections_and_Outli 11/12

Seções e Estrutura de Um Documento HTML5 - HTML - MDN

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Seções e Estrutura de Um Documento HTML5 - HTML - MDN

Hochgeladen von

Copyright:

Verfügbare Formate

08/01/2017

Estrutura de um documento em HTML4

Leva seguinte estrutura:

Problemas resolvidos por HTML5

O Algoritmo de Esboo HTML5

Este snippet de HTML dene duas sees de nvel superior:

A primeira seo tem trs subseces:

Isto leva seguinte estrutura:

Denindo cabealhos em HTML5

Leva ao seguinte esboo:

Levando ao seguinte esboo:

Levando ao seguinte esboo:

Levando ao seguinte esboo:

Substituindo Sees Implcitas

Leva ao seguinte esboo:

O cabealho secundrio pode ser usado para uma lista de tags:

Leva ao seguinte esboo:

Leva ao seguinte esboo:

Este exemplo resulta no seguinte esboo:

Sees fora do contorno

Endereos e tempo de publicao em elementos de

Usando Elementos HTML5 em Navegadores NoHTML5

udio vdeo Lona

Das könnte Ihnen auch gefallen