HTML vs HTML5. Qual é a grande diferença? Se você está procurando entrar no desenvolvimento frontend 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 de forma intercambiável, mas tecnicamente são duas coisas diferentes – embora também estejam relacionadas.
Vamos rever as diferenças entre HTML vs HTML5, qual é melhor, e o que mudou com a maior atualização da linguagem markup popular.
O que é HTML?
HTML significa HyperText Markup Language. Compõe os blocos de construção da web, e é provavelmente a linguagem de codificação mais comumente conhecida por aí.
HTML é a linguagem padrão utilizada para o desenvolvimento web. Ela permite criar a estrutura base de uma página web usando pequenas tags chamadas markup tags. Por exemplo, um texto itálico, você pode embrulhá-lo em tags HTML como tal:
<i>Italicized text.</i>
Muito do HTML é similarmente simples e legível pelo ser humano, portanto, mesmo os não desenvolvedores acham fácil trabalhar com ele. Por ser tão importante para a World Wide Web, pegar o HTML é chocantemente fácil.
É impossível fazer um website sem o uso de HTML. Embora existam construtores de websites que podem permitir que você projete um site sem tocar em nenhum código, incluindo WordPress, eles ainda estão manipulando o código HTML para você nos bastidores.
Portanto, se você quiser se tornar um desenvolvedor web ou mergulhar mais profundamente em ferramentas como o WordPress, você naturalmente precisará aprender HTML.
O HTML é frequentemente emparelhado com outras linguagens, como CSS e JavaScript, para ampliar sua funcionalidade. O CSS ajuda no estilo HTML, adicionando cores, layouts e muito mais, enquanto o JavaScript é uma linguagem de programação mais tradicional que permite adicionar recursos avançados.
Embora essas duas linguagens sejam bem agrupadas com HTML, elas não são estritamente necessárias para criar um website. O HTML certamente é necessário, e é por isso que é a linguagem web mais importante.
O que é HTML5?
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. Na verdade, o HTML5 não é muito novo, tendo sido lançado há vários anos, em 2014.
Então, qual é a grande diferença? Por que toda essa propaganda? Embora muitas das etiquetas markup permaneçam inalteradas (não consertam o que não está quebrado, afinal de contas), várias delas foram simplificadas, por isso é muito mais fácil e rápido escrever código. É baseado em um padrão totalmente novo, e sua análise é completamente diferente também.
Ao contrário das versões antigas do HTML, que permitiam criar principalmente sites estáticos que precisavam ser apimentados com CSS e JavaScript, o HTML5 é muito mais dinâmico e inclui elementos multimídia. Ele suporta nativamente vídeo e áudio, e você pode até mesmo fazer jogos ou animações com ele.
Em outras palavras, o HTML5 é totalmente capaz de fazer coisas que você precisava fazer anteriormente usando ferramentas antigas como JavaScript, Flash, ou Silverlight. Isto significa que seu site é mais seguro e menos aberto a explorações de atacantes que tentam entrar.
E embora CSS e JavaScript ainda sejam definitivamente necessários para criar um website completo, você não precisa mais confiar neles para fazer qualquer coisa dinâmica.
O HTML5 não é mais apenas um construtor de websites. É um construtor de aplicações inteiro por conta própria.
Ao invés da próxima atualização que sai como “HTML6”, o HTML5 é continuamente atualizado como um padrão de vida evoluindo conforme a web precisa. É a última e maior versão desta tecnologia de longa duração, e vai ficar aqui por um longo tempo.
HTML vs HTML5: Ponderando as diferenças
Quando a maioria das pessoas fala em “HTML”, elas se referem à tecnologia como um todo, incluindo sua última versão: HTML5. Embora seja muito diferente em muitos aspectos, o HTML5 é realmente apenas uma atualização polida para o padrão antigo.
Enquanto HTML e HTML5 fazem 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 saiu pela primeira vez, a compatibilidade foi uma grande preocupação e uma das principais razões pelas 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: os websites escritos nos antigos padrões HTML4 muitas vezes quebram nos navegadores modernos, pois há muito tempo os navegadores deixaram de suportar funções desatualizadas. Se você quiser permanecer compatível com a maioria dos navegadores das pessoas, o HTML5 é o caminho a seguir.
Enquanto versões antigas do HTML funcionam bem em navegadores como o Internet Explorer, estas 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 tais navegadores antigos, portanto, não há necessidade de usar HTML4.
Como você pode ver aqui, o HTML5 e a maioria de suas funções são suportados em todos os navegadores modernos. Suas novas tags são suportadas total ou parcialmente em todas as versões 6-8 e Firefox 2, todas do início dos anos 2000 e raramente são utilizadas atualmente.
Enquanto todos os navegadores modernos suportam tecnicamente o HTML4, o suporte a tags obsoletas é, na melhor das hipóteses, manchado. Você deve evitar usar padrões desatualizados e mudar para HTML5.
Suporte Multimídia
Uma das maiores coisas que o HTML5 traz à mesa é o suporte para elementos multimídia como áudio, vídeo, gráficos vetoriais, animações e jogos.
Nos velhos tempos da Web, colocar tanto quanto uma simples animação em seu site normalmente exigia o uso de JavaScript, Flash, ou alguma outra tecnologia. Agora você pode fazer isso em HTML ou CSS sem ter que se abrir a qualquer exploração potencial.
Com vídeo e áudio, a incorporação de um player é tão fácil quanto cair em uma simples etiqueta. Há muitas configurações que você pode fazer a partir daí, como ligar o autoplay ou adicionar controles de player.
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 on-line, pois se esticam bem para preencher qualquer tamanho de tela.
Por último, você pode fazer jogos de vídeo completos com HTML5, especialmente se você combiná-los com JavaScript. Muitas ferramentas de criação de jogos até mesmo portam para HTML5 e permitem que você incorpore o resultado em seu site.
Este suporte multimídia faz do HTML5 o candidato ideal para substituir muitas tecnologias ultrapassadas, incluindo Java Web Start, Silverlight, e, mais recentemente, Flash. Quase tudo o que você pode fazer com estes sistemas pode ser feito de forma mais simples e eficiente em HTML5.
SGML
A linguagem HTML original (até a versão 4) era baseada fortemente no padrão SGML ou Standard Generalized Markup Language.
Embora a SGML tenha o objetivo de padronizar o markup, eliminar a confusão e tenha inspirado tanto o HTML quanto o XML, ela foi descendente de uma linguagem criada nos anos 60. É antiga e, portanto, não foi projetada com aplicações web modernas em mente.
O HTML5 evoluiu para não estar mais em conformidade com a SGML; em vez disso, ele se assemelha a suas próprias regras únicas. Embora suas origens ainda estejam na SGML, e o HTML5 é apenas uma extensão da tecnologia existente, ele não está mais em conformidade com essas normas.
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 espectadores em sua página, ou em uma página que não carrega nada.
A semântica, ou tags, também melhorou drasticamente. Antes, a estruturação de sua página exigia o uso constante de <div> tags: <div id="header"> , <div id="menu"> , e <div class="post">.
Em HTML5, esses códigos desajeitados seriam <header> , <nav> , e <article>. Estas tags são tanto mais limpas quanto mais responsivas.
Várias novas etiquetas também foram introduzidas. Muitas delas foram criadas para substituir os divs e frames usados anteriormente para estruturar as páginas.
Muitas das antigas etiquetas markup ficaram totalmente inalteradas, portanto o HTML5 é parcialmente compatível com versões anteriores. Mas um documento HTML4 intocado não será mais compatível corretamente com os novos padrões.
Embora existam algumas diferenças entre HTML e HTML5, as mudanças são geralmente para melhor e se destinam a tornar a linguagem markup mais acessível.
Melhor desempenho e suporte móvel
Um dos maiores benefícios do HTML5 é que ele é muito mais rápido e muito mais ágil do que as iterações anteriores. Na era do HTML original, outros dispositivos além de computadores acessando a Internet ainda nem eram um sonho; agora, tudo é acessível a partir de nossos telefones, relógios e televisores, graças em parte à velocidade do HTML5.
A nova versão trouxe melhores padrões para manter os websites funcionando mais suavemente em dispositivos menores e menos poderosos. Muitas questões de desempenho ainda dependerão de você e da qualidade de seu código. No entanto, muitas pontas soltas no lado HTML foram amarradas com a atualização do HTML5.
Por exemplo, o HTML5 suporta multi-tarefas com o JavaScript Web Workers, permitindo que o processador de seu dispositivo use mais de seu poder para executar scripts. O código que costumava atolar uma página agora será executado sem problemas.
Projetar websites responsivos também é muito mais fácil em HTML5. HTML4 tinha muitos elementos que não respondiam, tais como mergs, substituídos por tags de estrutura que funcionam melhor em celulares.
As molduras também foram removidas por causar problemas de usabilidade e acessibilidade. Enquanto ainda são suportados, eles foram depreciados e não devem ser usados a menos que você tenha motivos para estar trabalhando com tecnologia ultrapassada.
Embora não haja substituição direta de quadros HTML5, é recomendado o uso de elementos CSS como caixas flexíveis ou iframes (que ainda são suportados em HTML5) para substituir a funcionalidade antiga.
Melhores controles de formulário
Novos controles de formulário equivalem a um novo nível de controle sobre seu site. Embora isto possa parecer uma pequena característica, significa ter que contar com menos uma tecnologia externa para criar um formulário de trabalho.
Originalmente, somente texto, senha, oculto, caixa de seleção/rádio e tipos de entrada de upload de arquivos eram suportados por HTML. Embora isso seja 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, slider, numérico, seletor de data e hora, e entradas de seletor de cores.
Esta diversidade de tipos de entrada permite criar melhores formulários que podem aceitar mais tipos de conteúdo, com validação incluída para garantir que eles estejam corretos. Consulte a lista completa de entradas HTML para obter mais informações.
Armazenamento Web
Quando se trata de armazenamento na web, o HTML4 e abaixo suportam essencialmente cookies e pouco mais. Armazenar qualquer informação além do rastreamento básico do usuário em um minúsculo cookie de 4 kilobytes era quase impossível.
Por outro lado, o armazenamento local permite armazenar 5-10 megabytes de dados, dependendo do navegador. Isto permite salvar informações do lado do cliente sobre sessões anteriores, dados de acesso offline, customizações pessoais e muito mais. Além disso, o armazenamento local não é apagado automaticamente, ao contrário dos cookies.
Um exemplo do que você pode fazer com o armazenamento local é salvar a preferência de um usuário pelo tema claro ou escuro em seu site, garantindo que ele continue a ver seu site como ele prefere em sua próxima visita. Embora você também possa salvar as preferências do usuário com cookies, o navegador inevitavelmente os limpará após algum tempo.
O HTML5 suporta armazenamento local através da API de armazenamento Web. Também suporta armazenamento de banco de dados Web SQL, armazenamento de banco de dados indexado e até mesmo acesso a arquivos com a API File. Muitos deles se integram com JavaScript através das APIs. Antes disso, ou era extremamente complicado de fazer ou, em alguns casos, simplesmente não era possível ou era extremamente complicado de fazer.
Qual é o melhor: HTML ou HTML5?
Se você quer aprender a codificar, você deve definitivamente evitar o uso de normas desatualizadas. HTML5 é a versão mais nova do HTML e deve ser sempre usada em versões mais antigas.
Como listado acima, o HTML5 melhora vários aspectos do HTML4 que eram obsoletos e difíceis de serem trabalhados. Além disso, HTML5 pode fazer muitas coisas nativamente, enquanto HTML4 se baseia inteiramente em 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 super antigos (como o Internet Explorer ou versões antigas de telefones celulares), estas plataformas estão extremamente desatualizadas e raramente são mais utilizadas. Não há mais boas razões para usar versões desatualizadas do HTML em relação aos padrões modernos.
Infelizmente, há muitas informações na Internet e em livros sobre versões antigas do HTML. Sempre que você procurar um guia ou aprender com um curso ou livro, certifique-se de que ele esteja falando sobre HTML5 e foi lançado ou atualizado após 2014. Não há utilidade em aprender padrões ultrapassados de 1999.
Como converter HTML para HTML5
Se você tem um site mais antigo, você precisa 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 as novas características que eles adicionaram no HTML5.
Confira este guia para migrar de HTML4 para HTML5. Ele cobre extensivamente as mudanças manuais que você precisa fazer no código.
Você também poderia 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 ao vivo.
Felizmente, o HTML5 é, em sua maioria, um conteúdo novo. Há algumas tags obsoletas que você precisará substituir, mas além disso, atualizar o código normalmente não é um grande esforço, a menos que seu site dependa muito de tecnologia obsoleta, como frames.
Resumo
HTML e HTML5 são apenas duas partes da mesma tecnologia, embora signifiquem coisas ligeiramente diferentes. HTML refere-se à linguagem markup como um todo, muitas vezes à versão mais recente, enquanto HTML5 é a última atualização da mesma.
Se você está procurando aprender HTML, é importante usar a última edição: HTML5. É melhor em todos os sentidos, e mesmo que isso signifique ter que converter muito código antigo manualmente, definitivamente vale a pena o esforço.
O HTML5 já tem vários anos e, como padrão de vida da linguagem como um todo, ele só continuará a ser atualizado para trabalhar com a web moderna.
Deixe um comentário