HTML - Conceitos básicos

Neste documento vamos falar sobre HTML como de desenvolvedores de sites. Assumimos que os documentos anteriores deste site já foram lidos.

O que é HTML?

1-Toda página web é exibida pelo seu browser que foi feito para entender um 'padrão' chamado de html.

HTML é uma linguagem de marcação, ou seja, ela indica o que deve ser exibido e a forma que deverá ser exibido. Trabalha tradicionamente como nós costumamos ler um documento, de cima para baixo e da direita para a esquerda.

Contudo, HTML é um arquivo puramente texto. Mas você sabe que na web tem mais que puramente texto.
Para exibir som, vídeo, imagens ( chamados de recursos de multimídia) o html apenas aponta para um recurso externo (normalmente um arquivo de imagem, som ou outro tipo) indicando a localização e o nome do recurso.

A parte do HTML que não é texto o HTML é enviada para o sistema operacional do seu micro se virar..se conseguir legal, se não conseguir, paciência, é o que tem pra hoje. Por metodologia, sempre que ocorrer um erro e for possível prosseguir o HTML vai prosseguir como se o erro não existisse, pelo menos no que é possível ignorar.

Chamamos a montagem da página HTML de 'renderização da página', ou seja, a exibição da página com a mistura do código html com os demais recursos dando uma página de acordo com o planejado.

Para facilitar as coisas o browser tem internamente a definição de como deve ser exibido cada elamento da página, um valor default para cada item necessário e fundamental para a sua perfeita visualização. Portanto ao escrever um código o browser interpreta e exibe a sua maneira. Se você não definiu nada o browser monta de acordo com seu default.

2-Tudo que você pode observar no seu browser foi o browser que desenhou ou renderizou de acordo com padrões predefinidos no browser (pelo HTML5, por exemplo) como uma cor de fundo ou a cor do texto. Se você não definiu ele usa um padrão default.

3-Você pode notar que tem certas coisas na página que NÃO são puramente texto e para apontar para esses recursos existe as tags. As tags são textos que o browser interpreta como comandos 'especiais' que apontam para recursos em arquivos fora da página html pura, como imagens, vídeos, etc. Portanto o browser 'desenhou' o elemento (que não era texto) através de uma indicação, em texto puro, do que deveria ser feito.

Citando o exemplo da tag imagem (que exibe uma imagem dentro de uma página html) ela é definida assim :
<img src="arquivoimg.jpg" alt="imagem1" />
onde o arquivo de imagem é o 'arquivoimg.jpg' é externo a página mas será exibido dentro dela, como se fizesse parte de seu conteúdo.

Digamos que ao usar uma tag a complexidade de exibir uma imagem ou um vídeo fica a cargo do browser ou do sistema operacional e o programador não precisa se preocupar com isso. Lógicamente o browser deve ser capaz de exibir o recurso senão ele simplesmente não será exibido.

Uma das coisas mais notáveis no html é incorporar coisas externas como se fossem parte da página. Veja o item a seguir.

4- Podemos dividir todo documento html em 2 partes : a que é puro texto e outra que são as tags que informam o que deve ser exibido e que não é texto .

5-Através das 'tags' e meta-dados o documento html é capaz de :
   5.1-Trazer dados de outros documentos-Como é o caso das folhas de estilos CSS e Scripts.
   5.2-Incorporar conteúdos de outra página como se fossem dela mesma, que é o caso de páginas javascript ou scripts externos a página.
   5.3-Incorporar ao documento recursos que não são puramente textos como imagens, vídeos.
   5.4-Estilizar a exibição de elementos colocado fundos, bordas, diferenciando dos demais textos da página aumentando a fonte das letras, a cor, o fundo. Este recurso não é bem HTML mas sim CSS mas não deixa de pertencer a página HTML.

6-HTML não é uma linguagem de programação e sim um linguagem de marcação, ou seja, definição dos componentes do documento/página web, quais são, em que posição e maneira devem ser exibidos, por exemplo.

7- Os navegadores não exibem as tags HTML, mas as usam seus conteúdos para obter recursos externos e para renderizar o conteúdo da página.

8-HTML é chamado também de Living Standard ou padrão vivo porque esta em constante desenvolvimento e ano após ano muito tem sido feito para melhorar o padrão seja em qual aspecto for. No mínimo de 3 em 3 anos tem surgido grandes mudanças no padrão.

