HTML x HTML5. Qual é a grande diferença? Se você está procurando entrar no desenvolvimento de front-end ou trabalhar com código no WordPress , você precisa saber a diferença. Pode ser especialmente confuso porque algumas pessoas podem usar os dois termos alternadamente, mas eles são tecnicamente duas coisas diferentes – embora também estejam relacionados.Experimente uma demonstração grátis
Vamos examinar as diferenças entre HTML e HTML5, que é melhor, e o que mudou com a maior atualização da popular linguagem de marcação.
O que é HTML?
HTML significa HyperText Markup Language . Ele constitui os blocos de construção da web e é provavelmente a linguagem de codificação mais conhecida por aí.
HTML é a linguagem padrão usada para desenvolvimento web. Ele permite que você crie a estrutura básica de uma página da web usando pequenas tags chamadas de tags de marcação. Por exemplo, para colocar um trecho de texto em itálico, você pode envolvê-lo em tags HTML como:
<i>Italicized text.</i>Exemplo de tag HTML
Muito do HTML é igualmente simples e legível por humanos, então mesmo os não desenvolvedores acham fácil de trabalhar. Por ser tão importante para a World Wide Web, aprender HTML é surpreendentemente fácil.
É impossível fazer um site sem usar HTML. Embora existam construtores de sites que permitem que você crie um site sem mexer em nenhum código, incluindo o WordPress , eles ainda lidam com código HTML para você nos bastidores.
Portanto, se você deseja se tornar um desenvolvedor web ou se aprofundar em ferramentas como o WordPress, naturalmente precisará aprender HTML.
O HTML costuma ser emparelhado com outras linguagens, como CSS e JavaScript, para estender sua funcionalidade. CSS ajuda a estilizar HTML adicionando cores, layouts e muito mais, enquanto JavaScript é uma linguagem de programação mais tradicional que permite adicionar recursos avançados.
Embora essas duas linguagens combinem bem com HTML, elas não são estritamente necessárias para criar um site. HTML certamente é necessário, e é por isso que é a linguagem da web mais importante.
O que é HTML5?
Logotipo HTML5 (Fonte: W3C )
HTML5 não é um sistema separado, mas sim a versão mais recente da tecnologia HTML. Seu predecessor, o HTML4, teve sua primeira e última atualização em dezembro de 1999. O HTML5, na verdade, não é muito novo, tendo sido lançado há vários anos em 2014.
Qual é a grande diferença? Por que todo esse hype? Embora muitas das tags de marcação permaneçam inalteradas (não conserte o que não está quebrado, afinal), várias delas foram simplificadas, então é muito mais fácil e rápido escrever código. É baseado em um padrão totalmente novo e sua análise também é completamente diferente.
Ao contrário das versões anteriores do HTML, que permitiam a criação de sites principalmente estáticos que precisavam ser aprimorados com CSS e JavaScript, o HTML5 é muito mais dinâmico e inclui elementos multimídia. Suporta vídeo e áudio de forma nativa, e você pode até fazer jogos ou animações com ele.
Em outras palavras, o HTML5 é totalmente capaz de fazer coisas que você precisava antes usando ferramentas antigas como JavaScript, Flash ou Silverlight. Isso significa que seu site é mais seguro e menos aberto a explorações de invasores que tentam entrar.
E embora CSS e JavaScript ainda sejam definitivamente necessários para criar um site completo, você não precisa mais depender deles para fazer nada dinâmico.
HTML5 não é mais apenas um construtor de sites. É um construtor de aplicativos completo por conta própria.
Em vez de a próxima atualização sair como “HTML6”, o HTML5 é continuamente atualizado como um padrão vivo que evolui conforme as necessidades da web. É a versão mais recente e melhor dessa tecnologia de longa duração e ainda estará aqui por muito tempo.
HTML x HTML5: avaliando as diferenças
Quando a maioria das pessoas fala sobre “HTML”, elas estão se referindo à tecnologia como um todo, incluindo sua versão mais recente: HTML5. Embora seja muito diferente em muitos aspectos, o HTML5 é na verdade apenas uma atualização polida do antigo padrão.
Embora HTML e HTML5 façam parte do mesmo sistema, a grande atualização trouxe várias melhorias à antiga linguagem de codificação, tornando-a ainda mais eficiente. Aqui estão apenas alguns exemplos do que foi adicionado.
Compatibilidade
Quando o HTML5 foi lançado, a compatibilidade era uma grande preocupação e um dos principais motivos pelos quais muitos optaram por não atualizar seu site ainda. Se o navegador não soubesse como analisar uma tag HTML5, isso poderia resultar em páginas quebradas ou de aparência estranha.
O oposto é verdadeiro: sites escritos nos padrões HTML4 antigos frequentemente quebram nos navegadores modernos , já que os navegadores há muito abandonaram o suporte para funções desatualizadas. Se você deseja permanecer compatível com os navegadores da maioria das pessoas, o HTML5 é o caminho a percorrer.
Embora as versões mais antigas do HTML funcionem bem em navegadores como o Internet Explorer, essas versões desatualizadas não são mais suportadas ou usadas pela maioria dos usuários. A maioria das pessoas não precisará codificar um site para esses navegadores antigos, portanto, não há necessidade de usar HTML4.
Verificando o suporte do navegador HTML vs HTML5
Embora todos os navegadores modernos suportem tecnicamente HTML4, o suporte para tags obsoletas é irregular, na melhor das hipóteses. Você deve evitar o uso de padrões desatualizados e mudar para HTML5.
Suporte Multimídia
Uma das maiores coisas que o HTML5 traz para a mesa é o suporte para elementos multimídia, como áudio, vídeo, gráficos vetoriais , animações e jogos.
Nos velhos tempos da Web, colocar uma simples animação em seu site geralmente exigia o uso de JavaScript, Flash ou alguma outra tecnologia. Agora você pode fazer isso em HTML ou CSS sem ter que se abrir para qualquer exploração em potencial.
Player de áudio HTML5
O HTML5 também suporta a incorporação de gráficos vetoriais SVG – imagens que podem ser redimensionadas para qualquer resolução sem pixelização. Os SVGs estão se tornando cada vez mais populares para a exibição de gráficos online, uma vez que se expandem bem para preencher qualquer tamanho de tela.
Por último, você pode fazer videogames completos com HTML5, especialmente se combiná-lo com JavaScript. Muitas ferramentas de criação de jogos até mesmo portam para HTML5 e permitem que você insira o resultado em seu site.
Esse suporte multimídia torna o HTML5 o candidato ideal para substituir muitas tecnologias desatualizadas, incluindo Java Web Start, Silverlight e, mais recentemente, Flash . Quase tudo que você pode fazer com esses sistemas pode ser feito de forma mais simples e eficiente em HTML5.
SGML
A linguagem HTML original (até a versão 4) baseava-se fortemente no padrão SGML ou Standard Generalized Markup Language.
Embora SGML tenha como objetivo padronizar a marcação, eliminar confusão e inspirar HTML e XML, ele descendeu de uma linguagem criada na década de 1960. É antigo e, portanto, não foi projetado com aplicativos da web modernos em mente.
HTML5 evoluiu para não estar mais em conformidade com SGML; em vez disso, analisa com suas próprias regras exclusivas. Embora suas origens ainda estejam no SGML e o HTML5 seja apenas uma extensão da tecnologia existente, ele não é mais compatível com esses padrões.
Um resultado disso é que o tratamento de erros é muito mais tolerante agora. Um pequeno erro não resultará mais em um problema gritante para os visualizadores de sua página ou em uma página que não carrega de jeito nenhum.
A semântica, ou tags, também melhorou drasticamente. Antes, estruturando sua página em tudo uso constante exigido de <div>tags: <div id=“header”>, <div id=“menu”>, e <div class=“post”>.
Em HTML5, esses códigos desajeitados seria <header>, <nav>e <article>. Essas tags são mais limpas e responsivas.
Várias novas tags também foram introduzidas. Muitos deles foram criados para substituir os divs e frames usados anteriormente para estruturar páginas.
Muitas das tags de marcação antigas permaneceram totalmente inalteradas, então o HTML5 é parcialmente compatível com versões anteriores. Mas um documento HTML4 intocado não será mais analisado corretamente com os novos padrões.
Embora existam algumas diferenças entre HTML e HTML5, as alterações geralmente são para melhor e têm como objetivo tornar a linguagem de marcação mais acessível.
Melhor desempenho e suporte móvel
Um dos maiores benefícios do HTML5 é que ele é muito mais rápido e responsivo do que as iterações anteriores. Na era do HTML original, outros dispositivos além dos computadores que acessam a Internet ainda nem eram um sonho; agora, está tudo acessível em nossos telefones, relógios e televisores, em parte graças à velocidade do HTML5.
A nova versão trouxe melhores padrões para manter os sites funcionando com mais facilidade em dispositivos menores e menos potentes. Muitos problemas de desempenho ainda dependerão de você e da qualidade do seu código. No entanto, muitas pontas soltas no lado do HTML foram amarradas com a atualização do HTML5.
Por exemplo, o HTML5 oferece suporte a multi-threading com JavaScript Web Workers, permitindo que o processador do seu dispositivo use mais de sua capacidade para executar scripts. O código que costumava atolar uma página agora funcionará perfeitamente.
Projetar sites responsivos também é muito mais fácil em HTML5. O HTML4 tinha muitos elementos que não respondiam, como divs, substituídos por tags de estrutura que funcionam melhor em dispositivos móveis.
Os frames também foram removidos por causar problemas de usabilidade e acessibilidade. Embora ainda tenham suporte, eles foram descontinuados e não devem ser usados, a menos que você tenha motivos para trabalhar com uma tecnologia desatualizada.
Embora não haja substituição direta de HTML5 para frames, é recomendável usar elementos CSS, como flex boxes ou iframes (que ainda são compatíveis com HTML5) para substituir a funcionalidade antiga.
Precisa de hospedagem rápida, segura e amigável para o desenvolvedor para os sites de seus clientes? O Kinsta foi criado com os desenvolvedores em mente e oferece muitas ferramentas com um painel poderoso. Confira nossos planos
Melhores controles de formulário
Exemplo de formulário HTML 5
Originalmente, HTML suportava apenas texto, senha, oculto, caixa de seleção / rádio e tipos de entrada para upload de arquivo. Embora isso seja o suficiente para fazer um formulário de entrada básico, há muito mais que você pode fazer com os tipos de entrada HTML5 agora.
As novas adições incluem e-mail, número de telefone, URL, caixa de pesquisa, controle deslizante, numérico, selecionador de data e hora e entradas de selecionador de cores.
Esse conjunto diversificado de tipos de entrada permite que você crie formulários melhores que podem aceitar mais tipos de conteúdo, com validação incluída para garantir que estão corretos. Verifique a lista completa de entradas HTML para obter mais informações.
Armazenamento web
Quando se trata de armazenamento na web, HTML4 e versões anteriores suportam essencialmente cookies e pouco mais. Armazenar qualquer informação além do rastreamento básico do usuário em um pequeno cookie de 4 kilobytes era quase impossível.
Modo escuro habilitado no WordPress Customizer
Um exemplo do que você pode fazer com o armazenamento local é salvar a preferência do usuário para o tema claro ou escuro em seu site, garantindo que eles continuem a ver seu site como preferem na próxima visita. Embora você também possa salvar as preferências do usuário com cookies, o navegador inevitavelmente os apagará depois de algum tempo.
HTML5 oferece suporte ao armazenamento local por meio da API de armazenamento da Web . Além disso, ele suporta armazenamento de banco de dados Web SQL , armazenamento de banco de dados indexado e até mesmo acesso a arquivos com a API de arquivo . Muitos deles se integram ao JavaScript por meio de APIs . Antes disso, era extremamente complicado de fazer ou, em alguns casos, simplesmente não era possível ou era extremamente complicado de fazer.
Qual é melhor: HTML ou HTML5?
Se você deseja aprender a codificar, definitivamente deve evitar o uso de padrões desatualizados. HTML5 é a versão mais recente do HTML e deve sempre ser usado sobre as versões anteriores da linguagem.
Conforme listado acima, o HTML5 melhora vários aspectos do HTML4 que eram obsoletos e difíceis de trabalhar. Além disso, o HTML5 pode fazer muitas coisas nativamente, enquanto o HTML4 depende inteiramente de sistemas obsoletos há muito tempo, como Silverlight, Java Web Start e Flash.
Embora o HTML5 nem sempre seja exibido corretamente em navegadores e sistemas operacionais muito antigos (como o Internet Explorer ou versões antigas de telefones celulares), essas plataformas estão extremamente desatualizadas e raramente são usadas. Não há mais boas razões para usar versões desatualizadas de HTML em relação aos padrões modernos.
Infelizmente, há muitas informações na Internet e em livros sobre versões anteriores de HTML. Sempre que você consultar um guia ou aprender com um curso ou livro, certifique-se de que está falando sobre HTML5 e foi lançado ou atualizado depois de 2014. Não adianta aprender padrões desatualizados a partir de 1999.
Como converter HTML em HTML5
Se você tiver um site mais antigo, precisará atualizá-lo. Infelizmente, não há uma maneira real de fazer uma conversão total sem fazer nenhum trabalho manual.
A melhor coisa a fazer é ler a especificação HTML5 (ou fazer um curso de HTML se você for totalmente novo na linguagem) e se familiarizar com as mudanças. Depois disso, você pode reescrever o código e adicionar os novos recursos que eles adicionaram no HTML5.
Confira este guia para migrar de HTML4 para HTML5 . Ele cobre extensivamente as alterações manuais que você precisa fazer no código.
Você também pode tentar este conversor de XHTML para HTML5 , mas certifique-se de revisar seu código manualmente ou inseri-lo em um validador antes de importá-lo para um site ativo.
Felizmente, o HTML5 é basicamente um conteúdo novo. Existem algumas tags obsoletas que você precisará substituir, mas, além disso, atualizar o código geralmente não é um grande esforço, a menos que seu site dependa muito de tecnologias obsoletas como frames.