¿Estás interesado en el mundo del desarrollo web? Entonces no puedes perderte las últimas novedades en HTML5. En TIEngranaje te traemos toda la información sobre las nuevas funcionalidades, mejoras y herramientas que brinda esta tecnología. ¡Prepárate para estar a la vanguardia!
Internet ha cambiado bastante desde el último estándar HTML hace más de una década. Algunos de los elementos de HTML 4.01 ahora están obsoletos. Estos elementos han sido eliminados o reescritos en HTML5.
Aparte de los elementos en desuso, HTML5 trae muchas nuevas características a la especificación HTML. Afortunadamente, ya hay algunos soporte de navegador limitado para estas nuevas características. Echemos un vistazo a algunos de estos cambios con más detalle.
Estructura básica para una página HTML5
Una página HTML5 es similar a la mayoría de las páginas HTML. Sin embargo, hay algunas áreas clave que se han simplificado.
Implementando la estructura de una página HTML5 ahora se puede hacer fácilmente desde la memoria en lugar de mirar hacia atrás en un documento de referencia para asegurarse de haber incluido todos los componentes necesarios para que la página funcione en todos los navegadores.
Aquí está el número mínimo de elementos y sus atributos que debe usar en cualquier HTML5 documento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example document</title>
<link href="https://www.itgeared.com/html5-new-what-is-new-tutorial/stylesheet.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>Una de las mejores cosas de HTML5 es el hecho de que los desarrolladores web pueden dejar de preocuparse por el Doctype largo. Una estructura de página HTML5 es muy fácil es para implementar. Comienza declarando el tipo de documento HTML5.
Si bien esta declaración no es necesaria para HTML5, es necesaria para que los navegadores cambien el contenido al modo «estándar». Omitiendo el doctype o tener algo antes, incluso una línea en blanco, hará que el navegador invoque el modo «Quirks», que debe evitarse. La declaración puede estar en todo en mayúsculaso todo en minúsculaso un mezcla de ambos.
<!DOCTYPE html>Al igual que con el tipo de documento, la siguiente cosa más agradable a tener en cuenta es que es más fácil de recordar. html etiqueta. Si bien no existe un idioma oficial predeterminado en HTML5, debe especificar siempre una lengua explícitamente.
<html lang="en">Dentro de head elemento, incluye sus etiquetas meta. Aunque técnicamente no es necesario definir el conjunto de caracteres, no hacerlo puede exponer su aplicación a ataques de secuencias de comandos entre sitios. en versiones anteriores de Internet Explorer.
Afortunadamente, incluir esta metaetiqueta es simple. <meta charset="utf-8" /> es el equivalente a <meta http-equiv="Content-Type" content="text/html; charset=utf-8">.
<meta charset="utf-8" />El resto de los elementos que se muestran en nuestros ejemplos son prácticamente los mismos que encontraría en los documentos anteriores a HTML5. Es posible que hayas notado que el type El atributo no se incluye con el enlace o el elemento de secuencia de comandos.
Puede incluirlos si lo desea, pero incluso los navegadores más antiguos utilizarán text/css como el tipo predeterminado para hojas de estilo y text/javascript como el tipo predeterminado para guiones.
Elementos eliminados
Los siguientes elementos de HTML 4.01 se eliminan de HTML5:
| Elemento | Descripción |
|---|---|
<acronym> |
Define un acrónimo |
<applet> |
Define un applet incrustado |
<basefont> |
Establece un color, tamaño o fuente predeterminados para el texto en un documento |
<big> |
Define texto grande |
<center> |
Define el texto centrado |
<dir> |
Define una lista de directorios |
<font> |
Define la fuente, el color y el tamaño del texto |
<frame> |
Define un marco en un conjunto de marcos |
<frameset> |
Define un conjunto de marcos |
<isindex> |
Agrega un campo de búsqueda |
<noframes> |
Define un contenido alternativo para los usuarios que no admiten marcos |
<strike> |
Define el texto tachado |
<tt> |
Define el texto del teletipo |
Nuevos elementos de estructura de página
HTML5 reconoce que las páginas web tienen una estructura. En general, muchas páginas web tienen navegación, contenido del cuerpo, contenido de la barra lateral, encabezados, pies de página y otras características. Estos nuevos elementos son de naturaleza semántica.
Por ejemplo, este enfoque da significado a ciertos elementos comunes en lugar de crear un genérico <div> elemento y agregando estilo para usarlo para implementar un componente como un encabezado o una barra de navegación.
| Elemento | Descripción |
|---|---|
<article> |
Define un artículo |
<aside> |
Define el contenido aparte del contenido de la página |
<bdi> |
Aísla una parte del texto que podría estar formateada en una dirección diferente |
<command> |
Define un botón de comando que un usuario puede invocar |
<details> |
Define detalles adicionales que el usuario puede ver u ocultar |
<summary> |
Define un encabezado visible para un <details> elemento |
<figure> |
Especifica contenido como una ilustración o un diagrama. |
<figcaption> |
Define un título para un <figure> elemento |
<footer> |
Define un pie de página para un documento. |
<header> |
Define un encabezado para un documento |
<hgroup> |
Agrupa un conjunto de elementos de encabezado (<h1> a <h6>) |
<nav> |
Define enlaces de navegación |
<section> |
Define una sección en un documento |
<wbr> |
Define un posible salto de línea |
Nuevos elementos en línea
Estos elementos en línea definir algunos conceptos básicos y mantenerlos marcados semánticamente, en su mayoría relacionados con el tiempo:
| Elemento | Descripción |
|---|---|
<mark> |
Define texto marcado o resaltado |
<meter> |
Define una medida dentro de un rango conocido |
<progress> |
Representa el progreso de una tarea. |
<time> |
Define una fecha y/u hora |
HTML5 proporciona nuevos elementos relacionados con los medios.
| Elemento | Descripción |
|---|---|
<audio> |
Define el contenido de sonido |
<canvas> |
Se utiliza para dibujar gráficos a través de secuencias de comandos |
<embed> |
Define un contenedor para una aplicación externa o complemento |
<source> |
Define múltiples recursos de medios para <video> y <audio> |
<track> |
Define pistas de texto para <video> y <audio> |
<video> |
Define un video |
Estos no son los únicos elementos que se han introducido con HTML5, hay otros elementos además de atributos.