Citando um exemplo, antigamente se você precisasse exibir um vídeo numa página HTML tinha que usar, por exemplo, um recurso externo como o Flash Player da Adobe. Sempre foi um problema porque se você não tivesse o flash player instalado na máquina e resolvesse não instalar a sua imagem não seria exibida. Hoje no HTML5 podemos exibir vídeos nativamente na maioria dos browsers atuais ( por isso eles ficaram mais pesados).

9-Se você pretende aprender HTML terá que aprender os seguintes tópicos:
9.1-As tags HTML. Não são muitas e é uma tarefa relativamente simples aprender.
9.2-Parâmetros das tags : Todas as tags tem parâmetros. Ao colocar um parâmetro se for pertinente a tag ele será aceito e se não for será gerado um erro na carga da página e o parâmetro será ignorado.

10-Toda tag tem 2 tipos de parâmetros:

10.1-Parâmetros em comuns a todas as tags.
Veja :Atributos ou parâmetros Globais

10.2-A grande maioria das tags tem parâmetos específicos. Por exemplo, numa tag input tipo texto o parametro value define o valor que já virá preenchido no campo ao carregar a página.

O aprendizado de parâmetros é bem mais complicado que o aprendizado das tags. Um detalhe importante de ser mencionado é que nem todos os browsers tratam igualmente esses parâmetros podendo ser até ignorados por alguns deles.
Com a utilização das tags você verá que tem parâmetros fundamentais que precisará memorizar para não ficar perdendo tempo pesquisando e outros que, como são pouco usados, se precisar, você procura em uma referência na Internet e deve encontrar rapidinho.

Como usar HTML?

Como foi dito acima, HTML é um documento puramente texto.
Abras o bloco de notas, copie o texto abaixo e salve.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Página Web Básica</title>
   </head>
   <body>
      Conteúdo da página
   </body>
</html>

Mude a extensão do arquivo (que normalmente é .txt) para .html.
Clique duas vezes nele e ele será aberto não pelo bloco de notas mas sim pelo browser porque a extensão .html esta associada ao browser.

Com esta página aberta bo browser aberto você pode notar:
1-No caption do form do Browser (faixa azul superior), vemos escrito 'Página Web Básica' como foi solicitado pela tag <title>
2-No corpo do documento só temos o texto 'Conteúdo da página' conforme foi definido na tag <body>
3-A tag meta charset="utf-8" é para informar que estamos usando o conjunto de caracteres UTF-8 para escrever seu conteúdo. Retire esta tag e verá que sua acentuação será toda bagunçada. UTF-8 é um conjunto de caracteres que abriga todos os idiomas do mundo mas infelizmente quando o windows ( ou coisa parecida ) foi feito só existia os EUA e não se pensava em um 'site mundial'.

Como o browser se vira para exibir a página corretamente com tantas definições ?

Pode parecer singelo e simples mas estes pricípios são de suma importância...o código você esta vendo acima mas o browser 'enxerga' o seguinte :

Como exibido na figura o browser monta a página na memória antes de exibir e estrutura os elementos hierarquicamente de maneira que um elemento exibido pode impactar noutro ou não. Ao definirmos uma característica num ponto do documento pode ser que os 'ramos' filhos da hierarquia sejam afetados por essa definição.

Você vai ver que a partir daqui a gente começa a encaixar os blocos onde são necessários.

Se queremos exibir coisas ao usuário colocamos essas 'coisas' no body.
Se desejamos alterar estilos (cores, formas etc.) podemos inserir um link para um arquivo CSS no header da página ou colocar esse 'estilo' diretamente no header da página.
Se precisamos fazer uma validação antes de enviar dados para o servidor podemos usar o JavaScript (uma linguagem Client-Side) colocando seu código no header da página para que pode criticar e emitir uma mensagem em caso de erro ou prosseguir enviando os dados para o servidor para serem processados.
O segredo é encaixar a coisa certa no lugar certo, não só em programação mas também no desenho, formato, cores etc. do documento.

HTML Avançado : Posicionamento das tags

No começo da Internet era apenas texto e o conteúdo era rederizado de cima para baixo e da esquerda para a direita.
Contudo, foram anexados elementos bem mais complexos que um texto e algumas de suas características precisam ser observadas para a correta exibição para que não ocorra, por exemplo, a sobreposição de dois elementos e que todos elementos sejam exibidos clara e distintamente. No entanto continuam sendo renderizados de cima para baixo e da esquerda para a direita mas agora não como simples caixas mas como caixas ou 'box'.

