Estilos en HTML

Definir párrafos con la etiqueta <p>

Este elemento, cuya nomenclatura proviene del inglés "paragraph" ("párrafo") es necesario para crear separaciones por párrafos. Con la etiqueta de inicio <p> se marca dónde comienza el párrafo y con el de cierre </p> dónde acaba. El texto se escribe entre estas dos etiquetas.

En todas las versiones de HTML, excepto en XHTML, el tag de cierre es opcional, aunque conviene acostumbrarse a usarlo no solo durante el aprendizaje sino también porque denota un buen estilo.

Puedes probar a marcar párrafos con la etiqueta <p> en tu página de prueba, añadiendo otra frase ("This is the second paragraph of my first webpage" en este ejemplo o "Este es el segundo párrafo de mi primera página web") a aquella primera y marcándolas con la etiqueta, por ejemplo, así:

<p>This is my


first webpage!</p>
<p>This is the second paragraph of my first webpage.</p>

Nota: en realidad no sería necesario separar las frases como hemos hecho aquí, ya que al navegador, que solo es capaz de interpretar las etiquetas, poco le importa cómo lo leamos nosotros. Si se ha escrito así es meramente por una mejor visualización.

Este sería el resultado en la ventana del explorador:

Añadir títulos y subtítulos con la etiqueta <h>

Los títulos también se cuentan entre los elementos básicos de un texto bien estructurado. Gracias a los marcadores estructurales no solo puedes señalar un título como tal sino que también tienes la posibilidad de crear una jerarquía de títulos principales y secundarios. Para ello cuentas con las etiquetas <h1> hasta <h6>, aunque <h1> representa el titular principal de cada subpágina y solo habría que usarlo una única vez, al contrario que todos los demás a partir de <h2>.

Aquí, es importante mantener la jerarquía correcta y no utilizar los diferentes niveles al azar para que tanto el lector como el buscador puedan entender la estructura del texto a partir de los diferentes títulos.

Para añadirle a esta primera página de prueba un título principal y un título secundario puedes utilizar los siguientes comandos:

<h1>Main heading: my first webpage</h1>
<p>This is my


first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>

Nota: al tratarse de un documento HTML muy sencillo sin metadatos, algunos navegadores, como Firefox, no muestran los acentos o caracteres especiales de forma correcta. Para este test sería recomendable utilizar Google Chrome o traducirlos a entidades HTML.

En el explorador se verá de la siguiente manera:

Destacar palabras o fragmentos de texto: <i>, <em>, <b> y <strong>

Entre los elementos básicos de formato de HTML se encuentran también aquellas etiquetas que permiten destacar de alguna forma tanto palabras aisladas como frases o fragmentos de texto, con la finalidad de dirigir el foco de atención del lector a elementos clave de contenido o funcionales y ayudarle a percibirlos. Para acentuar frases, expresiones técnicas, citas o reflexiones en cursiva podemos utilizar las etiquetas <i> (itálica) y <em> (énfasis). No obstante, conviene utilizar con prudencia la cursiva, ya que frena la lectura. Más importantes son, sin embargo, los elementos <b> (negrita) y <strong> (énfasis fuerte), que destacan en negrita aunque con diferencias en cuanto a su utilización. La etiqueta <b> debería utilizarse para marcar aquellos elementos sobre los que se ha de llamar especialmente la atención del usuario, mientras que <strong> está prevista para destacar contenido relevante.

Lo veremos ampliando nuestra página de prueba con algunas etiquetas de formato:

<h1>Main heading: <i>my first webpage</i></h1>>This is my<strong>first</strong>first webpage!</p>
<h2>Second heading</h2>




>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>:Typical example for the<b>-tag.</p>

Nota: para que el ejemplo de código HTML del pasaje añadido no se muestre como texto plano hemos traducido los corchetes (< y >) como entidades HTML (&lt; y &gt;). Hay que seguir teniendo en cuenta los acentos y otros caracteres especiales.

Crear listas con las etiquetas <ul>, <ol> y <li>

No solo a la hora de hacer la compra recurrimos a las listas. También en la edición de textos se revelan como un medio muy útil para descongestionar párrafos y optimizar la lectura. Con HTML se pueden crear listas con o sin numeración (con viñetas o puntos) con las etiquetas <ol> ("ordered list"=lista ordenada) o <ul> ("unordered list"=lista desordenada) respectivamente. Para definir los puntos de la lista se utiliza <li>, que solo se puede usar si se combina con las dos etiquetas de listado mencionadas.

Ahora podrás probarlo en tu página de prueba:

<ul>
  <li>first unordered-list item</li>
  <li>second unordered-list item</li>>third unordered-list item</li>
</ul>

Nota: recuerda que puedes escribir el texto que prefieras. En este caso la elección del inglés como idioma de los ejemplos solo tiene motivos editoriales.

El resultado debería parecerse a esto:

Si, por el contrario, quieres crear una lista numerada solo hay que cambiar la etiqueta que define el tipo de lista y marcarla como lista ordenada con <ol>:

Como consecuencia, en lugar de las viñetas aparece una lista numerada: