Por que se incomodaria em marcar corretamente e semanticamente?

Funcionalidade Livre

Usar corretamente <label> s significa que você pode clicar no marcador para inserir o campo de texto. Muitos navegadores adicionam funcionalidade lógica padrão a muitas tags de acordo com a especificação oficial, o que significa que você pode usar menos plug-ins JavaScript e escrever menos código do que um site feito inteiramente de <div> se <span> s.

Acessibilidade

Relacionado a funcionalidade livre, a semântica significa muito para o software leitor de tela. O texto na frente de um campo de entrada não será lido da mesma maneira que um <label> . Os leitores de tela ignoram a maior parte do seu CSS, por isso, ele depende principalmente da estrutura do seu HTML.

CSS lógico

Por que usar um div #header quando você pode usar um <header> e o estilo diretamente? As tags semânticas facilitam a marcação das coisas e tornam o seu estilo muito mais portátil; Se você tem um certo estilo para strikeout e sempre usa <del> elements o estilo é muito mais portátil. <del> significa a mesma coisa para todos, mas todos nomearão sua classe .deletedText de maneira diferente.

Também ajuda a manter todos na mesma página em grandes projetos; ninguém gosta de aprender convenções de nomenclatura de classe esotérica de outras pessoas.

SEO

Os mecanismos de pesquisa como o Google aumentaram o uso de HTML e metadados semânticos . Os Rich Snippets do Google também usam metadados especiais destinados a transmitir conteúdo semântico.

Por que não é tão comum

É preciso trabalho, e as pessoas estão acostumadas a julgar um site pela aparência e funciona . Frequentemente, não há contabilização da semântica porque as pessoas que escrevem o caso de negócios para aplicativos não entendem ou porque é importante.

É muito difícil para as pessoas não técnicas entender ou avaliar a semântica de HTML.

Se um site parece ser bom e parece funcionar, por que se preocupar? Muitas pessoas podem nem sequer saber que é mais do que isso. Semelhante à acessibilidade, isso tende a ser ignorado até que alguém da sua equipe realmente entenda isso.

Se você quiser que HTML semântico seja uma prioridade em seu projeto, você precisa apresentar o caso para ele. Mostrar à sua equipe / chefe como o site funciona em um leitor de tela também é uma ferramenta útil.

A resposta para isso é simplesmente para transmitir informações e para estruturar seu documento .

Quando você usa spans e divs, seu documento não possui uma estrutura. Não há listas, sem parágrafos, sem tabelas, sem hiperlinks. Nada. Não há realmente nenhum ponto para escolher HTML como uma linguagem de marcação e, em seguida, ignorar o vocabulário que oferece para expressar e estruturar seu conteúdo. Estrutura é a palavra importante aqui btw. HTML é para estruturar não exibir. É para isso que CSS é.

Se você marcar seu código semanticamente, estará dando aos leitores humanos, assim como às máquinas, uma chance de entender os dados dentro de seus elementos. Se você usar os elementos span e div até o fim, você não terá essas informações extras e inferi-las a partir dos valores pode não ser possível.

Da mesma forma, se eu quiser raspar sites e apenas extrair os títulos para criar o Índice para eles, minha aranha precisaria saber qual é o cabeçalho. Não pode fazer isso sem os elementos apropriados.

Por último, mas não menos importante, se você usar somente divs e spans, você terá dificuldades em estilizá-los com CSS. Os Seletores de CSS funcionam na estrutura do seu documento e, se isso for principalmente uma estrutura ambígua, as regras de CSS ficam duvidosas para serem aplicadas. Como você decide se div div div realmente se refere a table tr td ou body ul li ? Você teria que adicionar classes e ids então, mas então você está reinventando a roda.

Veja também a recomendação do W3C

Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.

Para adicionar as já boas respostas aqui, uma coisa que eu não vi mencionada é a compatibilidade com versões futuras . À medida que a especificação evolui, é possível que funcionalidades adicionais sejam especificadas para certos elementos semânticos. Se seu código estiver semanticamente correto, ele poderá tirar proveito dessa funcionalidade sem manutenção mínima.

Um motivo pelo qual você não vê muitos sites seguindo a semântica perfeitamente é que não há um caso de negócio para ele na maior parte do tempo. Se isso gera vendas (ou uma categoria relacionada como exposição), então vale a pena investir em HTML semântico.

O melhor caso que posso fazer para o uso semântico de tags é quando você está consumindo ou usando HTML com uma ferramenta. Por exemplo, usar tags semânticas permite que você crie estilos diretamente sem medo de adicionar ou remover estilos de outra coisa. Além disso, se você tiver que analisar HTML usando um scraper ou qualquer coisa parecida, então você certamente apreciaria o HTML bem formado e semântico à medida que se torna mais fácil escrever consultas XPath e DOM para encontrar o que você precisa.

Devo observar que as classes não são substitutas diretas das tags semânticas. Eu tenho uma classe reutilizável [error, information, warning] que transmite diferentes significados e, portanto, estilos baseados na tag à qual estão ligados.

Porque pode ser útil ou necessário para rastreadores e serviços da Web (computadores da AKA que se comunicam com computadores). Se você escrever:

