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 &nbsp;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 -