HTML, o lenguaje de marcado de hipertexto, es el código que ejecuta Internet. Es un lenguaje de marcado. Esto significa que usa etiquetas para definir elementos, como marcar texto en negrita o mostrar imágenes con código.
¿Qué es HTML5? Es la quinta versión del lenguaje de marcado HTML (HyperText Markup Language, versión 5).
Sir Tim Berners-Lee y HTML
HTML es el lenguaje unificador de la World Wide Web. Al igual que la web en sí, el HyperText Markup Language fue una creación de Sir Tim Berners-Lee. En 1991 escribió un documento llamado «Etiquetas HTML» en el que propuso menos de dos docenas de elementos que podrían usarse para escribir páginas web.
Para que algo como la Web exista y se expanda, tiene que basarse en estándares públicos y gratuitos. La red no debe tener dueño.
Sir Tim Berners-Lee
La W3C y la WHATWG
W3C, el Consorcio de la World Wide Web, publicó las iteraciones posteriores del estándar HTML en http://www.w3.org, hasta llegar a la versión 4.0 (nunca hubo una versión 1.0).
La siguiente evolución fue a XHTML, donde la X significa extensible. Esto requería que los autores siguieran las reglas de XML, un lenguaje de marcado más estricto en el que el W3C basaba la mayoría de sus tecnologías.
La publicación de XHTML 1.0 coincidió con el aumento del soporte del navegador para CSS.
Después se formó el grupo “Web Hypertext Application Technology Working Group”, o WHATWG.
Principios de diseño
El WHATWG redactó una serie de principios de diseño para guiar el desarrollo de HTML5.
Uno de los principios clave es «apoyar el contenido existente».
Eso significa que no hay año cero para HTML5. Las webs que se crean actualmente en cualquier versión de HTML, ya están utilizando HTML5.
Otros principios de diseño son
-
- No reinventes la rueda
-
- Degradado elegante
-
- Pavimenta los senderos (Si no está roto, no lo arregles)
-
- Evolución y no revolución
-
- Resolver problemas reales
-
- Prioridad de circunscripciones (En caso de conflicto, considere usuarios sobre autores sobre implementadores sobre especificadores sobre pureza teórica.)
-
- La seguridad será tenida en cuenta
-
- Separación de contenido y presentación
-
- Consistencia del DOM (Document Object Model)
-
- Funcionamiento bien definido
-
- Evitar la complejidad innecesaria
-
- Control de errores
-
- Soporte a los lenguajes mundiales
-
- Independencia del medio
-
- Accesibilidad
Los estándares web han avanzado tanto que ahora es posible construir casi cualquier cosa usando HTML, CSS y JavaScript. Mientras que para publicar texto o imágenes, HTML y CSS son suficientes, para audio o video, antes se requeria un plugin tipo Flash o Silverlight. Con HTML5, estos plugin ya no son necesarios. Los elementos multimedia enriquecidos en HTML5 son nativos del navegador.
Acceso a las webs principales de la W3C, la WHATWG y del equipo de Chromium:
https://html.spec.whatwg.org/multipage/
https://developers.google.com/web
Editores HTML y WYSIWYG
Podemos escribir HTML en un simple Bloc de notas, guardarlo como un archivo .html y soltar el archivo en un navegador para ver cómo se ve.
Los editores HTML tienen características que facilitan este trabajo, como por ejemplo resaltado de sintaxis, autocompletado y detección de errores. Estos editores también suelen funcionar JavaScript, PHP y CSS.
WordPress cuenta con una interfaz visual y editor de texto enriquecido llamado TinyMCE WYSIWYG (acrónimo de What You See Is What You Get).
Hay varios editores HTML con funcionalidades avanzadas, como
HTML y SEO
SEO es la optimización del sitio web para mejorar su posicionamiento en los resultados de búsqueda de Google.
Para ello se pueden optimizar por un lado, ciertas etiquetas del código HTML de la página. Estos son los títulos, encabezados, imágenes y enlaces.
Por otro, esta la propia redacción de un contenido de valor basado en palabras clave previamente definidas.
Elementos de código HTML destacados para SEO:
-
- Metadatos (meta description y meta keywords)
-
- Título (<title></title) de la página
-
- Encabezados h1 y h2 (podemos establecer encabezados según su importancia, desde H1 hasta H6)
-
- Imágenes (tanto en el nombre del fichero como en el texto alternativo)
-
- Título de los enlaces
-
- El cuerpo del texto
Conviene contar con herramientas y plugins para SEO. En WordPress por ejemplo, Yoast es un plugin que permite optimizar la pagina teniendo en cuenta los factores principales de SEO. Pero no es suficiente con tener herramientas o conocer HTML. Lo primero es una estrategia solida de marketing digital.
El límite de las máquinas no es su potencia, sino nuestra imaginación.
Sir Tim Berners-Lee
Lecturas relacionadas: