Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Apresentação do HTML5

Apresentação do HTML5

O HTML tem bastante história e desde 1992 passou por várias versões e a linguagem evoluiu muito de lá pra cá. Vejamos nesse resumo as principais mudanças...

I am the future. I am the browser. ;)

Helena Lacerda

July 15, 2015
Tweet

More Decks by Helena Lacerda

Other Decks in Technology

Transcript

  1. A Evolução do HTML O HTML tem bastante história e

    desde 1992 passou por várias versões e a linguagem evoluiu muito de lá pra cá. Vejamos nesse resumo as principais mudanças: • Em 1992, a W3C, de Tim Berners-Lee, lança o HTML com apenas algumas marcações de texto e link; • Em 1993 apareceram marcações de tabelas, formulários e alguns estilos para definir a aparência; • Em 1994 é lançado o HTML v2.0 com algumas de suas características padronizadas; • Em 1996 foi lançado o CSS1 para formatar todos os estilos visuais da página separado do documento HTML; • Em 1999 é lançado o HTML v4.01; • Em 2000 o HTML evolui para (X)HTML, unindo documentos XML com HTML; • Em 2008 começa a documentação do HTML 5, ao qual está evoluindo e é a versão atual.
  2. A estrutura do HTML5 O HTML5 foi criado exatamente para

    dar significado semântico às páginas web, além de padronizar e facilitar o entendimento das sessões de um site pelos navegadores. A quinta versão do HTML possui uma estrutura mais objetiva e de fácil entendimento pelos navegadores. Cada “parte” ou “sessão” de um site deve ter um significado de acordo com suas tags.
  3. A estrutura do HTML5 <header> - Serve para marcar o

    cabeçalho do documento. Dentro da header devem conter por exemplo, elementos como o logo do site e o menu principal. <nav> - Essa tag serve para identificar o menu principal do site, ou seja, o menu de navegação. Ele pode estar dentro da tag header, pois geralmente se encontra no topo da página. <section> - A section serve para separar as sessões de uma página e para identificar abordagens diferentes de uma página. <article> - Serve para identificar as chamadas que estão dentro de uma section. As chamadas principais da home por exemplo, podem ser alocados cada uma delas dentro da tag article. <main> - Essa é uma tag recente criada pela W3C. Ela pode ser usada para identificar o conteúdo principal da página. Por exemplo, o conteúdo de um artigo pode estar dentro da tag main.
  4. A estrutura do HTML5 <figure> - Serve para inserirmos as

    imagens da página. Com essa tag, os motores de renderização podem entender melhor a imagem e do que ela trata. <aside> - Essa tag é usada para a identificação de um conteúdo secundário que não seja parte da sessão principal do site. Ela é bastante usada como uma sidebar, alocadas em uma coluna esquerda ou direita de uma página. <footer> - Usada para identificar o rodapé do site. <audio> – É uma maneira simples e eficiente de inserirmos um arquivo de áudio na página. <video> – É usada para inserirmos arquivos de vídeo na página. Existem muitos atributos que complementam essa tag, como inserir legenda por exemplo. Essas tags mostram apenas a estrutura básica do HTML5, mas existem muitas outras. Muitas dessas tags podem ser completadas com outros atributos que irão ajudar ainda mais na identificação dos elementos do site por motores dos browsers.
  5. HTML5 é bom para o SEO? O HTML 5 já

    é bastante usado pelos desenvolvedores e está cada vez mais tomando forma. Se for usar CSS3, tome cuidado em não extrapolar, pois muitos de seus seletores ainda não são identificados pelo Internet Explorer em versões mais antigas. Por outro lado, o HTML5 pode fazer uma verdadeira limpeza no código do seu site, deixando ele mais rápido de carregar e ganhando assim performance. Sabemos que a velocidade de carregamento de uma página é um fator considerável para o Google, por tanto, uma vez que seu site tem o código limpo e bem escrito, podemos considerar que isso possa ser um fator indireto para um bom ranqueamento.
  6. Meu site precisa estar em HTML5? O HTML 5 já

    é muito usado e será cada vez mais usado. É recomendável deixar seu site em HTML5 pelo ganho de performance e pela tendência do mercado, visto a evolução da linguagem. Os navegadores estão se preparando cada vez mais para conseguir entender melhor cada parte do seu site e de forma semântica, identificar cada elemento da página. Mais do que o HTML5 evoluir ou surgirem outras versões, o Google mostra que está dando muita importância à semântica, tanto no sentido de estrutura do site quanto ao seu campo semântico, por isso, é importante já fazer uso do HTML5 e seguir essa tendência mundial, procurando sempre atualizar-se na criação de novas tags e elementos.