TALLER #CW17 #HTML5SEO
HTML 5 PARA SEO
by | #CW17 #HTML5SEO
"I've seen the FUTURE. It's in my
BROWSER"
jjpeleato.com
1 . 1

¡GRACIAS Y BIENVENID@S!
Mi nombre es José Javier Peleato Pradel
Actualmente trabajo como desarrollador FullStack
WordPress y colaboro en la organización de la
comunidad WordPress Zaragoza
by | #CW17 #HTML5SEO
"Si buscas resultados distintos, no
hagas siempre lo mismo", Albert
Einstein
jjpeleato.com
1 . 2

¿QUÉ ES HTML?
by | #CW17 #HTML5SEOjjpeleato.com
2 . 1

LENGUAJE DE MARCAS
Un lenguaje de marcado o lenguaje de marcas es un
método de codificar un documento, que junto al
texto, incorpora etiquetas o marcas que contienen
información adicional acerca de la estructura del texto
o su presentación.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 2

Los lenguajes de marcas NO son lenguajes de
programación.
No tienen funciones aritméticas o variables, como si
poseen los lenguajes de programación.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 3

Los lenguajes de marcas se llaman así por la práctica
tradicional de marcar los manuscritos con
instrucciones de impresión en los márgenes.
En la época de la imprenta, esta tarea ha
correspondido a los marcadores, que indicaban el tipo
de letra, el estilo y el tamaño, así como la corrección
de errores, para que otras personas compusieran la
tipografía.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 4

Existen tres tipos de marcado:
Marcado de presentación:
Aquel que indica el formato del texto. Útil para maquetar la presentación de un
documento para solo lectura. En desuso.
Marcado de procedimientos:
Aquel que está enfocado hacia la re/presentación del texto. El programa que representa
el documento debe interpretar el código en el mismo orden en el que aparece.
Ejemplos: TeX, HTML, etc.
Marcado descriptivo:
Utiliza etiquetas para describir los fragmentos de texto, pero sin especificar como
deben ser representados, o en qué orden. Ejemplo: XML, etc.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 5

WORLD WIDE WEB (WWW)
World Wide Web (WWW) o red informática mundial es
un sistema de distribución de documentos de
hipertexto o hipermedios interconectados vía
internet.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 6

La WWW se desarrolló en Ginebra en las instalaciones
del CERN (Organización Europea para la Investigación
Nuclear) entre marzo de 1989 y diciembre de 1990 por
el inglés Tim Berners-Lee y el belga Robert Cailliau.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 7

Es importante saber que web o www no son sinónimo
de Internet, la web es un subconjunto de Internet que
consiste en páginas a las que se puede acceder usando
un navegador.
Internet es la red de redes donde reside toda la
información. Tanto el correo electrónico, como FTPs,
juegos, etc. son parte de Internet, pero no de la Web.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 8

TIM BERNERS-LEE
Conocido como el padre de la Web es un científico de
la computación que estableció la primera
comunicación entre un cliente y un servidor usando
el protocolo HTTP en noviembre de 1989.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 9

Él y su grupo crearon lo que por sus siglas en inglés se
denomina Lenguaje HTML (HyperText Markup
Language), el protocolo HTTP (HyperText Transfer
Protocol) y el sistema de localización de objetos en la
web URL (Uniform Resource Locator).
by | #CW17 #HTML5SEOjjpeleato.com
2 . 10

En 1989, el CERN era el nodo de Internet más grande
de Europa y Berners-Lee vio la oportunidad de unir
Internet e hipertexto (HTTP y HTML), de lo que surgiría
la World Wide Web.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 11

La primera página web de Internet fue creada por Tim
Berners-Lee en 1991 alojada en el primer servidor web
del mundo: NeXT Computer que se encontraba en el
CERN y fue puesto en línea el 6 de agosto de 1991.
En octubre de 1994 Tim Berners-Lee fundo el
consorcio World Wide Web (W3C). Actualmente sigue
siendo el presidente y director.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 12

WORLD WIDE WEB CONSORTIUM (W3C)
World Wide Web Consortium (W3C), es un consorcio
internacional que generan y definen
recomendaciones y estándares que aseguran el
crecimiento de la World Wide Web.
by | #CW17 #HTML5SEO
https://www.w3.org/
http://www.w3c.es/
jjpeleato.com
2 . 13

ESTÁNDARES PUBLICADOS POR EL W3C
CSS DOM HTML XHTML
XML SOAP SVG ...
by | #CW17 #HTML5SEOjjpeleato.com
2 . 14

HTML
HTML, es un estándar que significa Lenguaje de
Marcado para Hipertextos (HyperText Markup
Language) es el elemento de construcción más básico
de una página web y se usa para crear y representar
visualmente una sitio web.
HTML es una ampliación/extensión de SGML
(Standard Generalized Markup Language), un
estándar para la definición de lenguajes de marcas.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 15

