ETIQUETAS HTML
Yolanda Catalina Navarrete beas
20 DE SEPTIEMBRE DE 2018
GIOVANNI ESTRADA BUSTOS
[email protected]
<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.
