1. Sintaxis de una Etiqueta HTML
HTML se basa en etiquetas. Una etiqueta le dice al navegador qué es el contenido (un párrafo, un título, una imagen, etc.).
La estructura básica es:
<etiqueta atributo="valor">Contenido</etiqueta>
- Etiqueta de apertura:
<p>(marca el inicio). - Contenido: El texto u otros elementos dentro.
- Etiqueta de cierre:
</p>(marca el final, nota la barra/). - Atributos: Información extra como
class,id,src, etc.
Ejemplo real:
Esto es un párrafo normal.
Pasa el ratón por aquí para ver el atributo title.
Código:
<p>Esto es un párrafo normal.</p>
<p title="Soy un atributo title">Pasa el ratón por aquí para ver el atributo title.</p>2. Estructura Básica de un Documento
Todo archivo HTML debe seguir esta estructura obligatoria:
<!DOCTYPE html> <!-- Define que es HTML5 -->
<html lang="es"> <!-- Raíz del documento -->
<head> <!-- Información para el navegador (no visible) -->
<meta charset="UTF-8">
<title>Título de la Pestaña</title>
</head>
<body> <!-- Contenido visible para el usuario -->
<h1>Hola Mundo</h1>
<p>Esto es lo que se ve.</p>
</body>
</html>
3. Elementos de Bloque vs. Elementos en Línea
Es vital entender cómo se comportan los elementos en la página.
Elementos de Bloque (Block)
Ocupan todo el ancho disponible y siempre empiezan en una nueva línea.
Ejemplos comunes: <div>, <p>,
<h1>-<h6>, <section>, <ul>.
Soy un <p> (bloque). También ocupo todo.
Código:
<div class="demo_bloque">Soy un <div> (bloque). Ocupo todo el ancho.</div>
<div class="demo_bloque">Soy otro <div>. Empiezo abajo.</div>
<p class="demo_bloque">Soy un <p> (bloque). También ocupo todo.</p>Elementos en Línea (Inline)
Ocupan solo el ancho de su contenido y no empiezan en una nueva línea (se sitúan al lado).
Ejemplos comunes: <span>, <a>, <strong>,
<em>, <img>.
Esto es un párrafo que contiene un <span> (línea) dentro. Mira cómo este <strong> y este <em> fluyen con el texto.
Código:
<p>
Esto es un párrafo que contiene <span class="demo_linea">un <span> (línea)</span> dentro.
Mira cómo <strong class="demo_linea">este <strong></strong> y <em class="demo_linea">este <em></em> fluyen con el texto.
</p>El contenedor genérico: <div> y <span>
<div>: Contenedor de bloque genérico. Se usa para agrupar secciones grandes.<span>: Contenedor en línea genérico. Se usa para dar estilo a partes pequeñas de texto.