Um dos erros mais comuns que as pessoas cometem ao usar tags é equiparar <section> com <div> do HTML5 - especificamente, usá-lo diretamente como um substituto (para fins de estilo). Em XHTML ou HTML4, frequentemente vemos códigos como este:
<!-- Código HTML 4 estilo --><div id=wrapper> <div id=header> <h1>Minha página super duper</h1> Conteúdo do cabeçalho </div> <div id=main> Conteúdo da página < /div> <div id=secondary> Conteúdo secundário </div> <div id=footer> Conteúdo do rodapé </div></div>
Agora em HTML5, ficará assim:
Por favor, não copie este código! Isso está errado!
<section id=wrapper> <header> <h1>Minha página super duper</h1> <!-- Header content --> </header> <section id=main> <!-- Page content --> </ seção> <section id=secondary> <!-- Conteúdo secundário --> </section> <footer> <!-- Conteúdo do rodapé --> </footer></section>
Este uso está incorreto:**
Não é um contêiner de estilo. O elemento **section representa a parte semântica do conteúdo usado para ajudar a construir um resumo do documento. Deve conter um cabeçalho. Se você estiver procurando por um elemento que atue como um contêiner de página (como o estilo HTML ou XHTML), considere escrever o estilo diretamente no elemento body, como sugere Kroc Camen. Se você ainda precisar de contêineres de estilo adicionais, opte por divs.
Com base nas ideias acima, a seguir estão exemplos do uso correto do HTML5 e de alguns recursos de funções ARIA (observe que dependendo do seu design, você também pode precisar adicionar divs)
<body><header> <h1>Minha página super duper</h1> <!-- Conteúdo do cabeçalho --></header><div role=main> <!-- Conteúdo da página --></div>< apart role=complementary> <!-- Conteúdo secundário --></aside><footer> <!-- Conteúdo do rodapé --></footer></body>2. Use cabeçalhos e hgroups somente quando necessário
É claro que não faz sentido escrever rótulos que não precisam ser escritos. Infelizmente, muitas vezes vejo cabeçalhos e hgroups usados indevidamente sem nenhum propósito. Você pode ler os dois artigos sobre os elementos header e hgroup para uma compreensão detalhada. Resumo brevemente o conteúdo da seguinte forma:
Como os cabeçalhos podem ser usados várias vezes em um documento, isso pode tornar este estilo de codificação popular:
Por favor, não copie este código! Nenhum cabeçalho é necessário aqui ->
<header> <h1>Minha melhor postagem no blog</h1> </header> <!-- Article content --></article>
Se o seu elemento de cabeçalho contiver apenas um elemento de cabeçalho, descarte o elemento de cabeçalho. Como o elemento article já garante que o cabeçalho aparecerá no resumo do documento, e o cabeçalho não pode conter vários elementos (conforme definido acima), por que escrever código extra. Simplesmente escreva assim:
<article> <h1>Minha melhor postagem no blog</h1> <!-- Article content --></article>
uso incorreto de
No tópico de cabeçalhos, também vejo frequentemente hgroups sendo usados incorretamente. Às vezes, hgroup e header não devem ser usados juntos:
A primeira pergunta geralmente é assim:
Por favor, não copie este código! Nenhum hgroup é necessário aqui –> <hgroup> <h1>Minha melhor postagem no blog</h1> </hgroup> <p>por Rich Clark</p></header>
Neste exemplo, basta remover o hgroup e deixar o título seguir seu curso.
<header> <h1>Minha melhor postagem no blog</h1> <p>de Rich Clark</p></header>
A segunda pergunta é outro exemplo desnecessário:
Por favor, não copie este código! Nenhum cabeçalho é necessário aqui ->
<hgroup> <h1>Minha empresa</h1> <h2>Fundada em 1893</h2> </hgroup></header>
Se o único subelemento do cabeçalho for hgroup, o que mais o cabeçalho faz? Se não houver outros elementos no cabeçalho (como vários hgroups), basta remover o cabeçalho diretamente.
<hgroup> <h1>Minha empresa</h1> <h2>Fundada em 1893</h2></hgroup>3. Não coloque todos os links semelhantes a listas na navegação
Com a introdução de 30 novos elementos no HTML5 (a partir do momento da publicação original), nossas escolhas na construção de tags semânticas e estruturadas tornaram-se um tanto descuidadas. Dito isto, não devemos abusar de elementos hipersemânticos. Infelizmente, nav é um exemplo desse abuso. A especificação do elemento nav é descrita a seguir:
O elemento nav representa um bloco na página que contém links para outras páginas ou outras partes desta página;
Nota: Nem todos os links da página precisam ser colocados no elemento nav - este elemento deve ser usado como bloco de navegação principal. Para dar um exemplo específico, muitas vezes há muitos links no rodapé, como termos de serviço, página inicial, página de declaração de direitos autorais, etc. O próprio elemento footer é suficiente para lidar com essas situações. Embora o elemento nav também possa ser usado aqui, geralmente achamos que é desnecessário.
Palavras-chave são navegação primária. É claro que podemos nos esguichar o dia todo sobre o que é importante. É assim que eu defino pessoalmente:
Para facilitar o acesso, você adicionará um link para esta tag de navegação em um atalho?
Se a resposta a essas perguntas for não, faça uma reverência e siga seu próprio caminho.
4. Erros comuns em elementos de figuraO uso correto da figura e da legenda é realmente difícil de dominar. Vamos dar uma olhada em alguns erros comuns,
Nem todas as imagens são figuras
Acima, eu disse para você não escrever código desnecessário. O mesmo vale para esse erro. Já vi muitos sites rotularem todas as imagens como figuras. Para o bem da imagem, não adicione tags extras a ela. Você está apenas se machucando e não deixando sua página mais clara.
As figuras são descritas na especificação como conteúdo fluido, às vezes com sua própria descrição de título. Geralmente, eles são referenciados como unidades independentes no fluxo de documentos. Esta é a beleza da figura – ela pode ser movida da página de conteúdo principal para a barra lateral sem afetar o fluxo do documento.
Esses problemas também são abordados pelo fluxograma de elementos HTML5 mencionado anteriormente.
Se o diagrama for apenas para apresentação e não for mencionado em nenhuma outra parte do documento, então definitivamente não é
. O resto depende da situação, mas comece por se perguntar: Esta imagem tem que ser relevante para o contexto? Se não, provavelmente também não é (talvez seja). Continuando: posso mover isso para um apêndice? Se ambas as perguntas se aplicarem, provavelmente é.
O logotipo não é uma figura
Além disso, os logotipos também não se aplicam às figuras. Aqui estão alguns trechos de código comuns que uso:
<!-- Por favor, não copie este código! Isto está errado--><header> <h1> <figure>  </figure> Nome da minha empresa </h1 > </header><!-- Por favor, não copie este código! Isso também está errado--><header> <figure>  </figure></header>
Não há mais nada a dizer. Este é um erro muito comum. Podemos discutir uns com os outros até que as vacas voltem para casa sobre se o logotipo deveria ser uma etiqueta H1, mas esse não é o ponto aqui. O verdadeiro problema é o uso excessivo do elemento figura. As figuras só devem ser referenciadas dentro do documento ou rodeadas por elementos de seção. Acho improvável que seu logotipo seja referenciado dessa forma. É simples, não use figura. Você só precisa fazer isso:
<header> <h1>Nome da minha empresa</h1> <!-- Mais coisas aqui --></header>
Figura não é apenas uma imagem
Outro equívoco comum sobre figura é que ela só é usada em imagens. Uma figura pode ser um vídeo, áudio, gráfico, citação, tabela, código, prosa ou qualquer combinação destes ou de outros. Não limite os números às imagens. É função dos padrões da web descrever com precisão o conteúdo usando tags.
5. Não use atributos de tipo desnecessáriosEste é um problema comum, mas não um erro, e acho que devemos evitar esse estilo através das melhores práticas.
No HTML5, os elementos de script e estilo não exigem mais o atributo type. No entanto, é provável que eles sejam adicionados automaticamente pelo seu CMS, por isso não é tão fácil removê-los. Mas se você estiver codificando manualmente ou tiver controle total sobre seus modelos, não há motivo para incluir o atributo type. Todos os navegadores pensam que os scripts são javascript e os estilos são estilos css, então você não precisa mais fazer isso.
<!-- Por favor, não copie este código! É muito redundante --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts! /></script>
Na verdade, tudo que você precisa fazer é escrever:
<link rel=stylesheet href=css/styles.css /><script src=js/scripts /></script>
Até mesmo o código que especifica o conjunto de caracteres pode ser omitido. Mark Pilgrim explica isso no capítulo Semântica de Dive into HTML5.
6. Uso incorreto do atributo de formulárioHTML5 introduz alguns novos atributos de formulário. Aqui estão algumas notas sobre o uso:
Propriedades booleanas
Alguns elementos multimídia e outros elementos também possuem propriedades booleanas. As mesmas regras se aplicam aqui.
Alguns dos novos atributos do formulário são booleanos, o que significa que, desde que apareçam no rótulo, é garantido que o comportamento correspondente será definido. Essas propriedades incluem:
Francamente, raramente vejo isso. Tomando o obrigatório como exemplo, os mais comuns são os seguintes:
<!-- Por favor, não copie este código! Isso está errado --><input type=email name=email require=true /><!-- Outro exemplo de erro --><input type=email name = e-mail obrigatório=1 />
A rigor, isso não é grande coisa. Contanto que o analisador HTML do navegador veja o atributo obrigatório aparecendo em uma tag, sua funcionalidade será aplicada. Mas e se você escrever require=false ao contrário?
<!-- Por favor, não copie este código! Isso está errado --><input type=email name=email require=false />
O analisador ainda tratará o atributo necessário como válido e executará o comportamento correspondente, mesmo se você tentar instruí-lo a não executá-lo. Obviamente não é isso que você deseja.
Existem três maneiras válidas de usar propriedades booleanas. (Os dois últimos são válidos apenas em xml)
A maneira correta de escrever o exemplo acima é:
<tipo de entrada=nome do e-mail=e-mail obrigatório />Resumir
O texto acima é o que o editor apresenta a você sobre como evitar 6 usos incorretos comuns de HTML5. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!