Curso HTML #05 – Insertar Títulos y Párrafos (y formatos de párrafos)

En un documento HTML, podemos insertar artículos, los cuales estén formados por títulos y párrafos de texto (en los cuales podemos insertar imágenes, enlaces, tablas, listas, etc..). Contenido que, además, podemos formatear, de manera que el texto pueda tener un formato en especifico.

En esta lección lo que te explicaré es como definir esos artículos, cómo insertar párrafos con texto y algunas etiquetas para estructurar este texto. Posteriormente ya hablaremos de como darle formato. Pero claro… primero es importante saber estructurarlo.

Artículos

En primer lugar, tenemos que saber que podemos insertar artículos en los documentos HTML, con la etiqueta “article“, y dentro de ella definir un contenido, formado por títulos y párrafos. Aunque no es necesario utilizar esta etiqueta para poder insertar texto, pero debes saber que existen. Cuando insertamos un artículo, este se escribe así:

<article>
   Texto del articulo, como títulos, texto, ¡y cualquier otra cosa!
</article>

Es como una manera de agrupar nuestro contenido.

Títulos y Subtítulos

Dentro de estos artículos podemos insertar títulos. En HTML hay seis títulos diferentes. Según la importancia que le quieras dar a un título, este será uno u otro.

Las etiquetas para insertar títulos son: “h1″, “h2″, “h3″, “h4″, “h5″ y “h6″. Siendo el primero el título de mayor importancia y el ultimo el de menor importancia. Por defecto, el de mayor importancia suele representarse por el navegador con el texto más grande, a medida que se reduce esta, el tamaño disminuye, siendo el ultimo el título con el tamaño de letra más pequeño.

Podemos insertar un título y un subtítulo de la siguiente manera:

<h1>Título Principal</h1>
<h2>Título Secundario</h2>

Párrafos y Divisores

En HTML podemos insertar párrafos, los cuales son útiles para dividir el texto en varias partes, y por lo tanto, para agrupar el texto. ¡Es importante tenerlo todo ordenado!

Para ello, se utiliza la etiqueta “p” y dentro de ella el texto y cualquier otro recurso, como imágenes, listas, tablas, enlaces, etc.

<p>
   Yo soy un párrafo.
</p>

En principio, los párrafos ya se muestran divididos con cierto espacio entre uno y otro. Aún así, también puedes insertar lineas horizontales entre ellos, utilizando la etiqueta “hr” (horizontal rule).

<p>
   Yo soy un párrafo.
</p>
<hr>
<p>
 Yo soy otro párrafo.
</p>

Citaciones

A parte de insertar párrafos (dentro de los artículos), también podemos utilizar otro tipo de recursos, así como citaciones, las cuales es un tipo de párrafo preformateado, y muy útil si queremos escribir una cita (frase o citación).

En cuanto a las citaciones, podemos utilizar la etiqueta “blockquote” o “q” para escribir el texto de la cita, y “cite” para definir el autor de la misma.

<blockquote>
   Aquí va el texto de la cita
<blockquote>
<cite>Y aquí el autor, por ejemplo: Karla Pérez</cite>

También se puede utilizar la etiqueta “q” en lugar de “blockquote“, y la etiqueta “cite” puede estar también al principio.

<cite>Y aquí el autor, por ejemplo: Karla Pérez</cite>
<q>
 Aquí va el texto de la cita
<q>

Cuadros de Texto

También mencionar los cuadros de texto, los cuales, básicamente se trata de un párrafo el cual, por defecto, está mostrado dentro de un rectángulo. Para ello, en lugar de utilizar la etiqueta “p“, utilizaríamos “fieldset“. El cual, se mostraría como un rectángulo con texto dentro.

<fieldset>
   Texto del recuadro...
</fieldset>

También podemos insertar un título a ese recuadro (o leyenda), utilizando la etiqueta “legend” justo cuando empieza el contenido de “fieldset“. Así:

<fieldset>
   <legend>Título</legend>
   Texto del recuadro...
</fieldset>

Códigos

Y por último mencionar una última etiqueta, que nos permite insertar un párrafo con el texto monoespaciado, el cual es útil si queremos mostrar algún texto que represente un código (como estoy haciendo yo en este artículo, con los ejemplos).

Para ello utilizamos la etiqueta “code” y dentro de ella el texto:

<code>
   Código, o cualquier otro texto, el cual se mostrará monoespaciado.
</code>

Títulos y SEO

El “h1” es el elemento más importante, ya que es uno de los elementos que son analizados primero por los motores de búsqueda. En una página web, lo recomendado es que haya un solo “h1” en el documento.

Entonces, el “h1” lo colocas según lo que quieras resaltar primero, mientras que “h2” lo colocas en algo que también es importante pero no tanto. Yo en el vídeo he colocado “h1” para definir el título de la página: “La Web de Karla”, y los “h2” los estoy colocando en el título de los artículos.

Si tu documento tiene varios artículos/posts, lo recomendado es hacerlo tal como he hecho en el vídeo, colocando el “h1” en el encabezado, y los “h2” como título de los artículos.

En cambio, si se tratase de un documento dónde sólo haya un solo artículo, entonces es mejor colocar un elemento “p” (de párrafo) para el título de la página, y “h1” para el título del artículo para resaltarlo, ya que en este caso, es más importante el título del artículo que el título de la página.

Sería lógico pensar que lo normal sería colocar un “h1” como título de cada artículo/post, aunque en el documento haya varios artículos, pero se recomienda utilizar un solo “h1” en todo el documento, para que los motores de búsqueda le den importancia a un sólo título, además, a don Google le gustan más las páginas con un sólo título principal y que no haya varios. Para eso está el “h2”.

Conclusión

Como habéis podido ver, hay varias etiquetas de bloque para crear artículos, títulos y párrafos, y, además, hay varias etiquetas para darle un formato predefinido al texto, como estas últimas que acabamos de ver.

Cabe destacar que este formato predefinido que la asigna el navegador, se puede cambiar con CSS. Así como los colores, bordes, estilo de letra o la sombra de la misma.

Aunque más adelante ya veremos más etiquetas, para darle color al texto, cambiar su tamaño, alineación, etc.

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.