O parâmetro 'margin' foi inserido para que o elemento corrente não encostasse nos elementos adjacentes. Podemos definir as quatro margens (top-topo, bottom=inferior, left=esquerda, right=direita) igualmente ou individualmente. Se não definirmos a margem defaut é margin:0px portanto os elementos irão encostar um nos outros.

O parâmetro 'border' foi incluido para demarcar o total do espaço ocupado pelo elemento. É o elemento mais externo do objeto que podemos definir. Em algumas ocasiões a borda é interessante (como numa planilha) ou podemos desligar se ficar melhor assim. Diferente do elemento 'margin' as 4 bordas são tratadas igualmente, por exemplo, quando defino style="border:1px solid red vale para todas as bordas.

O parâmetro 'padding' ou preenchimento foi anexado ao escopo do box para deixar um espaço entre a imagem ou texto e a respectiva borda. Com isto um texto não chegaria a tocar na borda e podemos distanciar os elementos das bordas dando um efeito visual mais agradável.

Ex: span sem padding e span com padding de 10px

Renderização dos elementos - Empilhamento dos elementos

Quando lemos uma página lemos de cima para baixo e da esquerda para a direita. É assim que o browser renderiza seus elementos mas tem alguns detalhes a mais.

Para simplificar e tornar mais rápida a renderização do documento o default de renderização de todos as tags HTML é a posição estática (static), o que significa que os elementos não podem ser movidos ou deslocados e o browser cuida desse 'posicionamento' automaticamente ao montar a página e ao redimensionar a janela do browser.

Veremos em outros documentos que se for fundamental mudar a exibição normal de um elemento deve-se primeiramente setar a posição na CSS para relativa (relative), fixa (fixed), ou absoluta (absolute) e no JQuery ou JavaScript poderá alterar a posição.

Ainda quanto ao posicionamento das tags temos duas possibilidades: Block(em bloco) e Inline (em linha).

Tags tipo block ( em bloco )

As tags tipo bloco/block são feitos para serem exibidos em bloco, ou seja, ocupam de maneira exclusiva uma linha inteira .
Sendo assim, se na linha corrente já existe alguma coisa escrita à esquerda da linha corrente, o elemento em bloco será renderizado na linha seguinte logo abaixo, senão será renderizado na linha corrente.
O elemento em bloco ocupará a linha exclusivamente, ou seja, mesmo que sobre um espaço grande que coubesse o próximo elemento ele, irá renderizar o próximo elemento na linha seguinte logo abaixo.
Por isso eu disse, ocupa uma linha inteira de modo exclusivo, do começo ao fim.

Exemplo de tag p :
Tem um texto antes da tag p <p style="border:1px solid red">Texto dentro da tag P</p> e texto depois da tag p

Como o browser exibe:
Tem um texto antes da tag p

Texto dentro da tag P

e texto depois da tag p

Cito como exemplo a tag p que é do tipo bloco que, por natureza, designa um novo parágrafo e por isso, uma nova linha.
Portanto, ao renderizar um elemento tipo bloco na página o DOM verifica se já existe outro elemento renderizado anteriormente à esquerda na mesma linha e, se houver, este novo elemento tipo bloco será exibido na linha a seguir.
Sempre, após renderizar um elemento tipo bloco a exibição do próximo elemento será feito na linha a seguir, deixando o que resta à direita no parágrafo atual vazio, sem conteúdo mesmo que o próximo elemento coubesse nele.
A vantagem das tags tipo bloco é que como eles são únicos na linha elas podem ser dimensionadas livremente na página (largura e altura) porque não haverá ninguém concorrendo com seu espaço.

Uma vantagem das tags tipo bloco é que a formatação funciona, como largura(width) e altura(height).

Exemplo de tag p :
Tem um texto antes da tag p <p style="border:1px solid red;width:500px;">Texto dentro da tag P</p> e texto depois da tag p

Como o browser exibe:
Tem um texto antes da tag p

Texto dentro da tag P

e texto depois da tag p

As tags tipo bloco (block) são

		        <address>     <article>      <aside>         <blockquote>
		        <canvas>      <dd>           <div>           <dl>
		        <dt>          <fieldset>     <figcaption>    <figure>
		        <footer>      <form>         <h1>-<h6>       <header>
		        <hr>          <li>           <main>          <nav>
		        <noscript>    <ol>           <output>        <p>
		        <pre>         <section>      <table>         <tfoot>
		        <ul>          <video>

As tags HTML do tipo Em Linha ( inline )

As tags tipo inline são feitos para serem exibidos em linha, ou seja, um ao lado do outro ocupando estritamente o espaço que precisam.
Ao renderizar um elemento inline o browser verifica se ele cabe na linha corrente, como se fosse um texto. Se couber exibe nela mesma mas se não cabe será exibido na linha a seguir.

O grande mau deste tipo de elemento é que ele não pode ser dimensionado porque o browser cuida disso automaticamente. Portanto, altura, largura, posicionar a esquerda, direita não funcionam porque o browser aloca o espaço certinho para ele caber.

Exemplo de tag span :
Tem um texto antes da tag span <span style="border:1px solid red">Texto dentro da tag SPAN</span> e texto depois da tag span

Como o browser exibe:
Tem um texto antes da tag span Texto dentro da tag SPAN e texto depois da tag span

A desvantagem deste tipo de elemento ( em linha ) é que não é possível dimensionar os elementos no que tange a largura ou altura entre alguns aspectos porque a largura e altura depende de todos elemento da linha e se este parâmetro fosse obedecido teria que formatar os demais elementos na mesma linha o que não é possível pois ainda não foram renderizados.

Exemplo de tag span com width:
Tem um texto antes da tag span <span style="border:1px solid red;width:800px;">Texto dentro da tag SPAN</span> e texto depois da tag span

Como o browser exibe:
Tem um texto antes da tag span Texto dentro da tag SPAN e texto depois da tag span

Como você pode observar a tag span não ocupou 800 pixels. A largura e a altura ocupada pelo elemento é definida automaticamente pelo browser.

As tags tipo em linha são

			    <a>         <abbr>     <acronym> <b>
			    <bdo>       <big>      <br>      <button>
			    <cite>      <code>     <dfn>     <em>
			    <i>         <img>      <input>   <kbd>
			    <label>     <map>      <object>  <q>
			    <samp>      <script>   <select>  <small>
			    <span>      <strong>   <sub>     <sup>
			    <textarea>  <time>     <tt>      <var>

Tags do padrão HTML

Nesta seção estão listados os tipos de tags que um documento HTML pode conter.
É muito importante entender bem o funcionamento e definição de cada elemento, pois cada um tem uma semântica própria e deve ser utilizado desta maneira.
Utilizar a semântica correta não só auxilia para que crawlers de sites de busca identifiquem melhor o conteúdo do site como é essencial para leitores de tela, utilizados por pessoas com deficiência visual.

TAGS BÁSICOS e/ou FUNDAMENTAIS

<html> O elemento html é a raiz do documento.
Todos as outras tags devem estar dentro da tag html pois são filhas dela no DOM.
A tag HTML informa que foi usado o padrão HTML para descrever os elementos que compõe o documento.

<base> - O elemento base informa para o document a URL de base do site. Só pode haver um elemento base por documento HTML.

<body> Todos os elementos visíveis ao usuário estão nesta seção do documento.
É uma parte do documento HTML contém todos as tags que fazem parte do documento html.
Tudo que será renderizado é descrito dentro do body do documento.

TAGS DE METADADOS - ( Colocar no header )

<link> O elemento link cria uma ligação entro o documento atual e outros recursos externos.
Normalmente é utilizado para ligar uma folha de estilos CSS ou uma página de Códigos JavaScript externa.
Costumamos chamar a tag anchor de link mas são coisas diferentes, a anchor é uma tag que liga o o documento a uma região do documento atualou a um documento ou região de um documento externo. A tag link incorpora um documento interno como se fizesse parte integrante do documento html atual. Este documento externo linkado também é puro texto e pode ser uma folha de estilos ou scripts.

<meta> O elemento meta indica toda outra informação que não vai em uma das outras tags acima. O elemento meta mais famoso é a UTF-8 que permite qualquer idioma universal, inclusive o nosso.

<style> - O elemento style normalmente contém comandos de estilização de CSS.

<script> - O elemento script permite incluir scripts dentro do documento html. Normalmente esse elemento utiliza a linguagem JavaScript.

TAGS DE SEÇÕES DE CONTEÚDO - ( Colocar no body )

