O padrão HTML5 foi finalizado e lançado em 2014, e é o que o HTML deveria ter sido quando a primeira versão foi lançada há muitos anos. O HTML 2.0 foi o primeiro 'padrão' verdadeiro, publicado em 1995. Dois anos depois, o HTML 3 foi publicado. Mais dois anos depois, o HTML 4.01 foi introduzido e tem sido o cavalo de trabalho da internet desde então.
O primeiro 'rascunho de trabalho' do HTML5 foi introduzido em 2008, com um suporte surpreendentemente amplo para o navegador. O HTML5 que conhecemos hoje é muito diferente do HTML do passado, e aqui vamos discutir exatamente o que o padrão mais recente mudou com seu lançamento. Desde que o HTML5 foi lançado, ele foi amplamente aceito e agora todos os seus recursos são suportados pelos principais navegadores. Ainda existem alguns problemas aqui e ali, mas o HTML5 geral assimilou-se bem à experiência on-line moderna.
Como desenvolvedor web, você pode ser um profissional antigo que domina os padrões mais antigos ou um novato assistindo curiosamente o desenvolvimento de novos padrões à margem. De qualquer forma, você deve começar a fazer a transição para o HTML5.
Infográfico HTML vs HTML5
O primeiro passo para fazer a transição para HTML5 ou para aprender é entender a diferença entre o padrão mais antigo e o mais recente. Aqui estão algumas diferenças importantes entre HTML e HTML5:
-
HTML5 é uma linguagem viva
HTML5 é uma linguagem viva, um trabalho em andamento. É incrível ver o que o HTML5 pode fazer, mas também é importante saber que o HTML5 não é uma versão totalmente padronizada como o HTML4, com mais de dez anos de idade e um padrão definido, imutável.
Se você está entrando no HTML5, precisará fazer algumas atualizações. Atributos e elementos são adicionados e modificados regularmente a cada ano. Isso também depende de quanto você usa elementos ricos, mas é definitivamente um dos riscos envolvidos ao usar uma linguagem fluida e variável como HTML5.
-
HTML5 é mais simples
Embora o HTML5 tenha riscos como atualizações constantes, geralmente é fácil acompanhar as alterações e atualizações devido à sintaxe mais simples em comparação ao HTML4. Por exemplo, você tem uma declaração muito simples no início da página para defini-la como uma página HTML5:
A declaração Doctype simples é uma das simplificações feitas na sintaxe HTML, compatível com todas as versões do HTML4 e até o XHTML1. No entanto, o HTML5 não é compatível com o SGML.
Cursos recomendados
- Treinamento gratuito sobre programação em Python
- Curso de Certificação de Teste de Software Livre
- Cursos de programação Java gratuitos
- Curso PERL completo
-
O novo elemento
O HTML5 vem com vários elementos novos e elimina vários outros (que abordaremos daqui a pouco), mas um de seus principais elementos adicionados é o que impactou enormemente o uso do Adobe Flash em sites. Embora o Flash ainda esteja sendo usado por vários sites, o HTML5 foi adotado por muitas pessoas, e muitas pessoas pensam que o Flash ficará obsoleto. Somente o tempo decidirá isso; até então, o elemento em cascata do HTML5 provou ser uma boa alternativa ao Flash.
O elemento pode ser usado para desenhar gráficos com várias formas e cores via script, geralmente JavaScript. O elemento é simplesmente um contêiner para os gráficos; você precisa usar um script para definir os gráficos. Por padrão, uma tela é uma área retangular sem conteúdo ou bordas. O mercado é assim:
É importante especificar um atributo de ID, além de largura e altura para definir o tamanho da tela. Você pode adicionar um atributo de estilo para definir bordas.
Você também pode usar JavaScript, como no exemplo a seguir:
var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");
ctx.fillStyle = "# FF0000";
ctx.fillRect (0, 0, 150, 75);
-
O novo e Elements
Outra grande adição que o HTML5 vem são os novos e os elementos, indicando uma nova anatomia da web. Com essas novas tags, não é mais necessário identificar os dois elementos com uma tag.
As especificações definem o elemento do cabeçalho como representando um grupo de auxílios 'de navegação' ou 'introdutórios'. Como tal, o elemento pode ser usado para definir uma introdução a uma seção de uma página ou à própria página inteira. Aqui está um trecho de código que usa o elemento de cabeçalho.
Título
Por autor arquivado na Web 2.0
Corpo do texto
As especificações do HTML5 se referem ao elemento foot como representando 'um rodapé para o conteúdo de seção do ancestral mais próximo ou o elemento raiz de seção' e geralmente contêm informações sobre a seção, como o nome do autor, dados de direitos autorais, links para documentos e assim por diante.
Logicamente, o rodapé é colocado na parte inferior da página da web. Mas também pode ser colocado no final de uma seção da página. Aqui está um exemplo de codificação que usa o elemento rodapé:
Título do conteúdo
Por autor arquivado na Web 2.0
Corpo do texto.
Tags: Prompt de Comando, Bússola, CSS, Sass, Terminal
10 curtidas
Aqui, o rodapé contém tags de postagem e a postagem 'Curtir do Facebook'.
-
Os elementos e
Agora, se você seguisse os exemplos acima, teria notado mais alguns elementos novos, como o. Esse elemento, junto com o elemento, permite marcar seções específicas do seu layout e são extremamente benéficos para a otimização do mecanismo de pesquisa. O elemento article é especificado como representando um componente independente de uma página da web para ser reutilizável ou distribuível independentemente. Pode ser um jornal, post de fórum, artigo de revista, entrada de blog ou qualquer outra coisa.
O elemento article geralmente tem seu próprio cabeçalho em um elemento de cabeçalho e talvez até um rodapé, como você viu no exemplo acima. Você pode simplesmente pensar no elemento como uma entrada de blog ou um conteúdo independente; a parte complicada é identificar o que é independente. Simplificando, um conteúdo independente é aquele que faz sentido por si só.
Uma boa maneira de saber se um conteúdo é independente é perguntar se faz sentido em um feed RSS. Os artigos do blog e as páginas estáticas fazem sentido, e alguns sites têm feeds de comentários. Mas um parágrafo no artigo não faria nenhum sentido separado do restante do conteúdo. Aqui está um trecho de código com rodapé e tags de publicação.
Título do conteúdo
Publicado em: 2016-02-24
Corpo do texto
Licença Creative Commons Atribuição-CompartilhaIgual
O elemento de seção, de acordo com as especificações do W3C, representando uma 'seção genérica' de um aplicativo ou documento. Pode ser confundido com a tag, então vamos esclarecer a confusão agora. A tag de seção é usada quando o conteúdo contido nela deve ser agrupado separadamente do restante da página com um único tema e quando deve ser visto como uma entrada no esboço da página. O elemento div, no entanto, é especificado como um 'contêiner genérico', o que significa que não é separado da página principal, além de seus próprios atributos de título, idioma e classe.
-
Novo e Elementos
Os novos e elementos do HTML5 fazem parte das especificações dos Elementos Interativos, mas estão entre os elementos menos comentados pelos desenvolvedores. Dado o fato de a web ter se transformado em mais páginas e documentos vinculados, esses elementos são uma adição bem-vinda para maior interatividade da web.
O elemento não deve ser confundido com o elemento, que é definido como uma tag de navegação HTML que representa o bloco de navegação da página. Ele normalmente contém links para os usuários percorrerem seções dentro da página ou para outra página. Por outro lado, a tag de menu representa comandos de menu para simplificar aplicativos de desktop e móveis. Aqui está um exemplo do elemento em ação:
Olá Mundo
Enquanto isso, o elemento é outra maneira de organizar imagens e texto. É usado junto com o elemento para marcar ilustrações, diagramas e fotos. A seguir, é apresentado um trecho de código curto que apresenta os dois elementos em ação.
-
Novo e Elementos
Estas são duas principais adições ao padrão HTML5. A tag de áudio, como a tag de vídeo, permite que os desenvolvedores incorporem música e áudio em seus sites. Diferente do padrão anterior, você não está limitado a adicionar músicas midi, embora ainda existam algumas limitações no tipo de arquivo usado. A maioria dos navegadores relacionados ao Webkit suporta arquivos MP3 comuns, mas outros apenas o formato OGG. A boa notícia é que existem muitos conversores de arquivos e você pode simplesmente fornecer duas versões do arquivo de áudio; a versão correta será escolhida automaticamente.
Você pode usar a tag de áudio como qualquer outro elemento. Aqui está um exemplo de trecho:
A tag de áudio também possui vários atributos para controles adicionais, incluindo atributos de eventos, e incluem eventos de janela, eventos de formulário, eventos de mídia e eventos de mouse. O elemento de vídeo também possui vários atributos de conteúdo, incluindo SRC, atributos globais, loop, controle, pré-carregamento e pôster. Os atributos SRC, loop, reprodução automática e controles são bastante auto-explicativos e o mesmo para todos os elementos de mídia, enquanto os atributos globais são comuns para todos os elementos. Eles incluem dir, oculto, menu de contexto e muito mais.
Existem alguns outros atributos e elementos de multimídia que acompanham o HTML5, como o elemento track que fornece faixas de texto para o elemento video.
-
Novos formulários
Agora o HTML5 vem com forma e elementos. Se você não planeja usar muitas tabelas na página, também pode remover o atributo e observar as alterações feitas antes de prosseguir.
-
Não há mais elementos
Isso significa que todos os atributos que permitem que os desenvolvedores criem uma tabela colorida perfeitamente definida, como a borda, bgcolor, alinhamento, altura, regras e muito mais. Todos esses atributos são substituídos pelo CSS.
-
Não mais, e
Isso é ótimo para os desenvolvedores que trabalharam nos primeiros dias do HTML. Os atributos de conjunto de quadros, quadro e noframes foram removidos por completo, juntamente com outros como piscar de olhos, base de referência e muito mais. Você precisará gerenciar sem usar tabelas para o layout. As tabelas ainda fazem parte do HTML5, mas não se destinam mais a pixels. As especificações dizem que as tabelas não devem ser usadas para auxiliar no layout e para controlar o layout da página.
Conclusão
Como você pode ver claramente, há muitas alterações no HTML5 e você precisa usá-lo com cuidado e cautela. Você também precisa atualizar seu conhecimento sobre o idioma, pois ele muda com o tempo e recebe mais atualizações. Você precisa interromper o uso de elementos que o HTML5 removeu de si mesmo e usar os novos elementos do HTML5 que permanecerão definitivamente, como as tags de cabeçalho ou rodapé.
O que você viu acima é apenas a versão simplificada de quantas alterações o HTML5 fez com seu lançamento. Mas sejamos honestos aqui; não há nada simples ou lento na maneira como o HTML5 está sendo adotado, e o novo padrão adiciona muitos recursos que são cruciais para uma experiência moderna do usuário. Você precisa acompanhar a nova linguagem e também aprender um pouco de CSS, que tem um papel maior do que antes.
O lado bom dessas mudanças é que, mesmo sendo grandes, elas são para melhor e isso é entendido por todos os envolvidos aqui. Os navegadores serão mais poderosos à medida que avançam para a nuvem, com a capacidade de lidar com mais sozinhos. Com coisas como o Ajax, com incorporação de vídeo e áudio e assim por diante, será muito mais fácil codificar de maneira simples e permitir que o navegador assuma o serviço pesado. Por exemplo, novos elementos de estrutura, como figura, rodapé, resumo e seção, são todos referidos à estrutura do documento e a renderização é deixada para o navegador.
Artigos relacionados:-
Aqui estão alguns artigos que ajudarão você a obter mais detalhes sobre HTML vs HTML5. Basta acessar o link.
- HTML e XML
- As 9 principais diferenças entre HTML5 e Flash (com infográficos)
- HTML vs XHTML
- HTML5 vs Flash
- Diferenças surpreendentes HTML5 vs JavaScript
- 10 dicas úteis impressionantes sobre programação em Python (truques)