TALLER #CW17 #HTML5SEO
HTML 5 para SEO
"I've seen the FUTURE. It's in my BROWSER"
¡Hola y bienvenid@s!
Mi nombre es José J. Peleato Pradel.
by jjpeleato.com | #CW17 #HTML5SEO
¿Qué es HTML?
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.
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.
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.
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.
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.
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.
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.
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.
É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).
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.
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.
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.
Estándares publicados por el W3C
| CSS | DOM | HTML | XHTML |
| XML | SOAP | SVG | ... |
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.
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).
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.
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.
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
</body>
</html>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.
<?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>
</body>
</html>
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.
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:
- Semántica: Permite describir con mayor precisión cuál es su contenido.
- Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
- 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.
- 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.
- 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.
RECURSOS
APRENDER
Elementos
HTML5
Elemento raíz
| Elemento | Descripción |
|---|---|
| <!doctype html> | Define que el documento está bajo el estándar de HTML 5. |
| <html> | Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento. |
Metadatos del documento
| Elemento | Descripción |
|---|---|
| <head> | Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. |
| <title> | 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. |
| Elemento | Descripción |
|---|---|
| <base> | Define la URL base para las URLs relativas en la página. <base href="https://www.example.com/"> |
| <link> | Usada para enlazar JavaScript y CSS externos con el documento HTML actual. |
| Elemento | Descripción |
|---|---|
| <meta> | Define los metadatos que no pueden ser definidos usando otro elemento HTML. |
| <style> | Etiqueta de estilo usada para escribir CSS en línea. |
Scripting
| Elemento | Descripción |
|---|---|
| <script> | Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript |
| <noscript> | Define un contenido alternativo a mostrar cuando el navegador no soporta scripting. |
Secciones
| Elemento | Descripción |
|---|---|
| <body> | Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento. |
| <div> | Representa un contenedor genérico sin ningún significado especial. |
| <header> | 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. |
| Elemento | Descripción |
|---|---|
| <footer> | 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. |
| <nav> | Define una sección que solamente contiene enlaces de navegación |
| Elemento | Descripción |
|---|---|
| <section> | Define una sección en un documento. |
| <article> | Define contenido autónomo que podría existir independientemente del resto del contenido. |
| Elemento | Descripción |
|---|---|
| <aside> | Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido |
| <h1> - <h6> | 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. |
| Elemento | Descripción |
|---|---|
| <address> | Define una sección que contiene información de contacto. |
| <main> | Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento. |
Semántica a nivel de Texto
| Elemento | Descripción |
|---|---|
| <time> | Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime. |
Contenido incrustado
| Elemento | Descripción |
|---|---|
| <video> | Representa un video y sus archivos de audio con la interfaz necesaria para reproducirlos. |
| <audio> | Representa un sonido o stream de audio. |
| Elemento | Descripción |
|---|---|
| <source> | Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>. |
| <embed> | Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML. |
| Elemento | Descripción |
|---|---|
| <canvas> | 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. |
| <svg> | Define una imagen vectorial embebida. |
| <math> | Define una fórmula matemática. |
Formularios
| Elemento | Descripción |
|---|---|
| <datalist> | Representa un conjunto de opciones predefinidas para otros controles. |
| <keygen> | Genera claves asimétricas utilizando varios algoritmos. Dos de los algoritmos predeterminados son: RSA y DSA |
| Elemento | Descripción |
|---|---|
| <output> | Representa el resultado de un cálculo. |
| <progress> | Representa el progreso de finalización de una tarea. |
CASO PRÁCTICO
VALIDADORES
by jjpeleato.com | #CW17 #HTML5SEO
- Estándar HTML 5:
https://validator.w3.org/ - SEO on Page:
https://metricspot.com/
https://www.wpdoctor.es/ (WordPress) - WPO:
Pagespeed Insights
Pingdom Tools
GTmetrix
¡FIN!
Simplemente, GRACIAS
by jjpeleato.com | #CW17 #HTML5SEO