Como criar títulos, subtítulos e parágrafos em HTML. Tag p, h1, h2, h3 - h6

Veja este tutorial de HTML que mostra como trabalhar com parágrafos usando a tag p, título da página usando h1 e subtítulos com as tags do h2 ao h6. Algumas observações importantes sobre o uso dessas tags em HTML

Índice deste artigo

Parágrafos em HTML - Tag p
Tag h1 - Título da página em HTML
Tags h2 ao h6 - subtítulos da página
Algumas observações importantes

Títulos, subtítulos e parágrafos em HTML são elementos extremamente comuns em quase todos os sites. O bom uso deste elementos de textos podem trazer resultados positivos para a navegação no site e a apresentação dos seu documento HTML. As tags p (parágrafo), h1(título) e h2 ao h6 (subtítulos) serão analisadas aqui.

Parágrafos em HTML - Tag p

A tag p é usada para fazer a estruturação de textos em parágrafos dentro de um documento HTML. A princípio todos os textos deverão estar dentro desta tag, exceto:

Quando o texto for um título, nesta nova condição deverá ser usado as tags <h1> a <h6>.
Quando o texto for uma citação, neste caso use a tag <blockquote>.
Quando o texto for uma lista de marcadores ou lista, neste caso use <ul> e <li> ou <ol> e <li>.
Quando for uma legenda, neste caso use <legend>

Atributos

A tag p suporta os seguintes atributos:

class – Permite a associação de uma classe de formatação de CSS
id – Cria um identificador para o parágrafo. Útil para fazer formatações personalizadas.
style – Cria uma formatação de CSS Inline.

Exemplo de um documento com três parágrafos, cada um usando um dos atributos acima:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Estruturação de parágrafos com a tag p</title>
</head>
<body>
<p class="texto">Parágrafo com uma classe associada</p>
<p id="destaque">Parágrafo com um identificador</p>
<p style="color:#ff0000">Parágrafo com formatação de CSS inline</p>
</body>
</html>

Eventos

A tag p suporta ainda os eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown e onkeyup.

Tag h1 - Título da página em HTML

A tag H1 é usada para determinar o título da página. Conceitualmente existem 6 níveis de títulos, sendo o h1 o mais alto de todos, ou seja, ele deve ser usado para indicar o texto mais importante da página.

Exemplo:

<h1>Título do texto da sua página</h1>

Considerações

O comportamento padrão do H1 é negrito e tamanho da fonte xx
Cada página deverá ter apenas uma tag h1, já que presupõe que cada página tenha um único título
Por ser uma tag de texto, ela aceita formatação por CSS das propriedades de fonte, bloco de textos, background, box model, posicionamento, borda e layout.
Deve ser poscionada no início do texto. Não faz sentido usar esta tag no meio do texto

Tags h2 ao h6 - subtítulos da página

A tag h2 a h6 complementam a lista das tags usadas para títulos. Como estas tags são classificadas por níveis é correto afirmar que o h2 deve ser usado em um texto mais importante que o texto do h3 e assim por diante.

Não é necessário fazer o uso de todos os 6 níveis, exceto quando o texto for classificado em muitas seções, exigindo assim uma documentação muito rígida. Normalmente usa-se o h1, h2 e h3 para a maioria dos textos encontrados na web.

Exemplo:

<h2>Título do texto nível 2</h2>
<h3>Título do texto nível 3</h3>
<h2>Título do texto nível 4</h2>
<h5>Título do texto nível 5</h5>
<h6>Título do texto nível 6</h6>

Considerações

O comportamento padrão das tags h2 a h6 é negrito e o tamanho da fonte varia de acordo com o nível, sendo o h2 tamanho maior e h6 tamanho menor
Essas tags poderão ser usadas mais de uma vez na página, mas sem excesso
Por ser uma tag de texto, ela aceita formatação por CSS das propriedades de fonte, bloco de textos, background, box model, posicionamento, borda e layout.
Não faz sentido usar o h3 sem termos usado o h2, conceitualmente só iremos usar h3 depois de termos usado o h1 e o h2.

Algumas observações importantes

Basicamente cada página deve ter apenas um a tag H1, já que ela é a tag que estabelece o título principal da página, não faz sentido repeti-la em um mesmo documento.

As tags H2 a H6 podem ser repetidas dentro da necessidade da página, ou seja, enquanto só pode existir um título principal com H1, podem existir diversos subtítulos e portanto nesse caso a repetição é possível.

E quando você faz o uso das tags de H1 a H6, o próprio HTML criar uma formatação básica alterando o tamanho da fonte de cada um, sendo o H1 o maior e o H6 o menor. Mas é importante considerar que essas tags não se refere a formatação e a maneira dele fazer isso exatamente para indicar hierarquia. Encerre esse é possível mudar a formatação de todas essas tags atribuindo características visuais diferentes. Portanto essas tags se referem a parte estrutural e semântica e não tem muita relação com a formatação que conforme já explicado pode ser modificado pela formatação da linguagem CSS.