Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

HTML e HTML5 - Qual a diferença ? O que muda ?

Tutorial - Qual a diferença entre HTML5 e HTML 4.01
Símbolo do HTML5
Neste tutorial de HTML5 inicial de nosso curso, iremos entender o que ocasionou a mudança do antigo HTML (4.01) para o novíssimo, revolucionário e fantástico HTML5.

Vamos ver como era a internet antigamente, como funcionava, e as mudanças que ocorreram na web que culminaram no desenvolvimento do tão falado e poderoso HTML5.

Para iniciar seus estudos nestes tutoriais de HTML5, recomendamos que tenha estudado os tutoriais de HTML e CSS de nossa apostila online.





HTML5 - Por que e Para que foi criado ?

Há quanto tempo você acessa a internet? 5 anos? 6 anos?
Se acessa há, digamos, 10 anos ou mais, certamente o que falaremos aqui será nostálgico, e verá como as coisas evoluíram.

Na década de 90, usar imagem em um site era um luxo.
Na época, as pouquíssimas pe$$oa$ que tinham dinheiro para obter um computador, usava a internet através da linha telefônica, cuja velocidade era de 56kbps (compare com a sua hoje, onde 1MB é cerca de mil KB).

Ao entrar em sites com imagens, era necessário esperar alguns minutos para elas aparecerem.
Baixar algumas mp3? Sim, era possível. Bastava deixar seu computador ligado de madrugada, baixando músicas pelo Napster.
Vídeos? Eram raros, bem raros e geralmente duravam alguns segundos.

O máximo de interação que tínhamos eram através de fórums e do IRC (um bate papo no modo texto, onde usávamos um terminal de comandos para entrar nas salas, excluir pessoas, e tudo mais).

Nessa época o antigo HTML reinava, o JavaScript e PHP eram pouco usados, e o CSS nem existia.

Agora dê uma olhadinha nas abas de seu navegador e nos programas abertos em seu computador (ou celular, tablet, smartphone etc).
Deve estar ouvindo música ou vendo um show no Youtube, talvez tenha pausado seu seriado favorito para estudar HTML5, deve estar conversando com várias pessoas em alguma rede social ou em um chat com vídeo, além de estar navegando em algum site de notícias.

Notou a diferença? Hoje em dia a velocidade da internet mudou e as máquinas melhoraram, tudo gira em torno de belas imagens, alta resolução de vídeos, jogos online que não rodavam nem nos melhores computadores de 10 anos atrás, música, interação em redes sociais, celulares e outros mobile em crescente de uso, etc etc.





Resumindo: a internet mudou drasticamente, e o desenvolvimento web é que deu suporte para tudo isso. Assim, é fácil entender porque o antigo HTML teve de mudar, além do surgimento de novas ferramentas, linguagens e aplicativos para desenvolvimento web.

Mas vamos com calma, com o tempo aprenderemos tudo sobre programação web.
Por hora, vamos nos focar no HTML5, saber o que é, para que serve, onde é usado e o que vamos fazer com ele em nosso curso.

HTML5 - O que mudou? O que ele faz?

De uma maneira bem simples e direta: o HTML5 faz o que antes só era possível com outras ferramentas e linguagens de programação.

Com poucos, e simples códigos, o HTML5 nos proporciona efeitos muito úteis, de uma maneira bem lógica e fácil de aprender.

Vamos entrar mais em detalhes sobre algumas características marcantes do HTML5, que iremos estudar em nossos tutoriais no decorrer desta seção de nossa apostila.

HTML5 - Multimídia

Colocar uma música de fundo ou um vídeo dentro de uma página usando o antigo HTML era um verdadeiro suplício.

Tínhamos que ter cuidado com os browsers, dispositivos usados pelo usuário e até mesmo checar se alguns plugins estavam instalados, como o Flash.

Vamos ver que, com apenas algumas linhas de código HTML5, podemos inserir um vídeo ou som facilmente em qualquer site.

HTML5 - Multi-plataforma e Dispositivo

Quando o HTML antigo surgiu e reinou, internet eram para computadores normais.
E por normais falamos de um enorme monitor de tubo, um gabinete com a CPU, estabilizador, mouse e caixas de som plantados numa mesa (geralmente cara).

Hoje não é assim. Hoje usamos celular para acessar as redes sociais, um aplicativo para navegar pela web e ler e-mail, e até mesmo ver vídeos no Youtube.
Enviamos links através de chats e programas de troca de sms, fotos e até fazemos reuniões online (hangouts).

Isso tudo não existia antes, então o coitado do antigo HTML não podia fazer muita coisa.
Mas o HTML5 é ciente disso, foi e continua a ser desenvolvido por programadores que estão cientes que as pessoas usam diversos dispositivos, aplicativos e sistemas operacionais.

Então o HTML5 já vem preparado para toda essa evolução.
Criar um site em HTML5 é ter a certeza que ele está atualizado e vai se comportar da melhor maneira possível, não importa o dispositivo que estejam acessado, navegador ou sistema operacional. Ele é feito ciente dessas variedades.

