Estou construindo um aplicativo da web para uso em PCs. Quais são as tags HTML5 para evitar problemas de compatibilidade com navegadores como o IE8 e superior?

Observação: a maioria das perguntas tem de 1 a 3 anos sobre esse assunto.

Você perguntou de quais tags HTML5 se deve evitar.

Bem, algumas das tags do HTML5 do meu conhecimento foram feitas por razões semânticas. como o seguinte, por exemplo.

<article> <section> <aside> <nav> <header> <footer> ..ect

São quase bons de se trabalhar e requerem apenas um pouco de CSS, por exemplo. display: block;para funcionar normalmente na maioria dos navegadores, embora em navegadores mais antigos, por exemplo. Internet Explorer, você deve criar um elemento em Javascript para que seja compatível.

Aqui está um exemplo.

document.createElement('article');

Configuraria o <article>elemento para uso no Internet Explorer mais antigo.

Para tags HTML5 mais avançadas que requerem a funcionalidade Javascript para funcionar, são algumas das seguintes.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

Esses elementos são mais difíceis de suportar / shiv em navegadores mais antigos. Embora eu tenha incluído um link para cross-browser polyfills na parte inferior, embora eu não os tenha investigado pessoalmente.

Portanto, eu diria que qualquer elemento que não requeira a funcionalidade Javascript é perfeitamente adequado para uso com um pequeno código de suporte para vários navegadores.

Se sua segmentação for > IE8 , você não terá problemas se usar uma faca.

O que eu chamo de navegadores mais antigos? <IE9

O suporte do navegador para tags HTML5 hoje é.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Não são suportados pelo Internet Explorer a menos de 8, mas podem ser corrigidos assim.

CSS:

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

E <audio> <video> <canvas>não são suportados no <IE 9

O <embed>elemento tem suporte parcial em > IE8

Você também deve olhar para esta tag.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

Essa metatag informa ao Internet Explorer para exibir a página no modo mais alto do IE disponível, em vez de entrar no modo de compatibilidade e renderizar a página como o IE7 ou 8 faria. Mais informações sobre isso aqui .

Links de ajuda para HTML5

Para começar, você pode verificar o BoilerPlate HTML5

Para tabelas de suporte de compatibilidade de navegador, você pode verificar - http://caniuse.com/

HTML5 Shiv - https://github.com/afarkas/html5shiv

Lista de Polyfills HTML5 - https: //github.com/Modernizr/Modernizr/wiki / ...

Atualizar

Conforme mencionado em um comentário

Tenha cuidado com a meta tag Compatível com X-UA. Se você usar algo como o padrão html5 que tem comentários condicionais em torno do elemento (isso também acontece com o doctype IIRC do html5), poderá ter problemas com o IE9 forçando-se a entrar no modo padrão do IE7, mesmo com a tag. IE ataca novamente

Você pode querer dar uma olhada nisso, não tenho nada para apoiar isso no momento.

Geralmente, existem problemas.

Disseram-me que sua pergunta foi formulada para perguntar sobre tags HTML 5 mas também é útil examinar os novos recursos à luz de qualquer Javascript que você possa encontrar ou escrever.

Na prática, o método recomendado é testar a existência do recurso, em vez de um navegador específico. O script Modernizr pode ser útil nesse sentido, mas também há relatórios de recursos indetectáveis ​​no HTML5 .

Alguns recursos, como local storagevoltar ao IE8.

Outros, como FileReader, requerem IE10 / Firefox21 / Chrome27

Para obter informações atualizadas, tente http://caniuse.com

Escreva HTML 5 como faria normalmente e use Shims para garantir a compatibilidade com navegadores mais antigos. Você só precisa ter cuidado com as APIs Javascript, porque dificilmente podem ser corrigidos. Se você está tentando seguir o HTML 4 básico para compatibilidade, não há motivo para usar o HTML 5.

Para uma rápida comparação de quais tags estão disponíveis em quais navegadores e em que nível de suporte para cada tag, html5test.com é um ótimo recurso.

Você está procurando uma matriz de compatibilidade HTML5

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

Além disso, para obter a melhor compatibilidade entre navegadores, sugiro que você use este reset.css criado por Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Isso faz com que os elementos que diferem de um navegador para outro se comportem da mesma forma em todos os navegadores.