Primeros pasos con HTML – Lección 1 – Etiquetas h1–h6, p, strong
Para aprender a crear documentos HTML, consulta HTML – primeros pasos.
En la lección anterior creamos nuestro primer documento HTML.
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
HTML – mis primeros pasos
</body>
</html>
En esta lección llenaremos nuestro documento con texto. Añadiremos la etiqueta más común en HTML: <p></p>. Recuerda que las etiquetas se escriben en caracteres latinos y no en cirílico. La etiqueta <p> es la abreviatura de “paragraph” (párrafo).
Todo el texto en HTML debe ir dentro de alguna etiqueta, así que vamos a envolver el texto en <p>:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<p>HTML – mis primeros pasos</p>
</body>
</html>
Visualmente no cambia, pero la estructura es más correcta. Podemos añadir más párrafos:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<p>HTML – mis primeros pasos</p>
<p>Cada cazador desea</p>
<p>saber dónde</p>
<p>se esconde la perdiz</p>
</body>
</html>
Ahora añadamos un encabezado. ¿Por qué usar encabezados en HTML? Primero, para estructurar el texto y facilitar su lectura. Segundo, porque son importantes para el posicionamiento en buscadores. No los ignores.
Usaremos las etiquetas h1–h6 para los encabezados. El número indica la importancia. Solo debe haber un h1 por página, que describa el tema principal. Luego usa h2, h3, etc., según la jerarquía.
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1><br>
<h2>Mis primeros pasos</h2>
<p>HTML – mis primeros pasos</p>
<h3>Un paso más</h3><br>
<h2>Así se dice</h2>
<p>Cada cazador desea</p>
<p>saber dónde</p>
<p>se esconde la perdiz</p>
</body>
</html>
Observa que el tamaño de cada h1–h6 varía y su texto aparece en negrita. Para resaltar texto puedes usar la etiqueta <strong>:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<h2>Mis primeros pasos</h2>
<p>HTML – mis primeros pasos</p>
<h3>Un paso más</h3>
<h2>Así se dice</h2>
<p>Cada <strong>cazador</strong> desea</p>
<p>saber dónde</p>
<p>se esconde la perdiz</p>
</body>
</html>
Asegúrate de no usar encabezados (h1–h6) dentro de p; esto puede perjudicar el SEO en Google.
La forma correcta de resaltar texto es:
<p>Texto muy <strong>importante</strong></p>
No así:
<p><h3>¡No hagas</h3> esto!</p>
Ahora ya sabes cómo añadir tanto texto como quieras y resaltarlo correctamente.