HTML - Tags básicas

Tags de título

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 títulos, 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

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Tag de parágrafo

o <p>tag 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 -

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Tag de quebra de linha

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

A tag <br /> possui um espaço entre os caracteres bre a barra para a frente. 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.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Centrando Conteúdo

Você pode usar <center> tag para colocar qualquer conteúdo no centro da página ou em qualquer célula da tabela.

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Linhas Horizontais

As linhas horizontais são usadas para separar visualmente as seções de um documento. o<hr> tag 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 -

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

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

o <hr /> elemento tem um espaço entre os caracteres hre a barra para a frente. 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> não é válido em XHTML

Preservar formatação

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

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

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Tente usar o mesmo código sem mantê-lo dentro <pre>...</pre> Tag

Espaços não separáveis

Suponha que você queira usar a frase "12 homens irritados". Aqui, você não gostaria que um navegador dividisse "12, Irritado" e "Homens" em duas linhas -

An example of this technique appears in the movie "12 Angry Men."

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  em vez de um espaço normal. Por exemplo, ao codificar os "12 Homens Irritados" em um parágrafo, você deve usar algo semelhante ao seguinte código -

Exemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -