O que é HTML?

1-HTML é a linguagem de marcação padrão para criar páginas da Web.
2-HTML significa Hyper Text Markup Language
3-HTML descreve a estrutura de uma página da Web
4-HTML consiste em uma série de elementos
5-Os elementos HTML informam ao navegador como exibir o conteúdo
6-Os elementos HTML são representados por tags
7-As tags HTML rotulam partes do conteúdo, como "cabeçalho", "parágrafo", "tabela" e assim por diante
8-Os navegadores não exibem as tags HTML, mas as usam para renderizar o conteúdo da página

A infância da Internet

A Internet não nasceu o monstro que a gente navega hoje. Começou modestamente (veja documento 01) e foi se adaptando conforme as necessidades.
Começou com o tráfego de simples textos mas logo viram que era pouco e queriam mais. No entanto, não podiam jogar fora o que já havia (esta é uma regra básica e consagrada em WEB). Portanto, ela precisava continuar exibindo o texto simples e incorporar os novos recursos de maneira que continuassem a serem compatíveis com os recursos de texto anteriormente utilizados. Assim surgiu a idéia de tags, ou seja, elementos que não eram texto mas incorporavam recursos de visualização. Por exemplo, antes não haviam imagens. Agora queriam colocar imagens e como fizeram isso? Com uma tag instruindo...exibir aqui uma imagem. Como ela fêz isso? Simples texto, a imagem era um recurso extra por fora do conteúdo da página, um arquivo separado.
Foi assim que o recurso das tags foram incorporadas e surgiu o HTML. As tags instruem o que o browser deve exibir no formato e da maneira que precisam ser exibidas, encolhendo, esticando, colorindo, posicionando da maneira que o programador HTML desejar.
Só para constar, hoje existe muito mais versatilidade e recursos para aplicativos web que em aplicativos windows, por exemplo.

Notas importantes sobre o HTML

Seguindo o formato de exibição de textos antigos, os elementos de uma página HTML são exibidos como se fossem textos, ou seja, de cima para baixo e da esquerda para a direita e numa 'linha' ou 'parágrafo' que coordena ou alinha esses elementos.
Portanto se o objeto a esquerda é alto e o da direita baixo vai ficar um espaço vazio no segundo elemento.
Como os novos elementos são bem mais complexos que um simples texto foi criado o contexto de boxing.
BOXING é como cada elemento da página web é exibido e como diz o nome, é uma caixa.

Como um elemento é exibido no browser.

Todo elemento é exibido no browser da seguinte maneira:

Este 'espaçamento/modo/modelo' foi definido como sendo a melhor maneira de exibir um objeto nos mais amplos contextos.
A linha cinza mais externa é o espaço efetivamente ocupado para exibir o elemento. Na realidade é um desenho didático, esta linha não existe e, portanto, não ocupa espaço. É só um delineador.
A seguir vem a margem que é um componente espaçador para que um elemento não 'encoste' no outro elemento logo a seguir, anterior, superior ou inferior. Note que até aqui nosso elemento nem começou a ser rederizado ainda.
A seguir vem a borda que é um componente delineador que visa ornar, destacar o elemento na página, separando a parte externa do conteúdo do núcleo do elemento a ser exibido. É um recurso visual ou estético. Mostra claramente, se quisermos, o quanto o objeto ocupa no documento.
A seguir o Padding que é um elmento espaçador e define um o espaçamento interno para que o conteúdo real do elemento não 'encoste' na borda dando um visual mais agradável. Com certeza é um componente ornamental. Por exemplo, cito um texto. Muitas vezes queremos um fundo de uma cor e o texto se ele tocar na margem fica feio. O padding dá um espaçamento e visualmente fica muito melhor.
O Conteúdo que é o que desejamos exibir realmente.
Note que a margem(Margin), Padding e a borda (Border) podem ser formatados da maneira que desejarmos e até podem ser ocultados se o objeto a ser exibido não precisar deles. O único elmemento obrigatório é o conteúdo.

O WW3 consortium definiu quais são os defaults de Margem, Padding, Border de cada tag HTML.
Podemos dizer que muitas vezes esses elementos sequer são exibidos ( por exemplo, um border com zero pixel, uma margem com cor = fundo, etc.) mas todo elemento html tem esses itens.
Muitas vezes, embora não queiramos, alguns desses atributos default atrapalham nosso design como é o caso do body que precisamos formatar o margin e o padding para zero se quisermos que um elemento encoste no outro dentro do body senão vai ficar uma linha branca de espaço que nem sempre agrada visualmente.

Posicionamento dos elementos

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.
Para simplificar e tornar a renderização do documento mais rápida o default de renderização de todos os elementos HTML é a posição estática (static) , e não podem ser movidos ou deslocados.
Caso seja 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 dos elementos temos duas possibilidades: Block e Inline.

Elementos tipo block ( em bloco )

Os elementos tipo block são feitos para serem exibidos em bloco, ou seja, ocupam de maneira exclusiva uma linha.
Cito como exemplo a tag p 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, com excessão de um texto simples ( que é um elemento tipo em linha).
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 dos elementos tipo bloco é que como eles são únicos podem ser dimensionados livremente na página (largura e altura) porque não haverá ninguém concorrendo com seu espaço.

As tags tipo bloco 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>

Elementos tipo InLine ( em linha )

Os elementos tipo inline são feitos para serem exibidos em linha, ou seja, um ao lado do outro.
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.
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.

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>

Elementos da 'Linguagem' HTML

Nesta seção estão listados os tipos de elementos 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.

ELEMENTOS BÁSICOS

<html> - O elemento html é a raiz do documento. Todos os outros elementos precisam ser filhos dele.

ELEMENTOS DE METADADOS

<base> - O elemento base informa para o document a URL de base do site. Só pode haver um elemento base por documento HTML.
<head> - O elemento head é o principal elemento em que os outros elementos de metadados são inseridos. Nele vão os scripts, folhas de estilo CSS e outras informações.
<link> - O elemento link indica uma ligação entro o documento atual e outros recursos. Normalmente é utilizado para ligar uma folha de estilos CSS ou uma página de Códigos JavaScript externa.
<meta> - O elemento meta indica toda outra informação que não vai em uma das outras tags acima. A mais famosa é a UTF-8 que permite qualquer idioma universal, inclusive o nosso.
<style> - O elemento style normalmente contém comandos de estilização de CSS.

ELEMENTOS DE SEÇÕES DE CONTEÚDO

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

ELEMENTOS DE CONTEÚDOS EM TEXTO

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

ELEMENTOS DE TEXTO EM LINHA

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

ELEMENTOS DE IMAGEM E MULTIMÍDIA

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

ELEMENTOS DE CONTEÚDOS EMBARCADOS

ELEMENTOS DE SCRIPT

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

ELEMENTOS DE MARCAÇÃO DE EDIÇÃO

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

ELEMENTOS DE CONTEÚDOS EM TABELA

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

ELEMENTOS DE FORMULÁRIO

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

ELEMENTOS INTERATIVOS

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

Notas :
1-ELEMENTOS DE FORMULÁRIO são elementos que armazenam informações que podem ter sido recebidas prontas do servidor, alteradas pelo usuário e através de um botão submit e uma tecnologia de servidor, o conteúdo desses campos é enviado ao servidor.

Resumo :
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address ><article ><aside > <footer > <header ><h1 > a <h6 ><hgroup ><nav >
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd ><dl ><dt ><div ><figure > <figcaption ><hr ><li ><main ><ol ><p ><pre ><ul >
5-ELEMENTOS 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-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <area ><audio ><map ><track ><video >
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed ><object ><param ><source >
8-ELEMENTOS DE SCRIPT: <canvas ><noscript ><script >
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del > <ins >
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption ><col ><colgroup ><table > <tbody ><td ><tfoot ><th ><thead ><tr >
11-ELEMENTOS DE FORMULÁRIO: <button ><datalist ><fieldset ><form ><input > <label ><legend ><meter ><optgroup ><option ><output ><progress > <select ><textarea >
12-ELEMENTOS INTERATIVOS: <details ><menu ><menuitem ><summary >

g Notas :
1-No visual studio e na maioria das ferramentas do windows ao criar uma página nova o conjunto de caracteres padrão será Europeu Ocidental (Windows) - Página de Código 1252.
Infelizmente o padrão da Internet é Unicode (UTF-8) - Página de Código 65001
Por esse motivo muita acentuação é perdida quando usamos o padrão errado ou quando tentamos exportar informações do windows para a web e vice-versa.