En este post veremos las etiquetas para vuestros encabezados. Veremos la idea de la estructura y como marcar una jerarquía para que Google sepa las partes importantes de nuestro contenido.
Tabla de contenidos
Los encabezados <h>
h1, h2, h3, h4, h5, h6 – Estos elementos se utilizan para introducir encabezados de texto y son elementos de bloque por defecto. El encabezado <h1> es el de más importancia y el <h6> el de menos. Por lo tanto, si queremos hacer una jerarquía de más a menos importancia en, por ejemplo, un artículo, utilizaremos dicha jerarquía.
<body> ... <article> <h1>Título del artículo</h1> <h2>Subtítulo del artículo</h2> <h3>Capítulo 1</h3> <p>Texto del capítulo 1</p> <h3>Capítulo 2</h3> <p>Texto del capítulo 2</p> ... </article> ... </body>
Los navegadores dan estilos predeterminados a los elemento <h>, los cuales incluyen margenes y diferentes tamaños de letra. Pero dichos estilos los podemos cambiar a conveniencia según nuestro criterio por medio del CSS.
Hay que tener claro que HTML le da a los elementos <h> una jerarquía de importancia que debemos aprovechar. O dicho de otra forma, un elemento <h4> siempre tendrá implícita una importancia mayor que un elemento <h6>, cosa que no debemos alterar, ya que si lo alteramos, nuestra web no tendrá sentido o no será el sentido correcto para los robots de búsqueda, y además será un grabe error de usabilidad.
Los parágrafos genéricos <p>
Son los componentes básicos de la mayoría de los documentos. Normalmente, un parágrafo es un conjunto de una o dos frases. Por lo que es un buena idea seguir esta pauta y no utilizar la etiqueta <p> para cualquier pequeño fragmento de texto, como por ejemplo, mucha gente utiliza la etiqueta de parágrafo <p> para poner las etiquetas de los <input> en un formulario. Sería más apropiado utilizar la etiqueta <label> que está destinada a dicho cometido. Además, a los lectores de pantalla, para personas invidentes, se lo podríamos más fácil. También son elementos de tipo bloque.
Texto con formato predefinido <pre>
Cualquier texto en el cual el espacio en blanco sea importante, como por ejemplo una poesía, un código de programación, etc. debe estar encerrado entre las etiquetas <pre> y </pre>. De esta forma se consigue imitar el texto y formato introducido. En la mayoría de las veces también se consigue un tipo de letra de anchura fija, la cual imita perfectamente el código de programación. Son elementos de tipo bloque.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Práctica 1</title>
</head>
<body>
<main class="main-practica1">
<div class="caja caja1"><p>Enero</p></div>
<div class="caja caja2"><p>Febrero</p></div>
<div class="caja caja3"><p>Marzo</p></div>
<div class="caja caja4"><p>Abril</p></div>
<div class="caja caja5"><p>Mayo</p></div>
<div class="caja caja6"><p>Junio</p></div>
</main>
</body>
</html>
El elemento <span>
Cuando queremos dar un formato diferente a una palabra o conjunto de palabras dentro de una entidad mayor, se utiliza el elemento <span>. Este elemento es una elemento en línea, por lo que se puede insertar perfectamente dentro de, por ejemplo, una elemento <p>.
...
<p>Esta etiqueta <span>verde</span> es ecológica.</p>
...
Esta etiqueta verde es ecológica.
A través de CSS pintaríamos de verde la palabra ‘verde’.
Citar otras fuentes <blockquote>
Este elemento se utiliza para hacer referencia a citas, artículos, párrafos o documentos que nosotros no hemos hecho. Es un elemento de bloque y tienen un atributo específico cite que incluye un enlace al original o fuente.
... <blockquote cite="https://es.wikipedia.org/wiki/"> ... </blockquote>
...
Deja una respuesta