Textos y sus etiquetas 1


Basándonos en el ejemplo de nuestra primera página web lo transformáremos en una página para felicitar a un amigo por su cumpleaños.

El contenido principal de una página web (en la mayoría de los casos) es el texto.

Algunas etiquetas con las que podemos y debemos trabajar son: <br>, <p>, <h1…h6>, <hr>, <em>, etc.

Veamos el siguiente ejemplo:

Ver página

Notemos que la etiqueta <h1> nos da un tipo de título pre formateado,  la etiqueta <hr> nos sirve para colocar una línea divisoria.

Par colocar textos en negritas tenemos múltiples alternativas como las etiquetas <b>, <strong>, pero según estándares de html debemos de usar <b> solo cuando no nos sea posible usar alguna otra alternativa. Además de que el texto entre etiquetas <strong>…</strong> es considerado como “texto importante”

Otro caso en donde contamos con múltiples alternativas es con las etiquetas <i>, em>. Técnicamente sirven para lo mismo (poner texto en itálicas) pero según HTML5, que busca una web más semántica,  debemos usar <em> para enfatizar un texto y <i> solo reservarlo como la última opción.

Según HTML5 el uso semántico correcto es el siguiente:

  • <em> (enfatizar texto)
  • <strong> (texto importante)
  • <mark> (texto subrayado)
  • <cite> (el título de un trabajo, hacer una cita)
  • <dfn> (una definición )

Para poder desplegar correctamente algunos caracteres es necesario tener bien establecido el tipo de codificación, en este caso trabajamos con utf-8, por lo cual es necesario que tanto en el documento HTML este declarado así como que nuestro editor también tenga establecido este tipo de codificación. En caso de que las codificaciones no sean las correctas veremos caracteres raros o signos de interrogación en lugar de lo que queremos mostrar.

codificacion notepad++

Otra alternativa es usar palabras reservadas de html para mostrar estos, ejemplos: &aacute; (muestra una á), &nbsp; (muestra un espacio en blanco)

{lang: 'es'}

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Una idea sobre “Textos y sus etiquetas