Vantagem HTML5 Vs XHTMLO Html5 oferece uma vantagem muito importante sobre o xhtml tradicional: possui tags para definir uma estrutura semântica.
Chamamos esse código html de html semântico onde a estrutura faz sentido para os motores de busca e, portanto, serve para o posicionamento de SEO. Trata-se de cada mecanismo de busca ser capaz de entender o que é cada parte de uma página web, mesmo removendo todo o conteúdo.
O XHTML não possui tags que permitem definir grupos ou blocos de elementos com sentido semântico.
O HTML5 resolve este problema oferecendo elementos e tags que permitem definir a semântica da página web, alguns deles são headeR, footer, nav, hgroup, section e article, entre outros.
A seguir, definiremos o mais importante em um sentido semântico:
- cabeçalho: Defina o bloco de cabeçalho da página da web e inclua o conteúdo do cabeçalho.
- nav: define um bloco que representa um menu, portanto os motores de busca ao encontrarem esta tag sabem que é a estrutura de navegação.
- hgroup: definir e agrupar títulos e, assim, dar importância diferente a cada título.
- seção e artigo: Os elementos anteriores que definem div> layers e são substituídos pelas tags de seção e artigo, que têm um sentido mais semântico ao definir seções e artigos dentro das seções.
- a parte, de lado: define e agrupa os elementos tangenciais da página da web. Ou seja, o conteúdo que não é o principal, como as colunas laterais ou a barra lateral da web
- rodapé: define e agrupa elementos no rodapé da página da web.
O uso de HTML5 não implica que o XHTML não seja mais usado, eles ainda são muito bons em organizar a estrutura e agrupar elementos da página da web ou invocar Jquery, lembre-se que HTML5 serve para dar sentido semântico, mas dentro do bloco você pode continuar para usar qualquer outra tag XHTML. Vamos ver um exemplo abaixo
Subtítulo
logotipo da web
Podemos ver que com as camadas foi definida a estrutura e dentro do cabeçalho do cabeçalho foi definido um hgroup para agrupar os títulos, bem como uma camada que contém o logotipo.
Assim, as camadas XHTML nos permitem definir a estrutura da página web para ter uma melhor organização para o programador, então XHTML nos ajuda a definir blocos significativos para a estrutura e HTML5 nos permite criar blocos significativos para buscadores e SEO. Como a tag de seção é usada em HTML5 para SEO.
Usar a tag de seção é muito semelhante a usar uma camada div, com a diferença de que a seção fornece o sentido semântico e todos os elementos incluídos na seção estão relacionados à semântica da web. É importante não usar a seção para agrupar elementos em qualquer bloco porque precisamos ter elementos sem sentido agrupados para atribuir estilos CSS ou algum efeito de programação.
Se o motivo da criação de um bloco é aplicar CSS ou usá-lo a partir de um código com um script, seria melhor não usar HTML5, pois o bloco não possui conteúdo semântico. Neste caso, devemos criar um bloco com a camada div de xhtml. Como visto no exemplo acima, o logotipo não faz sentido para usar HTML5, pois CSS é usado para exibir a imagem.
Camada ou seção DIVUma maneira de pensar sobre a relevância de cada bloco para determinar se é uma camada div ou uma seção, se eu sou o visitante da página da Web. Esse bloco me fornece informações úteis? Se a resposta for sim, será uma seção, senão uma camada.
Quando usamos o elemento do artigo, estamos definindo um bloco que tem sentido semântico e conteúdo que os motores de busca podem rastrear. A tag do artigo não se refere necessariamente a uma nota de texto, pode ser um produto, imagens ou um formulário.
Vamos ver um exemplo simples de uma página da web e seu código em HTML5:
Honda Civic
Como no artigo podemos colocar camadas ou parágrafos ou outros elementos xhtml em alguns casos o conteúdo da web pode ter apenas um artigo e no caso de a página ter listas ou catálogos como no caso anterior de Autos Online podemos ter um artigo por cada produto mostrado e também seu próprio cabeçalho para dar mais relevância aos títulos.
Também podemos aplicar estilos css a elementos HTML5, vamos ver um exemplo simples de um blog online com HTML5 e CSS3.
Título 1
Postado em 06 de dezembro de 2014 por Sergio - 3 comentários
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Ódio proin metus, ultricies eu pharetra dictum, ódio laoreet id …
Título 2
Postado em 1 de dezembro de 2014 por Sergio - 20 comentários
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Ódio proin metus, ultricies eu pharetra dictum, ódio laoreet id …
Isso mostra que eles não são apenas elementos semânticos, mas também podem fazer parte do design e da estrutura da página da web.
Este elemento serve para definir um bloco secundário dentro da estrutura da página web, é o conteúdo ou dado que queremos mostrar ao visitante, mas não é um conteúdo principal.
Podemos associar a tag ao lado com as colunas laterais ou comumente conhecida como Barra Lateral, que terá o conteúdo do menu de navegação secundário, links para outras páginas da web, formulários de login. Também podemos criar um aparte dentro de um artigo, o que significa que o que está dentro do aparte é um complemento ao conteúdo do artigo, mas não é uma parte direta desse conteúdo, por exemplo, se tivermos um artigo sobre algumas vendas e em um aparte publicamos estatísticas .
Finalmente, lembre-se do objetivo do Layout:
O que é Layout de uma página da web?Layout de uma página web é trazer o design gráfico para o código html, css localizando cada elemento correspondente por meio de código na página web.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
