Etiquetas HTML tipos y ejemplos

Anterior
Avanzar

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 limites 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:  Atributo id y class 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:  Etiqueta div y span 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
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML