Tags Html5 Comentadas

por **Admin** Dom Fev 15, 2015 3:39 pm

O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira.
Ex:
<tag>Conteúdo da tag</tag>

Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:

</tag>

Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.

<tag>
<outraTag>texto</outraTag>
</tag>

Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.

<img src="caminhoImg.jpg" />

HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu fim. Logo deve ser aberta no início do documento e fechado no seu final.

HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.

BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar visíveis ao usuários quando a página for renderizada no navegador.
Somente com essas três tags já podemos ter uma estrutura HTML básica. Segue um exemplo.

TITLE – <title>Sou o título da página</title>
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)

LINK – <link href="" type="" media="" rel="" />
Geralmente usado para selecionar arquivo externo no HTML.

<h1></h1>– O H1 é utilizado para marcar um título, possuindo diferentes tamanhos com tags diferentes: <h1></h1> <h2></h2> … <h6></h6>.

<p></p>– O P é utilizado para definir um parágrafo.

<Strong></Strong>– O STRONG é utilizado para deixar um texto em negrito.

<u></u>– A tag U é usada para sublinhar um termo.

<br />– A tag BR é utilizada para definir uma quebra de linha.

<ul></ul> – <ol></ol> – <li></li>– Os elementos UL e OL são usados para iniciar uma lista, sendo o <ul> para uma sem ordenação numérica e o <ol> para uma com ordenação numérica. Os elementos dentro dessa lista devem ser marcados com a tag LI.
Ex:

<ul>
<li>Sou um elemento de uma lista</li>
<li>Sou outro elemento dentro da lista</li>
</ul>

<img src="imagem.jpg" width="50" height="50" alt="Descrição da imagem" /> , renderiza uma imagem no site.

<div></div>– O DIV é uma tag de bloco, usado para agrupar elementos semelhantes, organização.

<table></table> – <td></td> – <tr></tr> – A tag TABLE é usada para dermacar uma tabela. As linhas são marcadas com a tag TR enquanto as colunas ficam com a tag TD. É possível agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan="2"></td> significa que aquela coluna vai ocupar o espaço de duas colunas.
Ex: Tabela 2×2

<table>
<tr>
<td>Primeira coluna da primeira linha</td>
<td>Segunda coluna da primeira linha</td>
</tr>
<tr>
<td>Primeira coluna da segunda linha</td>
<td>Segunda coluna da segunda linha</td>
</tr>
</table>

<label></label>– A tag LABEL permite que você atribua uma legenda a um campo do seu formulário.

<header></header>– A tag HEADER serve para limitar o cabeçalho da sua página. Ele foi criado com a intenção de simplificar o famoso <div id="cabecalho"> / <div id="header">. Cuidado para não confundi-lo com a tag HEAD. O HEADER deve ser utilizado dentro do BODY como auxiliar semântico, enquanto o HEAD fica dentro da tag HTML e trás informações somente visíveis para o navegador.

<footer></footer>– O FOOTER assim como o HEADER serve para auxiliar na formatação da página e veio para substituir a famoso <div id="rodapé">/<div id="footer">.

<aside></aside>– A tag ASIDE é utilizada para demarcar as regiões laterais das páginas que geralmente carregam elementos de navegação, ou informações auxiliares ao conteúdo principal.

<section></section> -A tag SECTION tem um funcionamento muito semelhante ao da DIV porém ela serve para demarca que um bloco de conteúdo possui uma relação mais próxima. Enquanto o DIV não carrega valor semântico algum.

<article></article>– A tag ARTICLE serve para definir o conteúdo principal de uma página.

<nav></nav>– A tag NAV é usada para indicar uma navegação. Ela deve ser usada para agrupar links de navegação.

ID's e CLASS

OsID'ssão atributos que podem ser atribuídos a qualquer tag presente no <body>. Com ele é possível identificar um elemento facilmente. Isso ajuda muito no desenvolvimento do Css e na programação do Javascript (falaremos adiante sobre isso). É importante ressaltar que o ID deve ser único, ou seja, só pode existir um por página.
Exemplos clássicos de ID's são para definir cabeçalhos, rodapés e blocos de conteúdo.
Ex:

<div id="cabeçalho"></div>
<img src="perfil.jpg" height="50" width="20" id="imagemPerfil" />
<span id="horario">12:30</span>

<script></script> Local onde você escreverá seus scripts em JavaScript ou PHP, criando interação com usuário no site.