Ir al contenido
1. Etiquetas de estructura básica
<!DOCTYPE>
- Descripción: Define el tipo de documento y la versión de HTML utilizada.
- Función: Indica al navegador cómo interpretar el código.
- Sintaxis:
<!DOCTYPE html>
- Ejemplo:
<!DOCTYPE html> <html> <head> <title>Mi Página</title> </head> <body> <p>¡Hola, mundo!</p> </body> </html>
<html>
- Descripción: Contiene todo el contenido de una página web.
- Función: Define el inicio y el fin del documento HTML.
- Sintaxis:
<html>...</html>
- Ejemplo: (Ver el ejemplo de
<!DOCTYPE> arriba)
2. Etiquetas de la cabecera
<head>
- Descripción: Contiene metadatos y enlaces a recursos externos.
- Función: No muestra contenido en la página, pero configura su comportamiento.
- Sintaxis:
<head>...</head>
- Ejemplo:
<head> <meta charset="UTF-8"> <title>Mi Página</title> <link rel="stylesheet" href="styles.css"> </head>
<title>
- Descripción: Define el título de la página.
- Función: Aparece en la pestaña del navegador.
- Sintaxis:
<title>Mi Página</title>
- Ejemplo: (Ver ejemplo en
<head>)
<meta>
- Descripción: Proporciona metadatos sobre la página.
- Función: Define la codificación, descripción, palabras clave, etc.
- Sintaxis:
<meta name="descripcion" content="Una página sobre tecnología">
- Ejemplo: (Ver ejemplo en
<head>)
<link>
- Descripción: Enlaza hojas de estilo y otros recursos externos.
- Función: Asocia archivos CSS o iconos.
- Sintaxis:
<link rel="stylesheet" href="styles.css">
- Ejemplo: (Ver ejemplo en
<head>)
<style>
- Descripción: Contiene código CSS dentro del HTML.
- Función: Define estilos sin necesidad de un archivo CSS externo.
- Sintaxis:
<style> body { background-color: lightblue; } </style>
- Ejemplo:
<head> <style> h1 { color: red; } </style> </head>
3. Etiquetas del cuerpo (<body>)
<body>
- Descripción: Contiene el contenido visible de la página.
- Función: Muestra texto, imágenes, videos, enlaces, etc.
- Sintaxis:
<body>...</body>
- Ejemplo: (Ver el ejemplo de
<!DOCTYPE> arriba)
<h1> a <h6>
- Descripción: Definen encabezados de diferentes tamaños.
- Función: Organizan la jerarquía del contenido.
- Sintaxis:
<h1>Encabezado principal</h1>
- Ejemplo:
<h1>Bienvenido</h1> <h2>Subtítulo</h2> <h3>Sección</h3>
<p>
- Descripción: Define un párrafo.
- Función: Agrupa texto en bloques separados.
- Sintaxis:
<p>Este es un párrafo.</p>
- Ejemplo:
<p>El desarrollo web es fascinante.</p>
<br>
- Descripción: Inserta un salto de línea.
- Función: Divide el texto sin iniciar un nuevo párrafo.
- Sintaxis:
Primera línea.<br>Segunda línea.
- Ejemplo:
<p>Hola,<br>Bienvenido a mi sitio web.</p>
<hr>
- Descripción: Inserta una línea horizontal.
- Función: Separa secciones del contenido.
- Sintaxis:
<hr>
- Ejemplo:
<p>Sección 1</p> <hr> <p>Sección 2</p>
<a>
- Descripción: Crea enlaces a otras páginas o recursos.
- Función: Permite navegar a otros sitios.
- Sintaxis:
<a href="https://www.ejemplo.com">Visitar Ejemplo</a>
- Ejemplo:
<a href="https://www.google.com" target="_blank">Ir a Google</a>
<img>
- Descripción: Muestra imágenes.
- Función: Inserta imágenes en la página.
- Sintaxis:
<img src="imagen.jpg" alt="Descripción de la imagen">
- Ejemplo:
<img src="foto.jpg" alt="Foto de un paisaje" width="300">
4. Etiquetas de listas
<ul> (Lista desordenada)
- Función: Muestra elementos sin numeración.
- Ejemplo:
<ul> <li>Manzana</li> <li>Banana</li> <li>Cereza</li> </ul>
<ol> (Lista ordenada)
- Función: Muestra elementos con numeración.
- Ejemplo:
<ol> <li>Primero</li> <li>Segundo</li> <li>Tercero</li> </ol>
<li> (Elemento de lista)
- Función: Representa un ítem dentro de una lista.
- Ejemplo: (Ver
<ul> y <ol> arriba)
5. Etiquetas de tablas
<table>
- Función: Crea una tabla.
- Ejemplo:
<table border="1"> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Juan</td> <td>25</td> </tr> </table>