<span class="time">Sep 16 at 2:17</span>

... o rastreador da web não precisará entendê-lo como uma data, uma coisa do tempo. Ou será muito mais difícil localizá-lo como uma informação de data.

Se você usa:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... será muito mais fácil para qualquer rastreador encontrar e analisar as coisas.

Quando eu digo rastreadores, não quero dizer necessariamente com os mecanismos de pesquisa:)

Eu gerencio uma pequena empresa de consultoria na web, e nossa abordagem atual é não usar as novas tags HTML5 porque estamos tentando equilibrar muitos fatores. Nesse caso, o equilíbrio é entre usabilidade, usabilidade e SEO:

• SEO: O que outras respostas aqui disseram - pode ajudar um pouco para SEO, embora baseado na minha experiência, quanto mais óbvia é uma estratégia de SEO, menos provável é ajudar.

• Usabilidade # 1: é razoável supor que as tags HTML5 conferem algum tipo de vantagem de usabilidade. Para os usuários cegos, é certo que qualquer que seja o seu navegador acessível, eles serão melhores do que qualquer coisa que eu possa fornecer. Para o seu usuário típico é muito mais discutível. Talvez o uso de um player de mídia sem pele que seu navegador forneça seja mais fácil de usar do que o widget menos familiar que eu coloquei lá. Ou talvez o padrão do seu navegador seja uma porcaria (como o modo como o MP3 player padrão do Chrome Windows simplesmente para de funcionar periodicamente).

• Usabilidade # 2: IE antigo. O IE antigo requer vários shims HTML5 que incham a página para que essas tags funcionem. Você precisa adicionar um script às tags head que chama CreateElement () em um loop em todas as tags HTML5 que você está usando. Se você não estiver indo ao redor vasculhando cada página para as tags que você tem em uso, isso significa que todas as tags HTML5. Isso precisa ser executado em todas as páginas, inline, ou seja, sem cache. E uma má notícia: o IE antigo é o mais lento para executar o Javascript, por isso cria uma boa guinada enquanto carrega. Em seguida, você terá que usar um monte de Javascript e CSS somente no IE antigo e, com freqüência, o Flash, para tornar todos os elementos sem suporte mais recentes renderizados corretamente. Você pode detectar o recurso antes de decidir carregar o antigo código do IE, mas você está fazendo com que os antigos usuários do IE esperem até que scripts suficientes tenham sido carregados para detectar esse recurso antes mesmo de começar a solicitar todas as coisas que fazem essas tags funcionarem. Você poderia detectar o navegador e enviar apenas o material antigo do IE para os usuários com esses navegadores, mas isso pode dificultar ou impossibilitar o armazenamento em cache, dependendo da sua plataforma. Entregar código diferente para usuários diferentes também significa que o teste é mais complicado - já teve um erro de assincronia? Como cerca de um que só ocorre em um navegador específico? E só em produção? Me inscreva. Então, você provavelmente vai mandar esse inchaço para todo mundo.

Até o IE8 morrer, o valor dessas tags HTML5 mais recentes não é alto o suficiente para os problemas de desempenho que eles trazem. Ainda estamos para trabalhar com um público que está perto de morrer *, mas algum dia.

* Nossas métricas mais recentes mostram o IE8 em 6% para o site com o menor número de visitantes do IE8 e 24% com o maior número de visitantes do IE8. Longe, longe de morrer.

A resposta curta é "Não há boa razão na prática". Quase todos os argumentos dados em favor da marcação "semântica" são apenas pensamentos sobre o que poderia ou deveria acontecer, em vez de algo tangível. Por exemplo, os mecanismos de pesquisa costumam ser mencionados, mas não há evidência pública de que eles se preocupam menos com time ou output ou address .

Indiretamente, podemos inferir que eles não se importarão no futuro previsível. O site schema.org , por alguns dos principais mecanismos de busca, favorece claramente uma abordagem específica para a “marcação semântica” baseada em algo completamente diferente, a saber: microdados ( itemscope e atributos relacionados). E eles realmente fazem isso principalmente para grandes sites comerciais ou comunitários.

Usar span ou div funciona melhor do que as novidades do HTML5, já que as últimas não são reconhecidas pelas versões antigas do IE, mesmo para fins de estilização. Então você precisa de alguns truques para fazê-los "funcionar" mesmo como elementos de contêiner.

No entanto, existem alguns elementos “semânticos” que têm significado real atribuído a eles por navegadores, software assistivo ou mecanismos de pesquisa. Usar h1 para o cabeçalho principal sempre foi uma boa prática por essas razões. Usar label para rótulos de campo de formulário tem um impacto real na usabilidade e acessibilidade. E assim por diante; veja O guia pragmático de HTML: Princípios .

HTML não é apenas uma linguagem de interface do usuário, é também uma linguagem de estruturação de dados. Ele foi projetado para ajudar as máquinas heterogêneas a terem uma maneira comum de identificar o tipo de informação que chega ao servidor. Daí tantas tags diferentes. As páginas HTML devem ser consideradas como estruturas de dados.