HTML5 - Programação Gráfica e de Jogos

Um dos aspectos que mais vêm chamando a atenção de profissionais e iniciantes no mundo da computação, é a facilidade na qual o HTML5 permite a criação de aplicações gráficas, e até mesmo de jogos.

Em épocas passadas, precisaríamos criar aplicativos em PHP e JavaScript, mesmo para as coisas mais simples, ou usar torcer para o usuário ter instalado o Flash no browser e criar aplicações lá.

Porém, isso é coisa do passado, pois o HTML5 permite facilmente a criação de áreas para renderizar aplicações gráficas, sendo a ferramenta mais comum para tais efeitos o Canvas.

Podemos ainda usar o XML de uma maneira bem fácil, através do SVG e criar gráficos estáticos e dinâmicos, de uma maneira bem mais simples que antes, e com resultados muito interessantes.

HTML5 - Simples, Direto e Robusto

Se leu nossos tutoriais inicias sobre HTML, viu que falamos do HTML 4.01, XML, XHTML etc.
Ou seja, há muitas, muitas mudanças, diferenças e incompatibilidade.
Pois bem, o HTML5 veio para dar um basta nisso.

Um exemplo de simplicidade do HTML5, é o tipo de documento (doctype), onde no antigo HTML usávamos (que frequentemente mudava):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

E agora vamos usar somente:
<!DOCTYPE html>

E quando o HTML5 mudar, não vamos mudar esse doctype, já foi decidido que esse vai ser permanente. Ou seja, uma coisa a menos para se preocupar.

E no CSS, lembra como passávamos o endereço da folha estilos? Assim:
<link type="text/css" rel="stylesheet" href="estilo.css">

Agora fazemos simplesmente:
<link rel="stylesheet" href="estilo.css">

E a meta tag charset, que usávamos para escrever símbolos e caracteres especiais, como os de acentuação da língua portuguesa? Fazíamos:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

E agora fazer (pasmem), simplesmente:
<meta charset="utf-8">

Sabe quando escrevia uma tag errado, usava o valor de maneira errada ou esquecia alguma aspa e todo seu site ficava feio e desconfigurado?
Pois bem, o HTML5 está sendo feito de modo a ficar mais robusto, mais forte contra erros de codificação.

HTML5 - Padronização e Acolhimento

Uma outra importante missão do HTML5 é a padronização.
Como citamos no item passado, o HTML passou por mudanças drásticas no decorrer de seu uso e desenvolvimento.

Foi criado, inclusive, o XHTML na tentativa de organizar e padronizar mais o HTML, usando conceitos e ideias do XML. Mas no fim das contas, acabou por bagunçar mais um pouco o já tão movimentado meio de criação de sites.

O HTML5 vai tentar parar com essas bagunças e mudanças no modo de codificar e interpretar códigos. Sabe os códigos antigos, até da década de 90?
O HTML5 vai entender e mostrar eles, até mesmo coisas que estão em desuso, como frames.

Algumas coisas antigas não devem mais ser utilizadas (iremos falar sobre elas no decorrer do Curso de HTML5), mas não serão abandonadas pelo browser, só irão desencorajar seu uso.

Usou HTML 4.01 e quer usar alguns conceitos de XHTML?
Ok, o HTML5 irá acolher, entender e interpretar corretamente seu código. Mas evite de fazer isso no futuro.

E em vez de dividir entre HTML, XHTML, XML e diferentes versões de HTML, é aconselhável que usemos só o HTML5, para ser uma linguagem padrão, para evitar de termos que estudar tags e ferramentas diferentes.

Interessante, esse HTML5, não?
E estamos só conversando, demos apenas uma palhinha do que mudou e simplificou.
Ao longo de toda essa seção de tutoriais de HTML5, vamos aprender a criar coisas fantásticas com esta poderosa ferramenta, inclusive jogos e animações gráficas de uma maneira bem bacana.

8 comentários:

Guilherme Mariano disse...

Muito bom, deu uma bela esclarecida na dúvida que eu tinha sobre as diferenças que estão no HTML5. Parabéns.

denner disse...

Esclareceu bem, agora é estudar a linguagem e mãos a obra. Ainda estou usando coisas antigas, mas vou dar um jeito de estudar html5.

Anônimo disse...

Gostei muito da sua explicação, entendi perfeitamente e não me perdi nenhum momento no seu texto, muito bem feito. Obrigado

Anônimo disse...

Obrigado! !!

Surucuá disse...

Excelente artigo, como todos os outros publicados em seu site. Obrigado pelas informações!

Aprendiz disse...

Gostei muito do artigo e o método de explicação. Show de bola mesmo!

Rodrigo Macedo disse...

Obrigado pelo esclarecimento sobre HTML5. Realmente, o HTML evoluiu muito ao longo desses anos. É importante se manter atualizado para economizar esforço e também se manter adequado as tendências.

Marcos disse...

Excelente conteúdo, parabéns.

Tutoriais de HTML e CSS