<address > - O elemento address indica informações de endereço. Se este elemento for filho de um article, indica endereço deste, se não, indica endereço do documento todo.
<article > - O elemento article indica uma composição de conteúdo individual. Pode ser um artigo de um blog, post de um fórum ou outro objeto de um conteúdo único.
<aside > - O elemento side representa uma porção de conteúdo posicionado lateralmente em relação ao resto. Normalmente é utilizado para menus, lista de artigos, anúncios e informações laterais.
<footer > - O elemento footer representa um rodapé de um documento. Normalmente vão informações de contato e links de outras seções do site.
<header > - O elemento header presenta um cabeçalho de um documento. Normalmente vão informações iniciais de um site, menus, a marca do site, pesquisa entre outros.
<h1 >, <h2 >, <h3 >, <h4 >, <h5 >, <h6 > - Tags de cabeçalho possuem 6 níveis, cada um possuindo prioridade sobre o anterior. É de extrema importância o uso correto, pois buscadores (como o Google) utilizam essas tags para identificar o conteúdo do site e seus sub itens.
<hgroup > - O elemento hgroup representa um grupo de cabeçalhos de uma seção, como um índice de sub seções.
<nav > - O elemento nav representa uma seção do document com uma lista de links para outros documentos. Também é importante para as os buscadores indexarem os conteúdos do site.

TAGS DE CONTEÚDOS EM TEXTO - ( Colocar no body )

<dd > - O elemento dd indica a descrição de um termo em uma lista de descrições. Precisa ser filho de um elemento dt.
<dl > - O elemento dl indica uma lista de descrições, é normalmente utilizado em glossários.
<dt > - O elemento dt indica um tempo de uma lista de descrições. É utilizado em conjunto com um dd.
<div > - O elemento div indica uma caixa de conteúdo genérica. Deve ser utilizado quando nenhuma outra tag específica, como article e aside, pode ser utilizada.
<figure > - O elemento figure representa uma figura e normalmente é utilizado em conjunto com o elemento figcaption. Ele indica uma image, figura, ilustração ou outro elemento gráfico em um documento.
<figcaption > - O elemento figcaption representa uma legenda de uma figura. Normalmente é utilizado em conjunto com o elemeto figure.
<hr > - O elemento hr representa uma quebra ou separação de parágrafos. Anteriormente ele representava uma linha horizontal, mas atualmente é utilizado de uma maneira semântica, para separar conteúdos.
<li > - O elemento li representa um item de uma lista de itens. É utilizado em conjunto com as tags ul e ol.
<main > - O elemento main representa o conteúdo principal de um documento. Deve ser utilizado para apresentar o principal conteúdo de um site ou aplicação. Os conteúdos dentro dele devem ser únicos, excluindo links para outras seções e menus de navegação.
<ol > - O elemento ol representa uma lista ordenada. É utilizado em conjunto com o elemento li e por padrão adiciona uma ordem numérica ao inicio de cada item da lista.
<p > - O elemento p indica um parágrafo em um documento.
<pre > - O elemento pre indica um texto pré-formatado. O texto incluso neste elemento é alterado para utilizar uma fonte monoespaçada. É utilizado normalmente para apresentar trechos de código de programação.
<ul > - O elemento ul indica uma lista sem ordenação. É utilizado em conjunto com o elemento li e todos os itens de sua lista são iniciados por uma marcação inicial, que normalmente é um círculo.

TAGS DE TEXTO EM LINHA - ( Colocar no body )

