Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 01/11/2019

O que é o HTML5?

O HTML5 é uma versão atualizada do HTML4.
Em parceria W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology Working Group), o HTML5 é o novo padrão para a estruturação e apresentação de conteúdo na internet.

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

Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.

O HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor forma possível.
O HTML5 permite por meio de suas APIs a manipulação das características destes elementos, de forma que o website continue leve e funcional.

O HTML5 também cria novas tags e modifica a função de outras.
As versões mais antigas do HTML não continham um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc.

Não havia uma maneira de capturar as informações localizadas nos rodapés de forma automática. Veja abaixo modelo:

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>titulo</title>
</head>
<body>

</body>
</html>


(Doctype) - <!doctype html> O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
Indica para o navegador e para outros meios qual a especificação de código utilizar.
O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

O elemento HTML - <html lang="pt-BR"> O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante.
O elemento principal dessa grande árvore é sempre a tag HTML.
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.

HEAD - <head> A Tag HEAD é onde fica toda a parte inteligente da página.
No HEAD ficam os metadados.
Metadados são informações sobre a página e o conteúdo ali publicado.

Metatag Charset - <meta charset="utf-8"> No nosso exemplo há uma metatag responsável por chavear qual tabela de caracteres a página está utilizando.

Tag LINK Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
No nosso exemplo há uma tag LINK que importa o CSS para nossa página: <link rel="stylesheet" type="text/css" href="estilo.css"> O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.

Há outros valores para o atributo REL, como por exemplo o ALTERNATE: <link rel="alternate" type="application/atom+xml" title="feed" href="/feed/"> Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.

No HTML5 há outros links relativos que você pode inserir como o rel=”archives” que indica uma referência a uma coleção de material histórico da página.
Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.

Inclusão dos novos elementos de conteúdo específico.
<article> Define um artigo, postagem em um blog ou em um fórum.
<aside> Define o conteúdo ao redor.
<figure> Para agrupamento de uma sessão de conteúdo stand-alone.
<figcaption> Legenda para um elemento figura.
<footer> Define o rodapé de um documento.
<header> Define um cabeçalho de uma página..
<hgroup> Para uma sessão de cabeçalhos usando h1 para h6.
<mark> Define textos que são destaques.
<meter> Para uma medição. Obs. Deve-se conhecer o valor máximo e mínimo.
<nav> Define links de navegação (menu).
<progress> Para mostrar o progresso de uma ação.
<section> Define uma seção do conteúdo como cabeçalhos, rodapés, etc.
<time> Para definir um tempo e/ou data.
<video> Define um conteúdo de vídeo.
<wbr> Quebra de linha.


Aguardem que logo postaremos mais exemplos dos novos recursos HTML.
Bons estudos.

Fonte: Redação

Comente esta matéria:


Compartilhe esta matéria




Veja Também