Hoy he traído a Jesús de estilodevidaweb.com a mi blog, que te va a hablar sobre las etiquetas HTML básicas imprescindibles que cualquier persona con una web puede necesitar en algún momento.
Si no tienes conocimientos sobre el tema, te recomiendo que no pierdas detalle del artículo, porque es muy útil para cualquier novato en html, y no es necesario tener grandes conocimientos para hacer uso de ellas. ¡Te dejo con él!
HTML son las siglas en inglés para “Lenguaje de marcado de hipertexto”, y literalmente, eso es el código HTML, un lenguaje estándar para escritura y lectura de sitios web.
Esto, enmarcado en las pautas de programación de sitios Web. En otras palabras, es el lenguaje universal que contiene los rasgos particulares que imprimes a tu sitio.
Es posible que actualmente, y aunque no sepas nada del tema, puedas crear tu propio sitio web funcional sin escribir ni una sola línea de código. Todo gracias a los potentes gestores de contenido que existen hoy en día.
Pero a fin de cuentas, se trata de tu sitio web, y hay cosas que no puedes hacer en el gestor de contenidos, por lo que debes conocer, aunque sea un poco, cómo hacer modificaciones o encontrar errores directamente en el código HTML de tu sitio.
Código HTML en WordPress
En WordPress puedes cambiar el formato preestablecido y visualizar tu información escrita en HTML. Para ello, basta con hacer clic en la pestaña “HTML” en la parte superior derecha del editor de contenidos al lado de la pestaña “Visual”, que es la herramienta de edición directa proporcionada por el gestor de contenidos, también conocida como WYSIWYG.
Si editas tus contenidos en la forma visual, lo que verás es algo como lo siguiente (En rojo marco la pestaña de HTML):
Cuando marcas la casilla «HTML» en WordPress, el editor cambia un poco para que puedas editar directamente el código. En este ejemplo, lo que veras será algo así:
Como puedes apreciar en las imágenes, hay una gran diferencia entre la escritura libre en el formato visual en comparación al formato HTML. La cuestión es que el formato visual trae por defecto algunas cosas que puedes modificar, pero otras que no. Bien sea por el formato o por el tema de tu página.
En estos casos, puedes modificar los atributos visuales de tu página y contenidos directamente en el código HTML y añadir o cambiar los valores CSS, que son los que, a fin de cuentas, definen lo que el usuario final verá. Más adelante hablaré sobre los atributos CSS.
¿Qué son las etiquetas HTML?
Ahora bien, todo código se rige por una serie de bases. Por ejemplo, un idioma es un código, y en este sentido tenemos ciertas reglas que se aplican indistintamente de la intención del escritor.
Los signos de puntuación marcan el ritmo y la intensión, toda frase con sentido debe tener sujeto, verbo y predicado. Al comienzo de la frase abrimos con mayúscula y cerramos el párrafo con un punto final.
Así mismo funciona el código HTML, y a esas normas o reglas que indican la intención del escritor o programador se las llama Etiquetas HTML. Estas indican el formato final o ubicación del contenido al que hacen referencia.
Las etiquetas HTML se escriben entre paréntesis angulares (<>) e indican directamente el formato o intención de esa parte del contenido, tal y como una mayúscula al iniciar un texto normal.
Al finalizar la parte del contenido que se desea en ese formato, normalmente se cierra con la misma etiqueta, tal y como se cerraría un texto con un punto y aparte.
Por ejemplo, al iniciar un bloque de texto de párrafo normal usamos la etiqueta HTML <p>, y al momento de cerrar el bloque de texto, la etiqueta </p>.
Vamos a ver un ejemplo directamente en el editor. Indicada en flechas rojas, está la etiqueta para el encabezado 1, tanto la apertura como el cierre. Y en azul podemos ver la etiqueta para resaltar el texto con Negrilla, tanto la etiqueta de apertura como de cierre:
Como puedes ver resaltado en verde, a la etiqueta de párrafo inicial <p> se le agregan unas propiedades a fin de darles un formato especial. En este caso, se le indica el estilo de párrafo centrado («text-align:center;») al interior de la etiqueta inicial, y al finalizar, el párrafo se cierra normalmente con </p>.
Este es un ejemplo sencillo de cómo se aplican las propiedades a una etiqueta en particular. En todo caso, si dicho formato se desea, por ejemplo, para todos los párrafos, o para todos los títulos h1 o h2, o para todos los enlaces, etc, etc, en lugar de escribirlo dentro de las etiquetas HTML, es conveniente escribirlo aparte recurriendo al CSS.
Código CSS
CSS son las siglas en inglés para Hoja de estilo en cascada, este código facilita la vida de los programadores y programas que usan HTML para gestionar contenidos. El CSS permite crear códigos o instrucciones que funcionen para un sitio en general. Los CSS se insertan en el código de la página y establece los estilos que se usarán en todo el sitio.
Por ejemplo, con los CSS se programa la fuente, tamaño, color, color de fondo y otros aspectos visuales tanto de los títulos como de los párrafos, botones, enlaces etc. Así, cada vez que coloques un elemento, este tendrá los estilos establecidos en el CSS.
La inclusión de código CSS en HTML hace que el lenguaje se simplifique y sea menos propenso a errores. Anteriormente, se establecían estos valores manualmente en cada contenido cada vez que se utilizaba un título, un párrafo, un botón o cualquier otro elemento. Obviamente, esto resultaba engorroso, tanto para programadores como al momento de buscar un error o editar una pieza del código.
Pero continuemos con el tema de esta entrada, solo dimos un vistazo a lo que es CSS para evitar dolores de cabeza de principiante.
Etiquetas HTML básicas para la edición de contenidos
Atendiendo al objetivo de este escrito, te explicaré cuáles son las principales etiquetas HTML que más se usan al momento de editar el código.
Etiquetas HTML estructurales
Este tipo de etiqueta pertenece al tema o estructura misma del sitio. ¡Cuidado! esto no lo debes editar bajo ningún concepto, a menos que tengas conocimientos avanzados al respecto.
Los menciono porque en algunos productos o servicios web te pueden pedir que pegues partes de código en la estructura y debes familiarizarte con las etiquetas básicas de la misma.
<html> y <head>: estas etiquetas pertenecen al cuerpo mismo del contenido, html indica la existencia de un documento y la etiqueta head contiene toda la información privada relacionada al documento.
<title> y <meta>: estas indican el título del texto y las meta-descripciones que agregas a tu entrada como palabras clave, etiquetas etc. La etiqueta title es muy importante para optimizar el SEO de tu web. Puedes leer más info sobre esta etiqueta en este post.
<body>: esta etiqueta indica el inicio de cada entrada. Este es el contenido destinado a los usuarios finales.
Etiquetas HTML de título
Las etiquetas de título son las que indican el orden lógico del texto, tanto visualmente para los usuarios, y más importante aún, para los motores de búsqueda. Los títulos y subtítulos son la estructura lógica del contenido y se agrupan con las etiquetas <h1> <h2> <h3> <h4> <h5> <h6>
Estas etiquetas dejan claro a los motores de búsqueda cuál es la temática central y cuáles son los temas que se trataran alrededor de ese tema central o palabra clave.
Etiquetas HTML de bloque
Las Etiquetas HTML de bloque son aquellas destinadas a indicar el tipo de texto que se está insertando en la entrada. Además, contiene información del CSS.
<p>: Esta etiqueta indica el inicio de un párrafo estándar.
<pre>: Esta etiqueta indica el texto preformateado, este aparece en la forma visual de edición en la pestaña de opciones de título.
<blockquote>: Esta etiqueta indica el clásico formato de cita, con las comillas, variación en el tamaño, fuente y alineación según indicaciones.
<address>: Define cuál es tu información de contacto, esto es especialmente relevante de cara a los buscadores.
Etiquetas HTML de formato de texto
Una vez asignados lo valores o etiquetas HTML propias del bloque de texto, podemos necesitar hacer ajustes al interior del mismo, las etiquetas de formato de texto son aquellas que nos ayudan a darle formato a secciones especificas del texto.
<strong>: Esta etiqueta es usada para resaltar en negrilla secciones o palabras especificas del texto.
<q>: Gracias a esta etiqueta podemos dar formato de cita a una frase o palabra. La diferencia con la etiqueta HTML <blockquote> es que esta es para dar formato a todo un párrafo y diferenciarlo del bloque de texto, mientras que la etiqueta <q> se usa para citar al interior de un párrafo estándar o de otro tipo sin alterar el mismo.
<em>: Esta etiqueta da formato de cursiva al texto que se indique.
<Del>: Esta etiqueta de formato de texto se usa para subrayar un texto como si se eliminara del texto base, pero sin eliminarlo realmente.
<br>: Esta etiqueta marca un salto de línea simple en el flujo del texto. (Si estás editando el código HTML en WordPress, no es necesario usarla, simplemente basta con pulsar la tecla enter como si editaras texto normal y sigues escribiendo).
<Ins>: Esta etiqueta indica un cambio en el texto base, se añade información de la fecha del cambio.
Etiquetas HTML de enlace
Al momento de querer añadir un enlace por medio del código, se usa una etiqueta HTML como esta: <a href=»URL»>. Y posteriormente, colocas el texto que verá el usuario con el link. Sería algo así:
<a href=»https://estilodevidaweb.com»>Enlace a la pagina</a>.
Y se vería simplemente así para los usuarios: Enlace a la página.
Etiquetas HTML de imagen
Para usar una imagen en el contenido desde el código se usa la etiqueta <img> y se indica cual es la ubicación real de la imagen y su respectiva metadescripción. Así:
<img src=”url de la imagen” alt=”Metadescripción de la imagen”/>
Como puedes ver, esta etiqueta HTML contiene en sí misma el símbolo / que indica el cierre de la etiqueta. Es decir, no es necesario añadir una etiqueta </img> para cerrarla.
Cómo funcionan las etiquetas HTML en WordPress
Es momento de mirar un poco cómo funciona la edición de código con etiquetas básicas de HTML en WordPress. Para empezar, debemos tener en cuenta que hablaremos de la edición de un contenido en WordPress (es decir, una página o un post), no de la edición de un sitio como tal.
WordPress facilita la vida poniendo “Accesos de escritura rápida” para evitar que tengamos que hacerlo de forma manual.
Como se puede apreciar en la imagen, hay una barra de etiquetas que sirven para agregar las etiquetas de manera automática. Por ejemplo, vemos marcado en rojo las dos formas de trabajar con la etiqueta de imagen que ofrece el editor HTML de WordPress (resaltado en rosa en la imagen)
El botón donde dice “Añadir objeto” sirve para agregar objetos previamente subidos a la biblioteca. Mientras que el botón “IMG” se puede usar para usar imágenes desde otras ubicaciones.
En la imagen también podemos ver marcado en azul el botón “b”, que es el equivalente a la etiqueta <strong> usada para cambiar la letra a negrilla. Y marcado en verde está el botón “link”, que al presionarlo, nos envía al mismo cuadro de diálogo en el que editamos los enlaces en el modo visual.
Puedes explorar cada uno de los botones de etiquetas HTML que facilita WordPress para que te familiarices un poco más con los códigos HTML. Otro ejercicio útil es editar tus archivos en modo visual y luego verlos en HTML para observar un poco mejor el comportamiento de las etiquetas y atributos de las mismas que se agregan en la base inicial del código.