<a > - O elemento a representa uma âncora (ou hyperlink) entre o documento atual e outro documento ou arquivo.
<abbr > - O elemento abbr representa uma abreviação de conteúdo. Pode ser utilizado em conjunto com o atributo title para informar o conteúdo inteiro.
<b > - O elemento b indica um trecho de texto que deve ter uma formatação diferente do resto do conteúdo.
<br > - O elemento br indica uma quebra de linha dentro de um bloco de texto.
<cite > - O elemento cite indica uma citação a outro trabalho. Deve conter uma URL ou título de referência ao trabalho original.
<code > - O elemento code indica um trecho de código de computadores.
<data > - O elemento data indica um trecho de informação de uma maneira que seja interpretada por computadores.
<dfn > - O elemento dfn representa a definição de um termo.
<em > - O elemento em representa um trecho de texto que deve ter ênfase.
<i > - O elemento i representa um trecho de texto que deve ser destacado de alguma maneira do resto. Normalmente é formatado em itálico.
<kbd > - O elemento kbd representa uma entrada de caracteres de um usuário.
<mark > - O elemento mark representa um trecho de texto que deve ser destacado do resto. Pode ser utilizado em uma página de resultado de pesquisa para indicar o trecho de texto pesquisado.
<q > - O elemento q indica que um trecho de texto é uma citação. Ele é utilizado quando pequenos trechos de citação são utilizados.
<s > - O elemento s indica que um trecho de texto não é mais importante ou relevante para o resto. Normalmente é formatado com uma linha riscando o texto de inicio ao fim.
<samp > - O elemento samp representa um trecho de código de exemplo.
<small > - O elemento small representa um trecho de texto que tem menos relevância para o resto do conteúdo. Normalmente é apresentado com uma vez menos o tamanho normal do texto.
<span > - O elemento span representa um trecho de texto que deve ser destacado do restante de maneira genérica. Não representa nenhuma diferenciação em específico.
<strong > - O elemento strong representa um trecho de texto que deve ser destacado do restante. É apresentado normalmente em negrito.
<sub > - O elemento sub representa um trecho de texto que deve ser apresentado, de alguma maneira, abaixo e menor que o restante do texto.
<sup > - O elemento sup representa um trecho de texto que deve ser apresentado, de alguma maneira, acime e menor que o restante do texto.
<time > - O elemento time representa um horário, no formato 24h, ou um período de tempo no formato de calendário Gregoriano.
<u > - O elemento u representa um trecho de texto que deve ser sublinado.
<var > - O elemento var representa uma variável em uma expressão matemática.

TAGS DE IMAGEM E MULTIMÍDIA - ( Colocar no body )

<area > - O elemento area define um ponto ou região em uma imagem. Este elemento é usado em conjunto com o elemento map.
<audio > - O elemento audio é usado para adicionar conteúdos em áudio ao documento. Dentro dele podem conter diversas fontes de áudio, com elementos source.
<map > - O elemento map é utilizado com conjunto com o elemento area e é utilizado para definir pontos ou regiões clicáveis em uma imagem.
<track > - O elemento track é utilizado em conjunto com outros elementos de multimídia, como audio e video, e apresenta conteúdos em texto temporais, como legendas de um vídeo.
<video > - O elemento video é utilizado para adicionar conteúdos em vídeo ao documento. Dentro dele podem conter diversas fontes de vídeo, com elementos source.

TAGS DE CONTEÚDOS EMBARCADOS - ( Colocar no body )

<embed > - O elemento embed representa um ponto de integração com outros elementos externos, como plugins.
<object > - O elemento object representa um conteúdo externo, que pode ser representado como imagem ou recurso para um plugin.
<param > - O elemento param é utilizado em conjunto com o elemento object e define parâmetros para o object.
<source > - O elemento source representa um conteúdo externo que pode ser utilizado por outros elementos multimídia.

TAGS DE SCRIPT - ( Colocar no body )

<canvas > - O elemento canvas pode ser utilizado para desenha gráficos através de scripts, como o Javascript. Por exemplo, pode ser utilizado para se desenhar gráficos, realizar alterações em imagens ou até mesmo animações.
<noscript > - O elemento noscript é utilizado para ser apresentado ao documento caso o navegador não tenha suporte ao tipo de script selecionado ou esteja com a execução de scripts desabilitada
<script > - O elemento script é utilizado para adicionar ou referenciar conteúdos de scripts executáveis pelo documento.

TAGS DE MARCAÇÃO DE EDIÇÃO - ( Colocar no body )

<del > - O elemento del representa um conteúdo de um documento que foi removido.
<ins > - O elemento ins represente um conteúdo de um documento que foi inserido.

TAGS DE CONTEÚDOS EM TABELA - ( Colocar no body )

<caption > - O elemento caption representa o título de uma tabela.
<col > - O elemento col representa uma coluna em uma tabela. É utilizado em conjunto com o elemento colgroup.
<colgroup > - O elemento colgroup representa um grupo de colunas em uma tabela.
<table > - O elemento table representa uma tabela.
<tbody > - O elemento tbody representa o corpo de uma tabela. Nele são inseridas as linhas e colunas que fazem parte do conteúdo da tabela. É utilizado em conjunto com os elementos thead e tfoot.
<td > - O elemento td representa uma célula em uma linha de uma tabela.
<tfoot > - O elemento tfoot representa o rodapé de uma tabela.
<th > - O elemento th representa uma célula em uma linha dentro do cabeçalho de uma tabela.
<thead > - O elemento thead representa o cabeçalho de uma tabela. Nele são inseridos linhas e colunas que representam os títulos da tabela.
<tr > - O elemento tr representa uma linha em uma tabela.

TAGS DE FORMULÁRIO - ( Colocar no body )

<button > - O elemento button representa um botão clicável.
<datalist > - O elemento datalist representa uma lista de elementos option que representam valores disponíveis para outros elementos.
<fieldset > - O elemento fieldset é utilizado para agrupar diversos campos.
<form > - O elemento form representa uma seção do site com diversos campos interativos para serem enviados para um servidor web.
<input > - O elemento input representa um campo interativo para receber uma entrada de dados do usuário. O seu funcionamento muda dependendo de que parâmetro é passado em seu atributo type
<label > - O elemento label representa uma legenda para um item em um documento. Pode ser atrelado a um campo para auxiliar os usuários a inserirem dados.
<legend > - O elemento legend representa uma legenda para um elemento fieldset.
<meter > - O elemento meter representa um valor escalar entre duas distâncias definidas.
<optgroup > - O elemento optgroup representa um grupo de elementos option, dentro de um campo do tipo select.
<option > - O elemento option representa uma opção a ser selecionada dentro de outro campo. Normalmente é utilizado com o elemento select.
<output > - O elemento output representa o resultado de um cálculo feito por um usuário.
<progress > - O elemento progress é utilizado para apresenta o progresso de uma tarefa que ocorra em um documento. Javascript pode ser utilizado para manipular o valor de seu campo.
<select > - O elemento select apresenta diversas opções para serem selecionadas pelo usuário. É utilizado em conjunto com o elemento select.
<textarea > - O elemento textarea representa um campo de texto com múltiplas linhas.

Notas :

Se desejar detalhes de que para que servem as Tags de formulário veja : Siglas e Termos-Tags de Formulário .

TAGS INTERATIVAS - ( Colocar no body )

<details > - O elemento details é utilizado para separar uma seção do documento com informações adicionais.
<menu > - O elemento menu representa um menu de seleção que pode ser interagido pelo usuário.
<menuitem > - O elemento menuteim representa um item dentro de um elemento menu.
<summary > - O elemento summary representa um sumário ou legenda. É utilizado em conjunto com o elemento details.

Resumo :

1-TAGS BÁSICOS: <body>
2-TAGS DE METADADOS: <base><head><link><meta><style>
3-TAGS DE SEÇÕES DE CONTEÚDO: <address ><article ><aside > <footer > <header ><h1 > a <h6 ><hgroup ><nav >
4-TAGS DE CONTEÚDOS EM TEXTO: <dd ><dl ><dt ><div ><figure > <figcaption ><hr ><li ><main ><ol ><p ><pre ><ul >
5-TAGS DE TEXTO EM LINHA: <a ><abbr ><b ><br ><cite ><code > <data ><dfn ><em ><i ><kbd ><mark ><q ><s ><samp > <small ><span ><strong ><sub ><sup ><time ><u ><var >
6-TAGS DE IMAGEM E MULTIMÍDIA: <area ><audio ><map ><track ><video >
7-TAGS DE CONTEÚDOS EMBARCADOS :<embed ><object ><param ><source >
8-TAGS DE SCRIPT: <canvas ><noscript ><script >
9-TAGS DE MARCAÇÃO DE EDIÇÃO: <del > <ins >
10-TAGS DE CONTEÚDOS EM TABELA: <caption ><col ><colgroup ><table > <tbody ><td ><tfoot ><th ><thead ><tr >
11-TAGS DE FORMULÁRIO: <button ><datalist ><fieldset ><form ><input > <label ><legend ><meter ><optgroup ><option ><output ><progress > <select ><textarea >
12-TAGS INTERATIVOS: <details ><menu ><menuitem ><summary >

As tags 1 e 2 são utilizadas no head do documento enquanto que todas as demais são utilizadas no body do documento.

Notas :

1-Acentuação e Idioma: Caso tenha problemas com acentuação veja : Siglas e Termos-Idioma e Conjunto de caracteres

2-Container : É uma tag html que abriga outras tags html dentro dela. Veja : Siglas e Termos-Container