HTML Tutorial

Qualquer documento começa com um título. Você pode usar tamanhos diferentes para seus títulos. HTML também tem seis níveis de cabeçalhos, que usam os elementos <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.Ao exibir qualquer título, o navegador adiciona uma linha antes e uma linha depois desse título.

Exemplo:

See the Pen
Tags para titulos by John Pires (@johnpiresBR)
on CodePen.

Tag de parágrafo:

A tag <p> oferece uma maneira de estruturar seu texto em diferentes parágrafos. Cada parágrafo de texto deve ficar entre uma tag de abertura <p> e uma tag de fechamento </p> conforme mostrado abaixo no exemplo:

See the Pen
Tag de parágrafo by John Pires (@johnpiresBR)
on CodePen.

Tag de quebra de linha:



Sempre que você usa o elemento <br />, tudo o que o segue começa na próxima linha. Esta tag é um exemplo de elemento vazio, onde você não precisa abrir e fechar tags, pois não há nada entre eles.

A tag <br /> tem um espaço entre os caracteres br e a barra. Se você omitir este espaço, os navegadores mais antigos terão problemas para processar a quebra de linha, enquanto se você perder o caractere de barra e apenas usar <br>, isso não é válido em XHTML.

See the Pen
HTML – Exemplo de quebra de linha by John Pires (@johnpiresBR)
on CodePen.

Linhas Horizontais:

As linhas horizontais são usadas para separar visualmente as seções de um documento. A tag <hr> cria uma linha da posição atual no documento até a margem direita e quebra a linha de acordo.

Por exemplo, você pode querer dar uma linha entre dois parágrafos como no exemplo dado abaixo:

See the Pen
HTML – Exemplo de linha horizontal. by John Pires (@johnpiresBR)
on CodePen.

Novamente, a tag <hr /> é um exemplo do elemento vazio, onde você não precisa abrir e fechar as tags, pois não há nada entre eles.

O elemento <hr /> possui um espaço entre os caracteres hr e a barra. Se você omitir este espaço, os navegadores mais antigos terão problemas para renderizar a linha horizontal, enquanto se você perder o caractere de barra e apenas usar <hr>, ele não é válido em XHTML

Preservar formatação:



Às vezes, você deseja que seu texto siga o formato exato de como foi escrito no documento HTML. Nesses casos, você pode usar a tag pré-formatada <pre>.

Qualquer texto entre a tag de abertura <pre> e a tag de fechamento </pre> preservará a formatação do documento de origem.

See the Pen
HTML – Preservar Exemplo de Formatação by John Pires (@johnpiresBR)
on CodePen.

Tente usar o mesmo código sem mantê-lo dentro das tags <pre> … </pre>

Espaços não separáveis:

Suponha que você queira usar a frase “12 Maneiras de ter maturidade”. Aqui, você não gostaria que um navegador dividisse “12, Maneiras” e “de ter maturidade” em duas linhas

Nos casos em que você não deseja que o navegador do cliente quebre o texto, você deve usar uma entidade de espaço não separável & nbsp; em vez de um espaço normal. Por exemplo, ao codificar os “12 Maneiras de ter maturidade” em um parágrafo, você deve usar algo semelhante ao seguinte código

See the Pen
HTML – Exemplo de espaços não separáveis by John Pires (@johnpiresBR)
on CodePen.