Etiquetas HTML
Etiquetas HTML
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?”
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 expliquelos 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.
Referencia: https://www.haciaelautoempleo.com/etiquetas-html-basicas/
Autor: Omar de la Fuente.
Comentarios
Publicar un comentario