Etiquetas HTML tipos y ejemplos

Las etiquetas son una forma de indicar al navegador como debe mostrarse un cierto elemento en una página web, conozcamos más a fondo cuáles son y cómo se utilizan.

Qué es una etiqueta HTML

Una etiqueta es una marca que pone límites a un cierto elemento en HTML, para delimitar un elemento en HTML se emplea una etiqueta de apertura y una de cierre, son muy característicos por colocarse entre signos de menor y mayor. Existe una cantidad limitada de etiquetas en HTML y ya están establecidas y solo queda aprenderlas y ¡Para ello estamos!

lista de etiquetas HTML

  • Etiqueta HTML <h1>: Encabezado o título principal.
  • Etiqueta HTML <h2>: Para elementos subtítulo.
  • Etiqueta HTML <p>: Para elementos de párrafo.
  • Etiqueta HTML <b>: Para hacer texto en negrita.
  • Etiqueta HTML <i>: Texto en cursiva.
  • Etiqueta HTML <ul>: Para listas sin ordenar
  • Etiqueta HTML <table>: para crear tablas.
  • Etiqueta HTML <form>: Para crear formularios.
  • Etiqueta HTML <a>: Para crear enlaces.
  • Etiqueta HTML <img>: Para insertar imágenes.

Bueno, hay muchas más etiquetas y lo veremos poco a poco. ¡Ahora te toca practicar!

En la sección body escribiremos nuestro primer encabezado visible utilizando la etiqueta <h1> y nuestro primer párrafo utilizando la etiqueta <p>, de la siguiente manera:

<html> 
  <head> 
    <title> MI PRIMER TITULO </title> 
  </head> 
  <body> 
    <h1> Este es el encabezado o título visible </h1> 
    <p> Este es nuestro primer párrafo de texto Este es nuestro primer párrafo de texto Este es nuestro primer párrafo de texto Este es nuestro primer párrafo de texto Este es nuestro primer párrafo de texto </p> 
    <p> Este es otro párrafo de texto Este es otro párrafo de texto Este es otro párrafo de texto Este es otro párrafo de texto</p> 
  </body> 
</html>

Resultados:

Te recomendamos leer:  Etiqueta div y span en HTML
etiquetas html ejemplo
Imagen del resultado de etiqueta h1 y p html

Ahora, si guardamos nuestro documento y actualizamos el navegador, veremos que el navegador ya nos muestra contenido en el cuerpo de nuestra página, nuestro encabezado o título visible y nuestros párrafos.

¡Muy fácil!

Etiqueta <br/>

  • <br/> indica un salto de línea, observa bien, no está mal escrito, es así como se escribe.
  • <br/> puede ir dentro de un párrafo, por ejemplo para hacer un salto de línea si es necesario.
  • <br/> no tiene etiqueta de cierre.

Etiqueta <hr/>

  • <hr/> es una etiqueta que crea una línea horizontal o separador y también solo hay que digitar tal como aparece, para crear una línea horizontal.
  • <hr/> no tiene etiqueta de cierre.

Ejemplo de código HTML con salto de línea <br/> y línea horizontal <hr/>

<p> Esta es la primera linea <br/> Esta es la segunda <br/> esta es la tercera linea de nuestro primer párrafo <br/> Esta es la cuarta linea de nuestro 
primer párrafo de texto Este es nuestro primer párrafo de texto Este es nuestro primer párrafo de texto </p>

<hr/>

<p> Este es otro párrafo de texto Este es otro párrafo de texto Este es 
otro párrafo de texto Este es otro párrafo de texto</p>

<hr/>

Resultado:

etiquetas de salto de linea y linea horizontal separador
Imagen resultado de código html con salto de linea e linea horizontal.

Cómo poner comentarios en código HTML

Los comentarios en HTML  nos permiten añadir a nuestro documento, alguna nota, una pequeña descripción, o un simple recordatorio que nosotros entendamos.

Los comentarios no aparecerán en la página, solo será visible para el programador.

Un comentario en HTML  se indica de la siguiente manera:  <!–  Aquí escribe tu comentario –>

Ejemplo de comentarios en HTML

<html>

<head>
<title> Mi primer titulo </title>
</head>

<body>
<h1> Página de contacto</h1>
<!--Nota importante: No olvidar que esta página debe contener un formulario de contacto con fondo azul y tipo de letras helvetica como indico el cliente -->


</body>

</html>

Resultado:

Te recomendamos leer:  Cómo poner hipervínculos o enlaces en HTML
etiqueta para comentarios en html
Imagen ejemplo de comentario en html

Puedes colocar un comentario en cualquier parte de tu documento HTML, no será leído por el navegador, solo para ti.

lecciones HTML
3 4 votos
Calificación
guest
2 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
martin
martin
3 meses atrás

Muchas gracias, un lujo para los que estamos comenzando

Jorge
Jorge
2 meses atrás

Muchas gracias, siempre es bueno que la información este tan detallada una ves mas gracias.