HTML5 e o poder das marcações semânticasHTML (Hypertext Markup Language) que atualmente está na sua versão 5 é uma linguagem de marcação sendo umas das tecnologias bases para o funcionamento da internet. Documentos HTML são interpretados através de um navegador web.

O HTML foi criado em meados de 1990 e teve a sua versão atual (HTML5) implementada em 2014 com o HTML5.2 sendo lançado em 2017. Com a o advento das páginas de internet e websites o HTML teve participação fundamental no que conhecemos hoje como internet.

Em seus primórdios o HTML servia unicamente para marcação e estruturação das páginas web, com recursos limitados e falta de suporte a funções que hoje em dia são nativas da linguagem, exemplo disso: Aplicação multimídias era feitas através de plugins.

Tecnologias como Flash, Silverligh e JavaFX passaram a crescer junto com o  HTML a partir da eliminação de plugins.

O HTML5

O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação do HTML5 e no XHTML, da mesma forma eles também definem APIs que formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.

Em particular, HTML5 adiciona várias novas funções sintáticas. Elas incluem as tags de <video>, <audio>, <header> e elementos <canvas>, assim como a integração de conteúdos SVG que substituem o uso de tags<object> genéricas. Estas funções são projetadas para tornar mais fácil a inclusão e a manipulação de conteúdo gráfico e multimídia na web sem ter de recorrer a plugins proprietários e APIs. Outros novos elementos, como <section>, <article>, <header> e <nav>, são projetados para enriquecer o conteúdo semântico dos documentos. Novos atributos têm sido introduzidos com o mesmo propósito, enquanto alguns elementos e atributos têm sido simultaneamente removidos.

Tudo foi mantido no HTML5?

Alguns elementos, como <a>, <cite> e <menu> têm sido mudados, redefinidos ou padronizados. As APIs e os modelos de objetos de documentos (DOM) não são mais pensamentos retrógrados, mas são partes fundamentais da especificação do HTML5. HTML5 também define com algum detalhe o processamento necessário para que erros de sintaxe de documentos inválidos sejam tratados uniformemente por todos os browsers e outros agentes de usuários em conformidade com o HTML5.

Iniciando a Marcação do HTML

As marcações do HTML5 devem ser observadas com atenção, pois algumas tags tem valor semântico para os buscadores e navegadores. Podendo algumas dessas tags formar “nós” que são espécies de seções de conteúdos semânticos na página. Sabendo disso é de extrema importância o desenvolvedor aplicar bem essas novas tags, pois elas tem impacto direto na performance do SEO.

Para que o navegador possa interpretar que o documento se trata da versão 5 do html é necessário iniciar o documento com a seguinte marcação: <!DOCTYPE html>. Isso fará com que o documento seja interpretado como HTML5, veja a seguir o exemplo de uma estrutura básica do HTML5:

E o que são tags Semânticas?

Como já dito anteriormente a função do HTML é indicar que tipo de informação a página está exibindo. Quando lemos um livro, conseguimos entender e diferenciar um título de um parágrafo. Basta percebermos a quantidade de letra, tamanho da fonte, cor etc. No código isso é diferente. Robôs de busca e outros user-agents não conseguem diferenciar tais detalhes. Por isso, cabe ao desenvolvedor marcar a informação para que elas possam ser diferenciadas por diversos dispositivos.

As Novidades Semânticas

Com as versões anteriores do HTML nós conseguimos marcar diversos elementos do layout, estruturando a página de forma que as informações ficassem em suas áreas específicas. Conseguíamos diferenciar por exemplo, um parágrafo de um título. Mas não conseguíamos diferenciar o rodapé do cabeçalho. Essa diferenciação era apenas percebida visualmente pelo layout pronto ou pela posição dos elementos na estrutura do HTML. Entretanto, não havia maneira de detectar automaticamente estes elementos já que as tags utilizada para ambos poderiam ser iguais e não havia padrão para nomenclatura de IDs e Classes.

O HTML5 trouxe uma série de elementos que nos ajudam a definir setores principais no documento HTML. Com a ajuda destes elementos, podemos por exemplo diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho. Conseguimos seccionar a área de conteúdo indicando onde exatamente é o texto do artigo.

Estas mudanças simplificam o trabalho de sistemas como os dos buscadores. Com o HTML5 os buscadores conseguem vasculhar o código de maneira mais eficaz. Procurando e guardando informações mais exatas e levando menos tempo para estocar essa informação.

Segue a lista com todas as funções das novas tags semânticas do HTML5:

<article> Este é um elemento autocontido. Pode ser um post, um artigo entre outros!
<aside> Este elemento indica um seção do documento com conteúdo relacionado. Pode ser uma sidebar!
<footer> Este elemento representa um rodapé para o elemento pai, ou mais próximo a ele.
<header> Este é um elemento de cabeçalho. Pode ser utilizado para logo, navegação, pesquisa e outros.
<nav> Este elemento indica uma navegação. Pode ser utilizado para apontar os principais blocos de navegação do site!
<section> Este elemento representa uma seção genérica de conteúdo do site. Realizando um agrupamento temático.

Mas isso é tudo que o HTML5 pode oferecer?

Definitivamente não, essa foi apenas uma abordagem básica dos recursos semânticos da linguagem, pois a mesma ainda fornece muitas outras novas funções como: inputs, metatags e outros elementos que fazem do HTML5 uma poderosa e indispensável linguagem para a internet.

Então por enquanto é isso, em uma outra oportunidade falaremos novamente sobre desenvolvimento web e outros assuntos pertinentes a tecnologia, até mais…

Veja mais artigos em nosso Blog.

 

Referências: https://pt.wikipedia.org/wiki/HTML5

Desenvolvedor Web Full-Stack há 3 anos, tendo como foco o desenvolvimento com PHP. Co-Founder da Athomus Tecnologia.

Uma resposta para “HTML5 e o poder das marcações semânticas”

Comentários

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *