Títulos, subtítulos e parágrafos. Tag h1 e P em HTML

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.

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="http://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
     



Veja também:





// Comentários

REGINALDO DE JESUS BORGES // Savador Bahia // 04/09/2010 15:00:00

o que e html.





 

2007-2012   //   Blog do Luis   //   Política de Privacidade   //   Eu creio em Deus