7 tipos de código HTML que todo novato de WordPress debe conocer

Si eres nuevo en esto del diseño web, debes saber que WordPress es un gestor de contenidos (CMS), el cual, el propio administrador puede personalizar. Algo así como un DIY del diseño web. No obstante, presenta una ligera curva de aprendizaje, pero si estás dispuesto a sentarte a leer un par de tutoriales, no te debería ser demasiado difícil.

Un aspecto del que es posible que tengas que aprender un poco es sobre código HTML. Aunque suena complicado al principio, los fundamentos son bastante sencillos una vez le pillas el tranquillo. Puedes utilizarlo para personalizar tu diseño, añadir texto personalizado en tus nuevos widgets, o dar formato a blogs y páginas. Si eres nuevo en esto del código HTML, échale un vistazo a este artículo. Seguro que no te arrepentirás.

¿Qué es HTML?

HTML significa Hypertext Markup Language. Es un sistema, o "lenguaje", utilizado para dar formato a documentos digitales. El código HTML hace posible que los navegadores traduzcan texto plano sin formato en encabezados con formato, textos en negrita, párrafos, y muchas cosas más.

Las etiquetas HTML son conjuntos de palabras clave colocadas entre paréntesis angulares. La mayoría de las etiquetas vienen en pares, y luego el texto que desees formatear se coloca entre dichas etiquetas. Existe una etiqueta de inicio, que utiliza la palabra clave entre paréntesis angulares, y una etiqueta final, que es lo mismo, excepto por una barra que precede a la palabra clave.

Vamos a ver un ejemplo. La etiqueta para la cursiva comienza con el tag em y termina con /em. En el documento se vería así:

<em>Este texto está en cursiva</em> 

Cuando sea traducido por el navegador, los visitantes verán:

Este texto está en cursiva.

Ojo, no todos los tags de HTML utilizan esta estructura. Hay algunas que no tienen contenido y, por lo tanto, no necesitan la etiqueta de cierre.

Como he dicho antes, el conocer algo de HTML te puede ayudar a personalizar tu WordPress. Por ejemplo, si aparece algo extraño en la redacción de tu post, WordPress te permite alternar entre el editor visual y el editor de texto. El editor de texto muestra el contenido en formato HTML, y sabiendo algunos conceptos básicos, serás capaz de ver lo que estaba mal para poder hacerle frente.

Aquí tienes 7 tipos de códigos HTML que todos los administradores novatos de WordPress deben conocer.

Tags estructurales

Los tags estructurales dictaminan la estructura del documento, como su propio nombre indica. Es posible que veas estas etiquetas si observas el código de tu tema y tratas de editarlo. Un consejo: no intentes editar el código de tu tema a menos que sepas lo que estás haciendo. Si debes hacerlo, crear un child theme primero para que no correr riesgos, por si metemos la pata.

Es poco probable que utilices estos códigos ahora que estás empezando con WordPress, pero no está de más saber interpretarlos. Por ejemplo, si está trabajando con las herramientas de Google, es muy habitual que te pidan pegar un código en el head de tu sitio. Saber algo de HTML te ayudará a encontrar dónde colocar dicho código.

Los tags con los que debes familiarizarte son:

html: Este tag define tu documento y se debe colocar al principio y al final del mismo
head: Define la cabecera y se utiliza para la información que no aparece públicamente
title: Este tag simplemente define el título del documento, que debe ser diferente en cada página de tu sitio web
meta: Los meta tags proveen información a los navegadores, como keywords, descripciones o información sobre el copyright
body: El contenido de la página se debe encerrar en este tag. Es lo que los usuarios verán en la página.

Tags de agrupación

Los tags de agrupación sirven para agrupar texto. Como por ejemplo:

p: Define un párrafo
blockquote: Define una cita
address: Define una información de contacto
pre: Define texto preformateado

Tags de encabezado

Los tags de encabezado son un tipo de etiqueta que muestran un nivel de jerarquía para los distintos motores de búsqueda y para los usuarios. Aunque el tema de tu sitio puede dar formato a todos con diferentes fuentes y tamaños de fuente, es importante ser consciente de cómo se está utilizando cada etiqueta.

Heading 1 se utiliza para el título del documento, como el título de tu entrada en el blog. Heading 2 está destinado para la entradilla. Para las secciones dentro del artículo, se debe utilizar Heading 3. Y así sucesivamente hasta h6.

Englobando, las etiquetas serían:

h1
h2
h3
h4
h5
h6

Tags de texto

Los tags de texto se utilizan para formatear palabras dentro de los tags de agrupación, como el tag de párrafo, por ejemplo. Los más básicos son:

em: Da formato de cursiva
strong: Da formato de negrita
q: Da formato de cita
del: Muestra una línea horizontal en el texto para indicar que se ha borrado
br: Define un salto de línea dentro de un párrafo

Tags de enlace

Los tags de enlace definen donde debe aparecer un enlace y a qué página debe apuntar. Se inicia con un tag formateado de esta manera:

<a href="URL"> 

Reemplaza el texto URL con la dirección web a donde desees que apunte el enlace. No elimines las comillas.

Después hay que insertar el texto del enlace, o el texto que debe ser clicado. Y después terminamos con /a. Todo junto, sería algo similar a:

<a href="http://www.programacion.net/">Programacion.net</a> 

Tags de imagen

Los tags de imagen hacen totalmente honor a su nombre. Definen una imagen y su fuente. Estos no son tags con contenedor, lo que significa que no necesitas la etiqueta de cierre para que funcione. El tag de imagen sería una cosa tal que así:

<img src="URLDELAIMAGEN">

Solo tienes que sustituir el texto URLDELAIMAGEN con la ubicación real de la imagen que desees insertar en el documento. No elimines las comillas.

Fuente: catswhocode.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP