Primeros pasos con HTML – Lección 2 – etiquetas p, div y sus diferencias. Etiqueta br
En la lección anterior creamos nuestro primer documento HTML, lo que significa que ya sabes escribir código HTML en un editor de texto y ver los cambios en el navegador actualizando la página (generalmente con F5).
En esta lección seguiremos trabajando con texto usando las etiquetas span, p y div. También veremos la etiqueta br.
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
</body>
</html>
Este es el código con el que trabajaremos a continuación.
Vamos a añadir estas líneas:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<p>Primera línea en etiqueta P</p>
<p>Segunda línea en etiqueta P</p>
<div>Primera línea en etiqueta DIV</div>
<div>Segunda línea en etiqueta DIV</div>
</body>
</html>
Si abres el documento en el navegador verás que las etiquetas p colocan el texto en líneas separadas, pero con un margen arriba y abajo por defecto, mientras que las div se pegan unas a otras sin margen. La etiqueta p define un párrafo, mientras que div define un bloque o área. Usa p para texto y div para crear secciones que luego puedas estilizar (fondo, bordes, etc.).
Todo texto en tu sitio debe estar dentro de un p o de un encabezado h1–h6, a menos que sea contenido de marcado (scripts, estilos). Un ejemplo correcto:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<div>
<p>Primera línea en etiqueta P</p>
<p>Segunda línea en etiqueta P</p>
</div>
</body>
</html>
Observa que nunca debes colocar un div dentro de un p. body>p>div es incorrecto.
Para saltos de línea dentro de un párrafo muy largo, usa la etiqueta br (etiqueta vacía, se escribe <br />):
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<div>
<p>Este párrafo es muy largo y necesito
<br />
forzar un salto de línea aquí
<br />
y otro salto de línea aquí.</p>
</div>
</body>
</html>
El navegador ignorará saltos de línea en el código fuente y mostrará todo junto, pero <br /> le indica dónde romper la línea.
También puedes dividir el texto en varios párrafos usando varias etiquetas p:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<div>
<p>Primer párrafo con varios saltos de línea.<br />
Línea 2.<br />
Línea 3.</p>
<p>Segundo párrafo independiente.<br />
Línea adicional.</p>
</div>
</body>
</html>
Actualiza la página en el navegador y verás el texto dividido en dos párrafos.