Etiquetas para HTML
Las etiquetas HTML son la base de este lenguaje de programación ya casi «ancestral»,
pero que sigue siendo el trasfondo de muchos otros más avanzados.
HTML significa HyperText Mark Language, pero no he venido hoy a dar una clase de
programación, sino a que conozcas lo mínimo imprescindible sobre este lenguaje de
programación para aprovecharlo dentro de tu blog WordPress.
NO TE ASUSTES por el inicio del post más técnico y general, sigue que al final tienes
un ejercico práctico donde verás a lo que voy con todo esto
Etiquetas HTML, lo que necesitas saber sobre ellas
Una etiqueta HTML es (para los más novatos en esto) aquello que vemos entre
corchetes angulares en el código de nuestra web, por ejemplo: <H1> (Encabezado
principal)
Casi todas las etiquetas deben «encerrar» el contenido al que afecta, aunque no son
el 100% de los casos, como por ejemplo: <br /> (Salto de línea)
Estructura básica de un documento HTML
Lo vemos por encima, porque lo importante en este post son las utilidades concretas de
algunas etiquetas HTML para tu WordPress, pero básicamente esto es:
<html> (Abrimos el documento)
<head> (Abrimos el head)
En la cabecera o «head» se inserta todo lo referente al title, styles vinculados, scripts, etc.
</head> (Cerramos el head)
<body> (Abrimos el body)
En el cuerpo del documento o «body», es donde va el contenido general, el grueso de la
página.
</body> (Cerramos el body)
</html> (Cerramos el documento)
Vale, esto es «el árbol» o estructura básica. Qué ocurre, que si vamos a la
práctica nuestro WordPress está basado en lenguaje PHP, el cual aunque a su vez
está basado y utiliza HTML, nos complica un poco las cosas.
Nuestro WordPress no son una serie de páginas HTML estáticas, sino que utilizan
PHP precisamente para cargar de forma dinámica distintos contenidos dentro de
ella, basándose en archivos PHP del tipo index.php, header.php, page.php,
footer.php,… y muchos otros.
El funcionamiento de todo eso lo explicaré al detalle en el curso de WordPress.org que
estoy preparando desde hace un tiempo, pero como decía hoy sólo quiero centrarme
en el uso práctico de algunas etiquetas HTML en concreto.
Las etiquetas HTML más relevantes
<title>: para definir el titulo de una página. Importantisimo para el SEO.
<link> y <style>: ambas van dentro del <head>, y sirven para aplicar estilos CSS a
nuestro documento. Con <link> vinculamos de forma externa un archivo.css, y con
<style> podemos escribir directamente código CSS dentro del head.
<h1>, <h2>, <h3>….<h6>: encabezados, numerados del 1 al 6 por orden
de RELEVANCIA.
El uso de estos encabezados es determinante para el SEO, porque es la mejor forma que
tienen Google de entender la estructura de nuestro contenido y poder saber qué es lo
relevante.
Un pequeño tip: no se te ocurra, meter dos o más encabezados <h1>. Lo mejor, es
poner sólo uno y que contenta tu keyword, y luego estructurar el contenido de forma
coherente con <h2> y <h3>, incluyendo en ello la keyword y variantes, no siempre la
misma exactamente.
<table>, <tr> y <td>: son las tablas, las filas y las celdas. Están un poco obsoletas
aunque a veces me han sacado de un apuro.
<div>: es un elemento «contendedor» de otras cosas. Realmente es lo que más se usa.
Sabiendo manejar un <div style=»loquenecesites»>contenido</div> puedes hacer casi
todo. Podrás ver un ejemplo práctico al final del post.
<a>: para añadir enlaces. Dentro de ella tendremos dos atributos importantes, que son:
href=»indica_la_URL_o_RUTA» y target=»self o _blank», según quieras que el enlace se
abra en la misma página o en una pestaña nueva.
<img> es la etiqueta con la que se insertan las imágenes. Este es uno de los pocos
casos que no necesita etiqueta de cierre, sino que vale con: <img src=»rutadelaimagen»
alt=»textoalternativo» />, sin poner </img>
<li>, <ol>, <ul>: son las etiquetas que controlan las listas ordenadas y desordenadas.
Ejemplo:
Estos circulos son de listas desordenadas, usando la etiqueta <ul>
1. Este número sale porque utilizo una lista ordenada, con <ol>
2. Cada elemento o item de una u otra lista, se controla medianta <li>
<b>: convierte el texto a negrita. Tambien os podéis encontrar con el antiguo <strong>
que hace lo mismo.
<i>: lo mismo pero para aplicar cursiva al formato de un texto. Ejemplos: esto irá en
<b>negrita</b> y este otro texto en <i>cursiva</i>
<p>: con esta etiqueta determinamos un texto de párrafo. Se le aplican estilos como a
todas, el dato relevante de esta etiqueta sería explicar el hecho de que añade un salto de
línea y otro más al cerrarla con </p>, como si diéramos dos veces al «intro», para que me
entiendas.
<br />: esta otra etiqueta sin embargo, hace un salto de línea simple. Es decir, lo que
venga después de esto irá justo en la linea siguiente, pero sin dar otro espacio más. Mira
la diferencia:
«Escribo un texto normal y la siguiente linea la escribo después del cierre de un </p>
Esta es la siguiente linea cerrando con esa etiqueta <p>.»
«Ahora escribo una linea pero hago un salto de linea simple con <br />
Esta es la siguiente linea despues de usar el <br />, ¿se nota diferencia del espacio de
una y otra?»
IMPORTANTE: todas estas etiquetas html puedes verlas al esribir un post en la pestaña
de «TEXTO», no es la de «VISUAL». Si lo haces en visual, se escribe la etiqueta como
un texto normal (tal y como estoy haciendo yo en este post), pero si quieres
modificarlas debe ser en la pestaña texto, donde luego no aparecen en visual pero sí
están cumpliendo su función.
Aplicación de CSS sobre dichas etiquetas
Bien, no será en este post sino en otro que haré pronto, donde te explique los atributos
de CSS básico más importantes para aplicar a estas etiquetas html.
Pero quiero hacer un ejemplo práctico, para que veas el verdadero potencial que tiene
conocer esto mínimamente y la razón por la cual he escrito este post.
Hace poco escribí sobre un plugin para insertar los famosos widgets de texto html pero
con un editor. Esto está genial, porque si no sabes html en dichos widgets poco más que
puedes escribir un texto plano y ya está.
Ahora bien, sabiendo un poco de html y css puedes hacer muchas cosas en cualquier
parte de tu blog.
Vamos con el ejemplo práctico:
Imagina que quieres poner en tus posts, la típica «frase resaltada», de esas que son
más importantes y quieres que se vea más grande y entre comillas.
Bien, si no se nada de etiquetas html, será complicado, o como mucho puedo optar por
poner dicha frase con un <h3>, por ejemplo. Pero no estaríamos haciendo lo correcto, e
igualmente solo tendríamos el texto un poco más grande.
¿Solución? Se me ocurre utilizar un <div> (recuerda, un contenedor), al cual mediante
CSS básico le voy a aplicar: un color de fondo azul oscuro, un borde, unas esquinas
redondeadas, y respecto al texto le voy a decir que sea 1,4 veces más grande que el
texto de párrafo normal, centrado y que vaya todo en negrita y en blanco. Vamós allá:
«Esta es la frase dentro de un <div> que me interesa resaltar»
Y el código utilizado para conseguir esto:
<div style=»background-color: blue; text-align: center; color: white; font-weight: bold; font-
size: 1.4em; border: 2px solid black; border-radius: 6px; padding: 10px;»>»Esta es la
frase dentro de un div que me interesa resaltar»</div>
