HTML - Etiquetas básicas

Etiquetas de encabezado

Cualquier documento comienza con un encabezado. Puede utilizar diferentes tamaños para sus títulos. HTML también tiene seis niveles de encabezados, que utilizan los elementos<h1>, <h2>, <h3>, <h4>, <h5>, y <h6>. Mientras muestra cualquier encabezado, el navegador agrega una línea antes y una línea después de ese encabezado.

Ejemplo

<!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>

Esto producirá el siguiente resultado:

Etiqueta de párrafo

los <p>La etiqueta ofrece una forma de estructurar su texto en diferentes párrafos. Cada párrafo de texto debe ir entre una etiqueta de apertura <p> y una etiqueta de cierre </p> como se muestra a continuación en el ejemplo:

Ejemplo

<!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>

Esto producirá el siguiente resultado:

Etiqueta de salto de línea

Siempre que use el <br />elemento, todo lo que le siga comienza desde la siguiente línea. Esta etiqueta es un ejemplo deempty elemento, donde no necesita abrir y cerrar etiquetas, ya que no hay nada entre ellas.

La etiqueta <br /> tiene un espacio entre los caracteres. bry la barra inclinada hacia adelante. Si omite este espacio, los navegadores más antiguos tendrán problemas para representar el salto de línea, mientras que si omite el carácter de barra diagonal y solo usa <br>, no es válido en XHTML.

Ejemplo

<!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>

Esto producirá el siguiente resultado:

Centrar contenido

Puedes usar <center> etiqueta para colocar cualquier contenido en el centro de la página o en cualquier celda de la tabla.

Ejemplo

<!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>

Esto producirá el siguiente resultado:

Lineas horizontales

Las líneas horizontales se utilizan para dividir visualmente secciones de un documento. los<hr> La etiqueta crea una línea desde la posición actual en el documento hasta el margen derecho y la divide en consecuencia.

Por ejemplo, es posible que desee poner una línea entre dos párrafos como en el ejemplo que se muestra a continuación:

Ejemplo

<!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>

Esto producirá el siguiente resultado:

Otra vez <hr /> etiqueta es un ejemplo de la empty elemento, donde no necesita abrir y cerrar etiquetas, ya que no hay nada entre ellas.

los <hr /> el elemento tiene un espacio entre los caracteres hry la barra inclinada hacia adelante. Si omite este espacio, los navegadores más antiguos tendrán problemas para representar la línea horizontal, mientras que si pierde el carácter de barra diagonal y solo usa<hr> no es válido en XHTML

Conservar formato

A veces, desea que su texto siga el formato exacto de cómo está escrito en el documento HTML. En estos casos, puede utilizar la etiqueta preformateada<pre>.

Cualquier texto entre la apertura <pre> etiqueta y el cierre </pre> La etiqueta conservará el formato del documento de origen.

Ejemplo

<!DOCTYPE html>
<html>

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

Esto producirá el siguiente resultado:

Intente usar el mismo código sin guardarlo dentro <pre>...</pre> etiquetas

Espacios que no rompen

Suponga que quiere usar la frase "12 hombres enojados". Aquí, no querrá que un navegador divida "12, Angry" y "Men" en dos líneas:

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

En los casos en los que no desee que el navegador del cliente divida el texto, debe utilizar una entidad de espacio que no se rompa  en lugar de un espacio normal. Por ejemplo, al codificar los "12 hombres enojados" en un párrafo, debe usar algo similar al siguiente código:

Ejemplo

<!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>

Esto producirá el siguiente resultado:

↰ Previous page Next page ↱