Las etiquetas HTML son la base de este lenguaje de marcado 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 marcado 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 ejercicio 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>
- Este número sale porque utilizo una lista ordenada, con <ol>
- 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á:
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>
Esto sólo son unas pinceladas para un manejo básico y que en 10 minutos puedas entender las bases para hacer algo con ello. Si te interesa profundizar en el tema, te dejo este enlace a mi curso de HTML básico.
Lo dicho, en el próximo post te contaré cuales son esos atributos de CSS que controlan las principales características de los DIV y de los textos en general.
Y hemos llegado al final.
Si quieres, comparte en tu red social favorita este post sobre las etiquetas html básicas que todo blogger debería conocer si te ha resultado útil e interesante. ¡Gracias!
Recuerda que también puedes descargarte mi guía para crear tu web con blog y de paso llevarte acceso gratuito a tres clases de mi escuela online.
¡Un saludo!
11 comentarios en “Las etiquetas HTML básicas que todo blogger debería conocer”
Excelente artículo. A pesar de que cada día hay más herramientas para crear sitios web sin escribir una línea de código, soy de las personas que considera que siempre es importante tener un conocimiento básico de HTML. ¡Muchas gracias por la información! 💪
gracias saludos
😉 🙂
hola! soy daniela
como esta!
es que estoy diseñando una pagina web sobre las etiquetas de html en lenguaje html, y me gustaria saber como podria yo mostrar las etiquetas bien para que la persona que lo visualize
pueda aplicarlo enseguida y sea entendible con sus simbollos y todo.
bno de antemano muchas gracias
y muy buen post felicitaciones! 🙂
es para un trabajo y me gustaria mucho incursionarme en este mundo ! 🙂
Hola Daniela,
imagino que te refieres a que quieres escribir y que se lea código, y al ser HTML «se aplica» en lugar de mostrarse como texto.
Prueba a poner cada expresión de código entre comillas, suele funcionar. Y avisa de que las comillas no van, claro 😉
Un saludo.
Hola Omar, me gustaría saber como hacer con códigos html un subtítulo de un subtitulo.
Me explico, si tengo un menú llamado Fechas Especiales, me lleve aun submenú llamado Navidad y este a la vez me lleve otro submenú llamado Galletas Navidad. Muchas gracias de antemano
Los menús en Wordpress se gestionan desde «Apariencia/Menus», no mediante código HTML.
Un saludo.
Hola Omar,
Sería en un blog de blogger, gracias
Ok entonces no te sé decir, de blogger yo no manejo. Lo siento.
Omar, llevaba meses buscando un post tan útil , sencillo y fácil de entender sobre HTML como este. Qué suerte la mía el haber dado con tu blog.
Gracias por tus palabras Maqui, me alegra de verdad saber que los contenidos del blog te son útiles.
Un saludo.
Gracias! Muy bien explicado te felicito.
A mi particularmente me cuesta editar los css de las plantillas wp sobre todo por que a veces toco algo y no se actualiza y creo que es por qe habrá algún elemento superior que dice como tiene que ser y aún que yo lo cambie no funciona.
Y en HTML es más sencillo aún que también cuesta más, soy más de editores visuales.
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.