HTML determina el contenido de la página web, pero
no su funcionalidad.
Otras tecnologías distintas de HTML son usadas
generalmente para describir la
apariencia/presentación de una página web (CSS) o su
funcionalidad (JavaScript).
by | #CW17 #HTML5SEOjjpeleato.com
2 . 16

HTML usa "markup" o marcado para anotar textos,
imágenes, y otros contenidos que se muestran en el
navegador Web.
El lenguaje de marcas HTML incluye
"elementos/etiquetas" especiales tales como head,
title, body, header, article, section, p, div, span, img,
y muchos más.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 17

HiperText se refiere a enlaces que conectan una
página Web con otra, ya sea dentro de una página
web o entre diferentes sitios web.
Los hipervínculos son un aspecto fundamental de la
Web. Al subir contenido a Internet y vincularlo a páginas
de otras personas, te haces participante activo de esta
red mundial.
by | #CW17 #HTML5SEOjjpeleato.com
2 . 18

by | #CW17 #HTML5SEO
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>HTML< /title>
</head>
<body>
<!-- Content -->
</body>
</html>
jjpeleato.com
2 . 19

XHTML
XHTML (eXtensible HyperText Markup Language) es a
XML como HTML es a SGML. Es decir, XHTML es un
lenguaje de marcado que es similar al HTML, pero con
una sintaxis más estricta y expresada como XML.
by | #CW17 #HTML5SEO
http://librosweb.es/libro/xhtml/
jjpeleato.com
2 . 20

by | #CW17 #HTML5SEO
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>XHTML< /title>
</head>
<body>
<!-- Content -->
</body>
</html>
jjpeleato.com
2 . 21

by | #CW17 #HTML5SEOjjpeleato.com
3 . 1

HTML 5
HTML5 es la última versión de HTML. Quinta revisión
del lenguaje básico de WWW donde establece una
serie de elementos y atributos que reflejan el uso
típico de los sitios web modernos.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 2

Diseñado para ser utilizable por todos los
desarrolladores de Open Web, los recursos sobre las
tecnologías se clasifican en varios grupos según su
función:
by | #CW17 #HTML5SEOjjpeleato.com
3 . 3

Semántica: Permite describir con mayor precisión
cuál es su contenido.
Conectividad: Permite comunicarse con el servidor
de formas nuevas e innovadoras.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 4

Sin conexión y almacenamiento: Permite a las
páginas web almacenar datos localmente en el lado
del cliente y operar sin conexión de manera más
eficiente.
Multimedia: Nos otorga un excelente soporte para
utilizar contenido multimedia como lo son audio y
video nativamente.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 5

Gráficos y efectos 2D/3D: Proporciona una amplia
gama de nuevas características que se ocupan de
los gráficos en la web como lo son canvas 2D,
WebGL, SVG, etc.
Rendimiento e Integración: Proporciona una mayor
optimización de la velocidad y un mejor uso del
hardware.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 6

Acceso al dispositivo: Proporciona APIs para el uso
de varios componentes internos de entrada y salida
de nuestro dispositivo.
CSS3: Nos ofrece una nueva gran variedad de
opciones para hacer diseños más sofisticados.
by | #CW17 #HTML5SEOjjpeleato.com
3 . 7

RECURSOS
by | #CW17 #HTML5SEO
https://www.w3.org/html/
https://www.w3.org/TR/html5/
https://www.w3.org/html/logo/
jjpeleato.com
3 . 8

APRENDER
by | #CW17 #HTML5SEO
https://www.w3schools.com/html/
https://developer.mozilla.org/es
jjpeleato.com
3 . 9

ELEMENTOS
HTML5
by | #CW17 #HTML5SEOjjpeleato.com
4 . 1

ELEMENTO RAÍZ
Elemento Descripción
Define que el documento está bajo el estándar de HTML 5.
Representa la raíz de un documento HTML o XHTML. Todos los
demás elementos deben ser descendientes de este elemento.
by | #CW17 #HTML5SEO
<!doctype
html>
<html>
jjpeleato.com
4 . 2

METADATOS DEL DOCUMENTO
Elemento Descripción
Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
Define el título del documento, el cual se muestra en la barra de
título del navegador o en las pestañas de página. Solamente
puede contener texto y cualquier otra etiqueta contenida no será
interpretada.
by | #CW17 #HTML5SEO
<head>
<title>
jjpeleato.com
4 . 3

Elemento Descripción
Define la URL base para las URLs relativas en la página.
<base href="http://www.example.com/">
Usada para enlazar JavaScript y CSS externos con el documento
HTML actual.
by | #CW17 #HTML5SEO
<base>
<link>
jjpeleato.com
4 . 4

Elemento Descripción
Define los metadatos que no pueden ser definidos usando otro
elemento HTML.
Etiqueta de estilo usada para escribir CSS en línea.
by | #CW17 #HTML5SEO
<meta>
<style>
jjpeleato.com
4 . 5

SCRIPTING
Elemento Descripción
Define ya sea un script interno o un enlace hacia un script
externo. El lenguaje de programación es JavaScript
Define un contenido alternativo a mostrar cuando el navegador
no soporta scripting.
by | #CW17 #HTML5SEO
<script>
<noscript>
jjpeleato.com
4 . 6

SECCIONES
Elemento Descripción
Representa el contenido principal de un documento HTML. Solo
hay un elemento <body> en un documento.
Representa un contenedor genérico sin ningún significado
especial.
Define la cabecera de una página o sección. Usualmente contiene
un logotipo, el título del sitio Web y una tabla de navegación de
contenidos.
by | #CW17 #HTML5SEO
<body>
<div>
<header>
jjpeleato.com
4 . 7

Elemento Descripción
Define el pie de una página o sección. Usualmente contiene un
mensaje de derechos de autoría, algunos enlaces a información
legal o direcciones para dar información de retroalimentación.
Define una sección que solamente contiene enlaces de navegación
by | #CW17 #HTML5SEO
<footer>
<nav>
jjpeleato.com
4 . 8

Elemento Descripción
Define una sección en un documento.
Define contenido autónomo que podría existir
independientemente del resto del contenido.
by | #CW17 #HTML5SEO
<section>
<article>
jjpeleato.com
4 . 9

Elemento Descripción
Define algunos contenidos vagamente relacionados con el resto
del contenido de la página. Si es removido, el contenido restante
seguirá teniendo sentido
Los elemento de cabecera implementan seis niveles de cabeceras
de documentos; <h1> es la de mayor y <h6> es la de menor
importancia. Un elemento de cabecera describe brevemente el
tema de la sección que introduce.
by | #CW17 #HTML5SEO
<aside>
<h1> -
<h6>
jjpeleato.com
4 . 10

Elemento Descripción
Define una sección que contiene información de contacto.
Define el contenido principal o importante en el documento.
Solamente existe un elemento <main> en el documento.
by | #CW17 #HTML5SEO
<address>
<main>
jjpeleato.com
4 . 11

SEMÁNTICA A NIVEL DE TEXTO
Elemento Descripción
Representa un valor de fecha y hora; el equivalente legible por
máquina puede ser representado en el atributo datetime.
by | #CW17 #HTML5SEO
<time>
jjpeleato.com
4 . 12

CONTENIDO INCRUSTADO
Elemento Descripción
Representa un video y sus archivos de audio con la interfaz
necesaria para reproducirlos.
Representa un sonido o stream de audio.
by | #CW17 #HTML5SEO
<video>
<audio>
jjpeleato.com
4 . 13

Elemento Descripción
Permite a autores especificar recursos multimedia alternativos
para los elementos multimedia como <video> o <audio>.
Representa un punto de integración para una aplicación o
contenido interactivo externo que por lo general no es HTML.
by | #CW17 #HTML5SEO
<source>
<embed>
jjpeleato.com
4 . 14

Elemento Descripción
Representa un área de mapa de bits en el que se pueden utilizar
scripts para renderizar gráficos como gráficas, gráficas de juegos o
cualquier imagen visual al vuelo.
Define una imagen vectorial embebida.
Define una fórmula matemática.
by | #CW17 #HTML5SEO
<canvas>
<svg>
<math>
jjpeleato.com
4 . 15

FORMULARIOS
Elemento Descripción
Representa un conjunto de opciones predefinidas para otros
controles.
Genera claves asimétricas utilizando varios algoritmos. Dos de los
algoritmos predeterminados son: RSA y DSA
by | #CW17 #HTML5SEO
<datalist>
<keygen>
jjpeleato.com
4 . 16

Elemento Descripción
Representa el resultado de un cálculo.
Representa el progreso de finalización de una tarea.
by | #CW17 #HTML5SEO
<output>
<progress>
jjpeleato.com
4 . 17

CASO PRÁCTICO
by | #CW17 #HTML5SEO
Ejemplos
jjpeleato.com
5 . 1

VALIDADORES
by | #CW17 #HTML5SEOjjpeleato.com
6 . 1

Estándar HTML 5:
SEO on Page:
(WordPress)
WPO:
by | #CW17 #HTML5SEO
http://validator.w3.org/
https://metricspot.com/
https://www.wpdoctor.es/
Pagespeed Insights
Pingdom Tools
GTmetrix
jjpeleato.com
6 . 2

¡FELIZ CONGRESO!
by | #CW17 #HTML5SEO
Simplemente, GRACIAS A TOD@S
jjpeleato.com
7