Hoy quiero hablarte de las etiquetas HTML. Voy a enseñarte las principales funciones de un texto, además de cómo puedes maquetarlo usando este código. ¡Vamos a ello!
La estructura de un texto con código HTML
HTML es el acrónimo de HiperText Markup Language. No es complicado escribir un texto utilizando este método, que está basado en el uso de etiquetas cuya finalidad es indicarle al navegador las diferentes funciones que quieres desarrollar.
Todas las etiquetas tienen un comienzo y un fin, y están delimitadas por estos signos: <>. Se hace así para que el navegador interprete la orden que va dentro de cada etiqueta sin que esto se vea en la pantalla desde donde los internautas estamos leyendo el contenido.
La estructura básica de cualquier texto que escribes, esto es, el comienzo, el título, el contenido del texto y el final es así:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- El principio y fin lleva estas etiquetas: <html></html>. Entre medias de ellas está todo el contenido de tu texto.
- Dentro de la etiqueta <head></head> van las propiedades y contenidos del documento. Esto se hace a través de metaetiquetas, en especial el título. Las páginas con estas especificaciones son registradas por los rastreadores de la red.
- La etiqueta <title></title> es la que contiene el nombre que tú le has dado a tu documento. Aparece en la cabecera del documento.
Aquí tienes un ejemplo: <title>Uso de etiquetas HTML en la redacción</title>
- Por último, la etiqueta <body></body> es la que delimita todo el contenido del documento que vas a redactar.
Por tanto, estos son los tres campos principales de cualquier documento escrito en lenguaje HTML, <html>, <head> y <body>
Voy a enseñarte ahora cómo puedes componer todo el texto de tu contenido con la ayuda de las etiquetas HTML.
El cuerpo del texto y cómo componerlo con etiquetas HTML
Toda la composición de tu contenido está dentro de la etiqueta <body></body>. Es ahí donde va escrito todo un artículo, página o cualquier contenido que vayas a publicar en la red.
Puedes darle formato de todo tipo, desde el tamaño de la letra, la tipología, el color. Incluso puedes determinar el color del fondo del texto.
Lo único que no te deja hacer de forma directa es la escritura de los acentos, letras como la “ñ” o la “ç”, además de letras de otros alfabetos como el griego, por ejemplo.
Cualquier color, tamaño, tipo y estilo diferentes a los que te muestra por defecto el procesador de textos en modo HTML, tienes que indicarlo mediante etiquetas.
Voy a enseñarte cómo se hace:
Tipo de letra
Ya sabes que el navegador trae un tipo de letra por defecto. Imagina que quieres poner la letra Times New Roman. Debes indicárselo al navegador con esta etiqueta:
<font face=”Times New Roman”> Este es el resultado del texto </font>
Tamaño de la letra
Lo mismo ocurre si quieres cambiar el tamaño del texto. Esta es la etiqueta que debes indicarle al navegador:
<font size=»+1″></font>
Utiliza la simbología “+1” para hacer el texto algo más grande, y “-1” si quieres que se haga más pequeño.
Color de la letra
Cuando quieres que la letra de tu texto esté de un color diferente al que viene por defecto en tu navegador, también tienes que decírselo a través de una etiqueta, así:
<font color=»red»>el texto quedará en color red</font>
El navegador sólo entiende las órdenes en inglés; si quieres que tu texto sea azul deberás decírselo “blue”. Siempre entre “” para que haga una interpretación correcta.
Ahora imagina que quieres que tu texto esté con la letra tipo Arial, en tamaño grande y en color verde. No hace falta que hagas una etiqueta para cada indicación. Puedes hacerlo en una sola etiqueta, así:
<font color=»green» size=»+1″ face=»Arial»>pon aqui tu texto</font>
El estilo de letra
Cuando quieres resaltar un texto en negrita, cursiva o necesitas subrayar alguna parte de tu contenido, también debes hacerlo con una etiqueta:
<i></i> para cursiva
<b></b> para negrita
<u></u> para subrayado
Cuando escribas un signo de puntuación detrás de una palabra que lleva formato, por ejemplo una coma, un punto o un punto y coma, te aconsejo que también incluyas este signo dentro de la etiqueta. Si no lo haces quedará un espacio entre la palabra y la coma.
Los acentos, la diéresis y la letra ñ
Cuando estás escribiendo con código HTML no puedes utilizar acentos ni tampoco hay cabida para la letra ñ o la diéresis. Sin embargo, sí que existen etiquetas para que el navegador lo interprete y lo ponga como tú quieres que quede.
- Los acentos llevan el comando &(letra sobre la que quieres poner el acento)acute; Seguro que con estos ejemplos me entenderás perfectamente:
- Quiero acentuar la palabra geología: geología
- Y otro ejemplo, la palabra sábana: sábana
- Si tienes que escribir una palabra con diéresis, por ejemplo pingüino, la secuencia es esta: pingüino. El comando que pone la diéresis es &(letra)uml;
- Nuestra letra ñ lleva este comando: ñ Por ejemplo, la palabra teñir se escribe teñir
Algunos signos especiales
Aquí te dejo la secuencia que debes escribir en código HTML si quieres utilizar algunos signos de ortografía especiales:
- ¿: ¿ o bien ¿
- ¡: ¡ o bien ¡
- ~: ~
- <: <
La gran mayoría de los signos de ortografía puedes escribirlos directamente. Pero los que te he puesto más arriba llevan esa codificación especial.
La maquetación del texto
El texto que tu escribes en lenguaje HTML no tiene ninguna estructura. Si quieres hacer un punto y seguido, centrar o justificar una parte del texto, o hacer un listado, también debes indicarlo a través de etiquetas.
Aquí te dejo las etiquetas de la maquetación más habitual:
- Espacio en blanco: cuando quieres separar tus párrafos con un espacio en blanco debes poner la etiqueta Por supuesto, puedes utilizarlo tantas veces como espacios quieras dejar.
- Final de línea: <br>
- Párrafo: el comienzo y el fin de un párrafo lleva estas etiquetas <p></p>
- Texto sangrado: cuando quieres aumentar la sangría en un texto utiliza estas etiquetas <blockquote></blockquote> Úsalo tantas veces como necesites avanzar la sangría de tu texto.
- Texto justificado: tienes dos opciones
- <p align=»justify»></p> para un texto que tú selecciones
- <div align=»justify»></div> para todo el párrafo
- Alineación del texto a la derecha: ocurre igual que con el texto justificado
- <p align=»right»></p> para el texto que selecciones
- <div align=»right»></div> para todo el párrafo
- Texto centrado: <center></center>
- Títulos y subtítulos: ya sabes que algo muy positivo a nivel SEO es la jerarquización de los textos que escribes. Los subtítulos te ayudan a organizar tus contenidos, y eso Google también lo valora mucho.
En función del subnivel que necesites, utiliza esta etiqueta <h1></h1> para el encabezado, <h2></h2> para un título principal dentro de tu contenido y <h3></h3> para los subtítulos. Puedes llegar hasta el subnivel 6.
- Listas: usa la etiqueta <ol></ol> en el conjunto de la lista y <li> para cada bullet point de tu lista.
¿Te animas a escribir tu próximo contenido utilizando lenguaje HTML?, te aseguro que es bastante más sencillo de lo que parece, ¡Cuéntanos!