HTML5 Introdução

Primeiramente vamos entender que o HTML é utilizado no Ambiente WEB e de acordo com o W3C (World Wide Web Consortium) a Web é baseada em 3 pilares: 

• Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URL (Uniform Resource Locator – Localizador Padrão de Recursos). 

• Um Protocolo de acesso para acessar estas fontes, o HTTP (HyperText Transfer Protocol - Protocolo de Transferência de Hipertexto.) 

• Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML(HyperText Markup Language - Linguagem de Marcação de Hipertexto).

Hypertexto

• HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web. 

• O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. 

Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. 

Eles não estão conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. 

A conexão feita em um hipertexto é algo previsto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.

O que é o HTML5? 

•O HTML5 é a nova versão do HTML4. 

•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. 

•Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível. 

•O HTML5 também cria novas tags e modifica a função de outras. As versões 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.

•O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas. 

•O HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização das novas características imediatamente.

ESTRUTURA BÁSICA, DOCTYPE E CHARSETS

Estrutura Básica

  

•A estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, há apenas uma exceção na escrita do Doctype. 

•Segue abaixo como a estrutura básica pode ser seguida:

O Doctype

•O Doctype deve ser a primeira linha de código do documento antes da tag HTML. 

•O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser. 

•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

•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 (navegadores) saibam qual a linguagem principal do documento. 

•Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

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

•No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres 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:

•O atributo rel=“stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.

ESTRUTURA BÁSICA

Note que no exemplo acima temos o uso das TAGS HTML - para identificar o documento que estamos criando,  HEAD- para criar um cabeçalho na página html, TITLE- para criar um título da página que estamos criando,  BODY- o corpo da página html  e H1- para inserir um título dentro do corpo da página.

TAG H

•Os elementos da categoria Heading definem uma seção de cabeçalhos.

•A tag que faz isso é o h (que é a letra inicial do inglês heading). Usamos a tag h com um número logo após, no qual determina a sua importância para o documento. Esse número vai de 1 a 6, sendo 1 o relativamente o mais importante e 6 o menos.

Veja abaixo as configurações existentes em cada caso:

Heading - hgroup

•Usamos o elemento "hgroup" para englobar uma ou mais tags de cabeçalho.

•Seu uso mais comum é, por exemplo, quando temos um título (geralmente em <h1>) e um subtítulo (em <h2>). 

•O "h", de "hgroup" é de headings, ou seja, está relacionado com as tags h1, h2, h3, h4, h5 e h6, devendo englobar somente estas tags.

Header

O elemento <header> representa um grupo de introdução ou elementos de navegação. 

O elemento <header> pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.

Veja abaixo a estrutura completa...

Parágrafo <p> </p>

•Define uma parte que deve ser exibido como um parágrafo.

Quebra de linha <br / >

•Define uma parte que deve ser exibido como um parágrafo.

Quebra de palavras <wbr />

• O elemento wbr é utilizado para marcar o local onde você quer que ocorra essa quebra de linha.

Hifenização condicional &shy;

•Define uma parte que deve ser exibido como um parágrafo.

Espaço em branco &nbsp;

•Para que possamos inserir mais de um espaço em sequência.

Símbolos especiais

•Inserção de símbolos especiais.

Pronto! Pronto!

Fonte: Me. José Roberto Lima