Si bien su desarrollo había comenzado muchos años antes, HTML5 comenzó a ser realmente de uso común con los diseñadores / desarrolladores web en 2010. Desde el principio, el lenguaje era familiar para muchos profesionales de la web, porque en lugar de intentar reinventar todo desde cero, HTML5 construido sobre lo que había venido antes. Cualquiera que supiera HTML 4.01 descubrió rápidamente que gran parte de esa versión ahora se podía encontrar en HTML5.
Si bien HTML5 incluye muchos elementos que han existido en HTML por un tiempo, también introdujo un puñado de elementos que eran nuevos en HTML5. Para muchos de estos nuevos elementos, se utilizó un enfoque llamado "pavimentar los caminos de vaca". Este es un término que se usa comúnmente en TI para significar esencialmente mirar lo que las personas ya están haciendo y hacer eso. En el caso de los diseñadores web, esto significaba ver cómo ya estaban construyendo páginas y basar las decisiones en nuevos elementos de esas actividades. Por ejemplo, muchos profesionales de la web crearían sitios web con divisiones que usaban atributos de ID o clase de "encabezado", "nav" y "pie de página". Como tal, HTML5 introdujo estos como nuevos elementos, permitiendo a los profesionales de la web agregar más significado a sus documentos mediante el uso de elementos de sección dedicados en lugar de solo divisiones. Esta combinación de familiaridad y un enfoque que reconocía las prácticas actuales ayudaron a HTML5 a ser adoptado rápidamente por la industria del diseño web.
El doctype HTML5
En primer lugar, para usar cualquier nuevo elemento HTML5, su documento debe incluir el doctype HTML5 que es:
Puede observar que este doctype no menciona específicamente "HTML5", sino que simplemente declara la versión como "html". Esto se debe a que este doctype es lo que se pretende utilizar en el futuro para todas las iteraciones del lenguaje.
De hecho, se supone que HTML5 es la última versión numerada del lenguaje, con nuevos cambios que se agregarán de manera consistente en el futuro. De hecho, algunos de los elementos de la lista a continuación se agregaron al idioma mucho después de ese impulso inicial en 2010.
Las etiquetas HTML5
| Etiqueta | Explicación | |
|---|---|---|
| Ancla o enlace | ||
| Abreviatura | ||
| Dirección o autores del documento. | ||
| Mapa de imagen del lado del cliente | ||
| Artículo | ||
| Contenido tangencial | ||
| Transmisión de audio | ||
| Negrita | ||
| Base de rutas URI para elementos en el documento | ||
| Algoritmo bidireccional | ||
| Cita larga | ||
| Cuerpo de la pagina | ||
| Salto de línea | ||
| Botón de formulario HTML | ||
| Lienzo para gráficos dinámicos | ||
| Comentario | ||
| Título de tabla | ||
| Citación | ||
| Referencia de código | |
| Columna de la tabla | ||
| Grupo de columnas de tabla | ||
| Comando o acción en la página. | ||
| Definición del tipo de documento | ||
| Cuadrícula de datos | ||
| Opciones predefinidas para otros controles. | ||
| Definición de la descripción de la lista o lapso de discurso. | ||
| Texto borrado | ||
| Información adicional bajo demanda | ||
| Definición | ||
| Conversacion | ||
| División lógica | ||
| Lista de descripciones | ||
| Definición de la lista de palabras o diálogos | ||
| Énfasis | ||
| Elemento embebido para plugins. | ||
| Grupo de controles de formulario | ||
| El título usado para un | ||
| Figura con título opcional | ||
| Pie de página de la página | ||
| Formar | ||
| Titular de primer nivel | ||
| Titular de segundo nivel | ||
| Titular de tercer nivel | ||
| Título de cuarto nivel | ||
| Titular de quinto nivel | ||
| Titular de sexto nivel | ||
| Jefe del documento | ||
|
| Encabezado de una página | |
| Grupo de encabezamiento | ||
| Regla horizontal | ||
| Elemento raíz de una página web | ||
| Estilo de texto en cursiva | ||
| Marco en linea | ||
| Imagen | ||
| Elemento de formulario de entrada | ||
| Elemento de formulario de botón | ||
| Elemento de formulario de casilla de verificación | ||
| Entrada de color | ||
| Entrada de fecha | ||
| Entrada de fecha y hora global | ||
| Entrada de fecha y hora local | ||
| Entrada de dirección de correo electrónico | ||
| Elemento de formulario de carga de archivos | ||
| Elemento de campo de formulario oculto | ||
| Elemento de forma de imagen | ||
| Año y mes de entrada | ||
| Entrada de número | ||
| Elemento de formulario de contraseña | ||
| Elemento de forma de botón de radio | ||
| Ingreso de número impreciso | ||
| Botón de reinicio del elemento de formulario | ||
| Campo de búsqueda | ||
| Botón de enviar elemento de formulario | ||
| Entrada de número de teléfono | ||
| Elemento de formulario de campo de texto | ||
| Entrada de tiempo | ||
| Entrada de URL | ||
| Entrada de año y semana | ||
| Texto insertado | ||
| Texto a ingresar por el usuario | ||
| Generar claves seguras para la gestión de certificados. | ||
| Etiqueta de formulario | ||
| Título de campo de formulario | ||
| Elemento de lista | ||
| Enlace a documentos relacionados | ||
| Área principal de contenido en una página. | ||
| Mapa de imagen del lado del cliente | ||
| Texto marcado o resaltado | ||
| Lista de comandos | ||
| Meta información sobre el documento. | ||
| Calibre escalar | ||
| Definir es un área con enlaces de navegación. | ||
| Contenido cuando los scripts no están disponibles | ||
| Objeto no estandar | ||
|
| Lista ordenada o numerada | |
| Grupo de opciones en una lista de selección. | ||
| Opción en una lista de selección | ||
| Resultado de un cálculo de formulario | ||
| Párrafo | ||
| Parámetro de un elemento de objeto | ||
|
| Texto pre-formateado | |
| Indicador de progreso | ||
| Cita corta en linea | ||
| Paréntesis de rubí | ||
| Texto rubí | ||
| Anotación rubí | ||
| Texto tachado | ||
| Salida de muestra | ||
| Guiones | ||
| Sección de una página | ||
| Seleccionar o desplegar listas de menú | ||
| Tamaño de letra pequeño | ||
| Fuente de medios | ||
| Contenedor genérico de estilo en línea | ||
| Fuerte énfasis | ||
| Hojas de estilo | ||
| Subíndice | ||
| Resumen de los contenidos del elemento DETALLES | ||
| Sobrescrito | ||
| Mesa | ||
| Filas del cuerpo de la tabla | ||
| Celda de la tabla | ||
| Elemento de forma multilínea | ||
| Filas de pie de tabla | ||
| Celda de encabezado de tabla | ||
| Filas de encabezado de tabla | ||
| Define el tiempo | ||
| Título | ||
| Fila de la tabla | ||
|
| Lista desordenada o abultada | |
| Texto variable o definido por el usuario. | ||
|
Video o pelicula incrustada en pagina |
