HTML5 sua semântica e a importância na web hoje Webgrad Designer Logomarca Webgrad Designer

HTML5 sua semântica e a importância na web hoje
HTML5 sua semântica e a importância na web hoje

Hoje vou falar sobre a nova versão do HTML que na minha opinião veio para acrescentar e simplificar a forma de implantação das marcações das páginas em nossos projetos, deixando-os mais organizados, legíveis e semânticos para que os mecanismos de buscas possam encontrar e classificar o conteúdo de nossos web sites de forma correta.

Pois para nós o mais importante na minha opinião e ver a satisfação de nossos clientes com um retorno rápido e eficaz de nosso trabalho.

Então vamos ao que interessa de uma forma simples e reduzida para um fácil entendimento.

A sigla HTML ( HyperText Markup Language) , significa linguagem de marcação de hipertexto. é uma linguagem para estruturação e apresentação de conteúdo para Internet , utilizada para produzir páginas na Web, e foi criada pelo físico britânico Tim Berners-Lee.

Estes documbanner2entos de marcação em HTML podem ser interpretados por qualquer navegadores da web, o código não e visível para usuários que não tenha um conhecimento na linguagem.

Hoje em dia a internet evoluiu muito e com ela sua principal e mais importante linguagem de marcação, acompanhou está evolução.

Com necessidades de aprimorar conteúdos mais interessantes para os usuários na questão de semântica e acessibilidade.

Chega a nós uma versão mais aprimorada o HTML ( HyperText Markup Language) em sua 5º Versão que nos traz novas funcionalidades que até então só podia ser implantadas com aplicações de outras tecnologias.banner1

O sonho de Tim Berners-Lee com uma internet semântica está mais perto de acontecer com a ajuda do HTML5.

Com esta nova versão do HTML5, chega um sistema de marcação ( TAGS ) mais eficaz e objetivo para facilitar a vida de programadores e usuários em seu entendimento, as novidade implantadas de um modo geral deixa com que a internet fique muito mais fácil e semântica de se navegar.

Está nova versão veio só para acrescentar, não para complicar sua vida pois documentos criados com a antiga versão pode ser usados ainda normalmente por todos os navegadores inclusive os mais atualizados.

Mais se você quer aprimorar seus conhecimentos e aplicações o jeito mais fácil e adaptar-se a está nova versão que nos traz inúmeras vantagens.

Algumas novidades do HTML5:


Começando pelo encurtamento do (DocType) que ficou muito mais reduzido além de facilitar a implantação para os programadores, melhorou na semática das aplicações.

Logo abaixo deixo um exemplo de como era o cabeçalho do documento e como ficou em HTML5.

Cabeçalho de uma página web em versões anteriores:

Código mais complicado e de difícil entendimento.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Título do documento</title>

</head>

<body>

Corpo do documento.

</body>

</html>

Em HTML5:

Código mais simplificado e semântico. Fazendo com que o navegador tenha a responsabilidade de buscar as definições da especificação .

<!DOCTYPE html>

<html lang=”pt-br”>

<head>

<meta charset=”utf-8″/>

<title>Título do documento</title>

</head>

<body>

Corpo do documento.

</body>

</html>

Estrutura de uma página usando a semântica de HTML5.

estrutura-html5

A seguir uma relação dos novos elementos com sua descrição:

  • Article : Especifica um artigo no documento.
  • Aside : Relaciona um conteúdo ao redor.
  • Bdi : Para texto que não esteja diretamente vinculado ao elemento pai.
  • Command : Um botão, RadioButton ou ChecjBox.
  • Details : tag pode ser usado para criar um widget interativo que o usuário pode abrir e fechar. Qualquer tipo de conteúdo pode ser colocado dentro.
  • Summary : Uma legenda ou resumo dentro do elemento Details.
  • Figure : para agrupamento de uma sessão de conteúdo stand-alone.
  • Figcaption : Legenda para um elemento Figure.
  • Footer : Para um rodapé de um documento ou sessão.
  • Header : Para uma introdução de um documento ou sessão.
  • Hgroup : para uma sessão de cabeçalho usando h1 até h6.
  • Mark : Para textos que são destaques.
  • Meter : para uma medição. Deve-se conhecer o valor máximo e minimo.
  • Nav : Para uma sessão de navegação (Menu).
  • Progress : Para mostrar o processo de uma execução.
  • Ruby : Para anotações Rubi.
  • Rt : Para explicar uma anotação Rubi.
  • Rp : Mostrar os navegadores que não suportam anotações Rubi.
  • Section : para uma sessão de um documento como capitulo, cabeçalho, rodapé etc… .
  • Time : Para definir um tempo e/ou data.
  • Wbr : Quebra de linha.

Controles de formulário :

  • Datalist : Umalista de opções de entrada.
  • Keygen : Gera chaves para autenticação de usuários.
  • Output : Para diferentes tipos de saídas, como a gerada por scripts.
  • Tel : Entrada de um número telefonico.
  • Search : entrada de campo de busca.
  • Url : Entrada de um endereço web (URL).
  • Email : Entrada de um ou mais endereços de e-mails.
  • Datetime : entrada de data e/ou hora.
  • Date : Entrada de data.
  • Month : Entrada de mês.
  • Week : Entrada de dia da semana.
  • Time : Entrada de hora.
  • Datetime-local : Entrada de data e hora local.
  • Number : Entrada de números.
  • Range : Entrada de uma faixa de valor.
  • Color : Entrada de cor Haxadecimal como #FFFFFF.
  • Placeholder : Especifica uma dica rápida que descreve o valor esperado em um campo de entrabanner3da.

Resumindo:

Está nova versão do HTML, veio para facilitar nossas vidas, pois além de novos recursos que permite uma melhor estrutura de documentos, nos libera de uso de plugins externos , com mais facilidade em agregar em nossos projetos imagens e vídeos de uma maneira mais fácil.

Com isso trazendo uma nova experiencia de semântica e acessibilidade para nossos usuário e dando um retorno mais rápido a nossos cliente.

Você gostaria de apreender ou se atualizar em HTML5 então assista este vídeo abaixo que deixo de dica para vocês.

Curso em Vídeo do professor Gustavo Guanabara excelentes cursos totalmente gratuitos vale apena.

Se você gostou então deixe um comentário e compartilhe com seus amigos usando os botões abaixo.

Programador TI, Web Designer desde 1996 trabalha em desenvolvimento de projetos Web , Freelancer e assessoria em marketing digital.

0 Comentários

Deixe o seu comentário!

Seu comentário é sempre bem vindo!

Comente, opine, se expresse! este espaço é seu!

Se quiser fazer contato por email, utilize o Formulário de contato.

Espero que tenha gostado do nosso site volte sempre!

Formulario de comentarios:

%d blogueiros gostam disto: