HTML

HTML5 Elementos

HTML, que significa Lenguaje de Marcado de Hipertextos (HyperText Markup Language), es la pieza más básica para la construcción de la web y se usa para definir el sentido y estructura del contenido en una página web. Otras tecnologías además de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad (JavaScript).

"Hipertexto" se refiere a los enlaces que conectan las páginas web entre sí, ya sea dentro de un mismo sitio web o entre diferentes sitios web. los vínculos son un aspecto fundamental de la web. Al subir contenido a Internet y vincularlo a páginas creadas por otras personas, te haces participante activo en la red mundial (World Wide Web).

HTML usa "marcado" (markup en inglés)  para anotar textos, imágenes y otro contenido para ser mostrado en un navegador web. El marcado en HTML incluye "elementos" especiales tales como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li>, y muchos otros más.

Un elemento HTML se separa de otro texto en un documento por medio de "etiquetas", las cuales consisten en elementos rodeados por "<" y ">". El nombre de un elemento dentro de una etiqueta no es sensible a mayúsculas. Esto es, puede ser escrito en mayúsculas, minúsculas o una combinación. Por ejemplo, la etiqueta <title> puede ser escrita como <Title>, <TITLE> o de cualquier otra forma.

Los artículos siguientes pueden ayudarte a aprender más acerca de HTML.

  • Introducción a HTML

    Si eres nuevo dentro del desarrollo web, asegúrate de leer nuestro artículo HTML: básico para conocer lo que es HTML y cómo usarlo.

  • Tutoriales de HTML

    Para ver artículos sobre cómo usar HTML, así como tutoriales y ejemplos completos, revisa nuestra Área de aprendizaje de HTML.

  • Referencia HTML

    En nuestra completa sección de referencia HTML, encontrarás detalles sobre cada uno de los elementos y atributos que conforman el lenguaje HTML.

Tutoriales para principiantes

Nuestra Guía del desarrollador HTML consta de múltiples módulos que enseñan HTML desde el principio — no se requiere conocimiento previo.

Introducción a HTML
Este módulo pone el escenario, acostumbrándote a conceptos importantes y sintaxis tales como buscar y aplicar HTML a texto, cómo crear hipervínculos, y cómo usar HTML para estructurar una página web.
Multimedia e incrustación
Este módulo explora cómo usar HTML para incluir multimedios en tus páginas web, incluyendo las diferentes maneras en que las imágenes pueden ser incluidas y cómo incrustar vídeo, audio e incluso otras páginas web completas.
Tablas HTML
Representar datos tabulares en una página web de una manera entendible y accesible puede ser un reto. Este módulo cubre el marcado básico de una tabla, junto con características más complejas, tales como implementar leyendas y resúmenes.
Formularios HTML
Los formularios son una parte muy importante de la web — estos proveen mucha de la funcionalidad que necesita para interactuar con sitios web, p. ej. registro e inicio de sesión, evío de retroalimentación, compra de productos, y más. Este módulo lo inicia en la creación de las partes del lado del cliente (front-end) de los formularios.
Usa HTML para resolver problemas comunes
Provee vínculos a secciones de contenido que explica cómo usar HTML para resolver problemas muy comunes al crear una página web: lidiar con títulos, agregar imágenes o videos, enfatizar contenido, creación de un formulario básico, etc.

Temas avanzados

Imagen con CORS habilitado
La especificación HTML introduce un atributo crossorigin para imágenes que, en conjunto con el encabezado CORS apropiado, permite que imágenes definidas con el elemento <img> y cargadas desde orígenes externos sean usadas en un lienzo (canvas) como si fueran cargadas desde el origen actual.
Atributos de configuración CORS
En HTML5, algunos elementos HTML que dan soporte para CORS, tales como <img> o <video>, tienen un atributo crossorigin (propiedad crossOrigin), que les permite configurar las peticiones CORS de los datos que se cargan.
Manejo del foco en HTML
El atributo del DOM activeElement y el método DOM hasFocus() le permiten controlar mejor la interacción del usuario con elementos de la página web.
Precarga de contenido con rel="preload"
El valor preload para el atributo rel del elemento <link> te permite escribir peticiones de búsqueda declarativas en el <head> de tu HTML, especificando los recursos que tus páginas necesitarán muy pronto después de cargar, los cuales por lo tanto quieres estar precargando temprano en el ciclo de vida de la carga de páginas, antes de que la maquinaria principal de interpretación haga efecto. Esto asegura que estén disponibles antes y sea menos probable que bloqueen la primer interpretación de la página, conllevando a mejoras de desempeño. Este artículo provee una guía básica acerca de cómo funciona preload.

Ver Todo...

Referencias

Guía de referencia de HTML
HTML es el lenguaje que describe la estructura y el contenido semántico de un documento Web; este se compone de elementos, cada uno de los cuales puede ser modificado por cierta cantidad de atributos.
Referencia de elementos HTML
Esta página contiene una lista con todos los elementos HTML
Referencia de atributos HTML
Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento para cumplir los criterios de los usuarios.
Atributos globales
Los atributos globales puedan ser especificadas en todos los elementos HTML, incluso aquellos que no están especificados en el estándar. Esto significa que cualquier elemento no estándar debe permitir estos atributos, a pesar de que el uso de estos elementos significa que el documento ya no es compatible con HTML5. Por ejemplo, los navegadores compatibles con HTML5 ocultar el contenido marcado como <foo hidden>...<foo>, aunque <foo> no es un elemento HTML válido.
Elementos en líneaElementos en bloque
Los elementos en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en bloque" o elementos "en línea". Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque".
Tipos de enlaces
En HTML, los siguientes tipos de enlaces indican la relación entre dos documentos, de los cuales uno enlaza al otro usando un elemento<a> o bien <area>, o bien <link>.
Guía para los tipos y formatos de medios en la web
Los elementos <audio> y <video> te permiten la reproducción de audio y vídeo sin la necesidad de plug-ins.

Temas relacionados

Control de la corrección ortográfica en formularios HTML
Firefox 2 incorpora un corrector ortográfico para las áreas y los campos de texto de los formularios web. Accediendo a las opciones de configuración mediante "about:config" en la dirección el usuario puede activar o desactivar el corrector y, además, puede indicar si desea o no habilitar la corrección ortográfica y si debe habilitarse para áreas y campos de texto o sólo en áreas de texto.
Transmisión Adaptativa DASH para Video en HTML 5
La Transmisión Adaptable y Dinámica sobre HTTP (DASH - Dynamic Adaptive Streaming over HTTP) es un protocolo de transmisión adaptable. Esto signfica que le permite a un flujo de vídeo cambiar entre diversas tasas de bits dependiendo de la velocidad de la red, para mantener la reproducción de un vídeo.
Microformatos
Los Microformatos (en ocasiones abreviados como µF) son pequeñas plantillas para marcar entidades como personas, organizaciones, eventos, localizaciones, posts en blogs, productos, currículums, recetas etc. Son una convención simple para incrustar semántica en HTML y para brindar rápidamente un API utilizable por los motores de búsqueda, agregadores y otras herramientas.
Optimizar sus página para análisis especulativo
Tradicionalmente en los navegadores el analizador de HTML corre en el hilo de ejecución principal y se queda bloqueado después de una etiqueta </script> hasta que el código se haya recuperado y ejecutado. El analizador de HTML de Firefox 4 y posteriores soporta análisis especulativo fuera del hilo de ejecución principal. Éste analiza anticipadamente mientras el código está siendo descargado y ejecutado. Como en Firefox 3.5 y 3.6, el analizador de HTML es el que inicia la carga especulativa de código, las hojas de estilos y las imágenes que va encontrando en el flujo de la página. Sin embargo, en Firefox 4 y posteriores, el analizador de HTML también ejecuta el algoritmo especulativo de la contrucción del árbol HTML. La ventaja es que cuando lo especulado tiene éxito, no hay necesidad de reanalizar la parte del archivo de entrada que ya fue analizada junto la descarga de código, hojas de estilo y las imágenes. La desventaja es que se ha realizado un trabajo inútil cuando la especulación falla.
Uso del caché de aplicaciones
HTML5 proporciona un mecanismo de caché a nivel de aplicación que permite que las aplicaciones basadas en la web se ejecuten sin conexión. Los desarrolladores pueden usar la interface de Caché de aplicaciones (AppCache) para especificar los recursos que el navegador debería guardar en caché y tener disponibles para los usuarios cuando no estén conectados. Las aplicaciones que están en caché se cargan y funcionan correctamente aunque los usuarios hagan clic en el botón recargar cuando no están conectados.