Conocimientos básicos de HTML.

Y Olaf dijo a su tribu: Aquel que tenga unos conocimientos básicos de HTML, alcanzará la cumbre del SEO.

Notable afirmación teniendo en cuenta que Olaf era un vikingo del siglo IX.

Dicho de otra manera, HTML y SEO son parientes cercanos: conociendo uno, se sabe el otro.

Por ello, vas a ver unas nociones muy básicas de HTML. Eso te ayudará a entender el SEO mucho mejor.

¿Qué es el HTML?

HTML es un lenguaje de programación para crear páginas web.

El contenido de una web se encuentra en el HTML.

Ve a cualquier página web (para este ejemplo vamos a la página Únete Gratis a la Tribu Olaf) y haz clic en el botón derecho del ratón:

cómo ver el código fuente de una página web

Usando Google Chrome, verás la opción "Ver código fuente de la página". Y obtendrás algo así:

código fuente de una página web

Ya. Da igual que no lo entiendas...

No es difícil pero por ahora solo quiero que entiendas que todo el contenido bonito de la primera foto de arriba está, en forma de código, en la segunda foto.

Dicho de otra manera: el código HTML nos da el resultado bonito que nosotros, los humanos, podemos leer cómodamente.

Toda esa ristra de código es, sobre todo, HTML con alguna cosa más.

Repetimos: el contenido de una web se encuentra en el código HTML.

Mientras que todo lo que contiene una web está en el HTML, los estilos están en el CSS. Una vez que se tiene el contenido (texto, fotos, vídeos) en el HTML, ese contenido se puede hacer bonito con otro lenguaje llamado CSS.

¿Qué es el CSS?

El CSS es un lenguaje de programación web que permite dar estilos al contenido HTML de una página web. Más que lenguaje de programación en toda regla, se puede decir que el CSS son hojas de estilos.

Por ejemplo, puedo escribir la palabra playa como playa, playa o playa.

El contenido es el mismo para todas ellas: playa. Sin embargo, los estilos son distintos para cada una de ellas.

Eso es el CSS.

La representación visual del contenido se puede hacer más acorde al gusto de la marca modificando los estilos, y eso se hace usando CSS (Cascading Styling Sheet).

Hubo un tiempo en el que las páginas web contenían únicamente HTML y los estilos se hacían directamente dentro del HTML, en lo que se llama estilos en línea. El primer navegador que soportaba completamente la primera versión de CSS, CSS 1, fue el Internet Explorer 5 para Mac en el año 2000, casi diez años después de la primera versión de HTML.

Entonces el mundo en la web era muy distinto, con páginas como esta de Iberia del 19 de diciembre de 1996... Oh yeah!

pagina web de Iberia en 1996

La web era entonces un entorno más ingenuo, como cuando Olaf, de niño, correteaba por los bosques de Gotland buscando ardillas y nomeolvides.

Los dos pilares del lenguaje HTML

El lenguaje HTML se fundamenta en dos pilares:.

  1. Etiquetas
  2. Elementos

Las etiquetas (o tags) son las componentes más pequeñas o esenciales del HTML.

Por ejemplo, si quiero poner “Hola” en una página web, el código HTML para ese texto sería:

<p>Hola</p>

<p> es la etiqueta para definir un párrafo.

<p> es la etiqueta que abre el párrafo y </p> es la etiqueta que cierra el párrafo. Lo queda entre el <p> inicial y el </p> final es el texto que el usuario verá en esta muy sencilla página web:

Hola

Al conjunto <p>Hola</p> se le denomina Elemento.

Un elemento está casi compuesto por al menos dos etiquetas (la que abre y la que cierra) y el conteniendo es lo que se encuentra entre esas dos etiquetas.

. . .

Etiquetas HTML esenciales para el SEO

Una vez sabes cómo funciona el lenguaje HTML y cuales son sus dos pilares básicos, es fácil llegar al mundo SEO: solo tenemos que aislar las etiquetas HTML más importantes para el SEO. Y no son muchas. ¡Bien Olaf! ¡Una otra serveza pol favó!

Las etiquetas HTML esenciales para entender el SEO son:

  1. <title>: es el título de la página. No confundir con <h1>. El <title> es el texto que aparece en la pestaña de la ventana del navegador.
  2. <description>: es texto que describe qué contenido tiene esa página web. El usuario no ve este texto. La <description> es el texto que aparece justo debajo del enlace del resultado cuando se hace una búsqueda de Google.
  3. <h1>: encabezado principal de una página. Este es el encabezado que se ve en el contenido de una web. Es, normalmente, el título principal de una página web: está situado en la parte superior de la página y suele tener un tamaño de letra mayor que el resto del texto. Por ejemplo, el <h1> de esta página es lo primero que ves en la página: "Conocimientos básicos de HTML".
  4. <p>: es el texto de la página. Todo este texto que lees está dentro de una <p>. De especial importante son los primeros <p> de una página: ellos deben incluir las palabras clave.

En el artículo SEO on page nos metemos más a fondo con estas (y otras) etiquetas.

OLAF ES SOCIABLE

Siguiente: SEO en página >