Semântica html5

[Kaayá Pezzuti 0]

Olá estou com uma duvida na estrutura do HTML 5.. procurei em muitos lugares ja mas mostram sempre e explicam sempre a estrutura basica.

 

mas minha estrutura e diferente

 

como eu faria esse tipo de estrutura como encaixaria os headers de dentro da section no meu caso teriam 2?

 

ou eu posso colocar header e footer dentro do article? e criar uma div de conteudo no article

como eu faria essa estrutura?

[Diéssica 140]

como eu faria esse tipo de estrutura como encaixaria os headers de dentro da section no meu caso teriam 2?

Encaixaria como?

 

Sua dúvida está confusa. Seja mais claro: Que conteúdo é aquele nos boxes pretos? Eles têm relação com o conteúdo principal do [inline]<section>[/inline]?

 

Aquele layout é só um exemplo, nem todo [inline]<article>[/inline] DEVE ter um [inline]<header>[/inline] e [inline]<footer>[/inline], nem nada do tipo; naquele caso, naquele contexto, sim. Falando de web semântica, você tem que analisar o site em um contexto.

 

De qualquer forma, há alguns detalhes que posso lhe chamar a atenção me baseando no que entendi:

• Você pode usar, para o banner, um elemento [inline]<aside>[/inline]
• Para os boxes pretos, você pode utilizar um [inline]<article>[/inline] ou até um novo [inline]<section>[/inline]

Evite ser relativo se quiser ajuda com os elementos do HTML5. Seja específico. Se você quer que alguém ajude a estruturar semanticamente seu site, diga o significado, as funções dos elementos dele. ;)

[Kaayá Pezzuti 0]

Obrigado pela resposta e pela correção.!

 

no caso os dois boxes pretos seriam de conteúdo. o da direita uma rede social como opção de curtir do facebook. e o direito

algum conteúdo da escolha do cliente.. como NOSSA EMPRESA e uma descrição

 

seria tudo dentro da section principal, ja o banner eu coloquei ele dentro de uma <div> dentro da section principal. pelo fato de não ter nenhum conteudo lateral, na home não usei o <asside>.

mas minha duvida é eu poderia ter 2 ou 3 <section> dentro de uma <section>, ou posso criar quantos <article> precisar?

ou também criar um <section> para cada conteúdo, ai sim poderia colocar <header>, <article> e <footer>, porque nesse caso se como tem titulo seria uma boa maneira não?

[Diéssica 140]

no caso os dois boxes pretos seriam de conteúdo. o da direita uma rede social como opção de curtir do facebook. e o direito

algum conteúdo da escolha do cliente.. como NOSSA EMPRESA e uma descrição

Você pode usar [inline]<section>[/inline] ou [inline]<article>[/inline]. Eu optaria por [inline]<article>[/inline], visto que o conteúdo parece sempre independente do conteúdo principal.

 

ja o banner eu coloquei ele dentro de uma <div> dentro da section principal. pelo fato de não ter nenhum conteudo lateral, na home não usei o <asside>.

O significado de [inline]<aside>[/inline] não é "conteúdo lateral". Isso nem dá pra ser um significado; afinal, o que isso diz sobre o conteúdo? Quão semântico é saber a posição do conteúdo? Não faz sentido.

Utilizá-lo para anúncios é completamente saudável e semântico. Veja a definição:

"The HTML <aside> Element represents a section of a page that consists of content that is tangentially related to the content around it, which could be considered separate from that content. Such sections are often represented as sidebars or as inserts. They often contain side explanations, like a glossary definition; more loosely related stuff, like advertisements; the biography of the author; or in web-applications, profile information or related blog links." :seta: http://www.w3.org/TR/2011/WD-html5-author-20110705/the-aside-element.html

 

mas minha duvida é eu poderia ter 2 ou 3 <section> dentro de uma <section>, ou posso criar quantos <article> precisar?

Sim, você pode. Mas isso não quer dizer que essa seja a melhor maneira de se fazer. Essa necessidade realmente existe?

Sempre tenha bom senso com seus "poderes"...

 

ou também criar um <section> para cada conteúdo, ai sim poderia colocar <header>, <article> e <footer>, porque nesse caso se como tem titulo seria uma boa maneira não?

Você ainda está falando dos boxes menores, certo?

Pelo o que eu entendi, a lógica não está boa. Para títulos você utiliza as tags heading e é isso. Cabeçalho é outra coisa e nem todo título é um cabeçalho. Você pode usar um [inline]<header>[/inline] quando houver informações de cabeçalho, não somente um título. Um exemplo:

<header>
  <h1>Título qualquer</h1>
  <h2>Subtítulo que aprofunda o título</h2>
  <p>Postado em <time datetime="2013-11-18">18 de Novembro de 2013</time></p>
</header>

O mesmo para [inline]<footer>[/inline]: informações de rodapé. Acredito que seja definição o suficiente. Nessas informações de rodapé você pode ter [inline]<aside>[/inline], [inline]<nav>[/inline]... Tudo depende somente de seu contexto e conteúdo.

 

---

 

Kaayá, você ainda tem muitas ideias erradas de web semântica e da semântica dos elementos do HTML5. Não se baseie pelo modelo que viu, e sim pelo significado de cada elemento e seu contexto. Leia sobre cada elemento em alguma documentação confiável, como a W3C, Mozilla Developer Network ou HTML5 Doctor.

Dificuldade para ler em inglês é um problema, pois é o idioma das melhores fontes e discussões que conheço sobre o assunto. Sinceramente, eu até desconheço fontes do tipo.

 

Consulte os sites que recomendei, eles geralmente são bem claros sobre a definição. O HTML5 Doctor discute o significado do elemento em cima da definição da W3C, então talvez você se sinta mais confortável lendo os artigos de lá. Mas há bons exemplos em todas as fontes que sugeri.

 

Sugestões:

:seta: Setions and Outlines of an HTML5 Document (MDN)

:seta: The article element (HTML5 Doctor)

:seta: The aside element (W3C)

:seta: The section element (MDN)

 

Para consultas sobre o HTML em geral e seus elementos, o Element index (HTML5 Doctor) e o HTML developer guide (MDN) são ótimos.

[vonzuben 12]

faltou o hgroup

[Kaayá Pezzuti 0]

Desculpe a demora para responder.. Obrigado pela resposta.. esclareceu bem oque eu queria saber, sou meio leigo porque não foquei muito no front end, agora estou precisando e vou aprender.!!

 

Realmente preciso estudar mais sobre a semântica do HTML 5, Vou dar uma boa estudada nesses sites.!!

 

Muito obrigado Diéssica