Ejemplos de uso de algunas de las nuevas funciones de HTML5. ¿Qué aporta HTML5? Una nota sobre la etiqueta H1

Documento HTML5 sencillo

Veamos uno de los documentos HTML5 más simples. Comienza especificando el tipo de documento usando código especial descripciones del tipo de documento (el significado de este código se explica en la siguiente sección), después de lo cual se establece la codificación y el nombre del documento, y luego su contenido. EN en este caso El contenido consta de un párrafo de texto:

Pequeño documento HTML5

Este sencillo documento se puede simplificar aún más. Por ejemplo, la etiqueta final en realidad no es necesaria en el estándar HTML5, ya que los navegadores saben cómo cerrar todo. elementos abiertos al final del documento (y el estándar HTML5 legaliza este comportamiento). Pero tomar atajos como este en lugar de simplificarlo hace que el marcado sea más difícil de entender y puede introducir errores inesperados.

La mayoría de los desarrolladores web opinan que el uso de secciones tradicionales es útil para hacer que el documento sea más fácil de entender, porque separan claramente la información sobre la página (el título de la página) del contenido en sí (el cuerpo de la página). Esta estructura es especialmente útil al agregar scripts, hojas de estilo y metaelementos a una página:

Pequeño documento HTML5

¡Renovemos el navegador al estilo HTML5!

Finalmente, todo el documento (excepto la línea de tipo de documento) se puede envolver en un elemento tradicional, como se muestra en el siguiente listado:

Pequeño documento HTML5

¡Renovemos el navegador al estilo HTML5!

Hasta HTML5, todas las versiones de la especificación HTML oficial requerían el uso del elemento, aunque la presencia de este elemento no afecta de ninguna manera la forma en que el navegador procesa el resto del código de la página. En HTML5, el uso de este elemento queda enteramente a la discreción personal del desarrollador.

El uso de elementos y es simplemente una cuestión de estilo. Una página sin estos elementos funcionará perfectamente incluso en navegadores más antiguos que nunca han oído hablar de HTML5. De hecho, el navegador asume automáticamente la presencia de estos elementos. Por lo tanto, si observa el DOM (el conjunto de objetos de software que representan una página) de una página usando un script JavaScript, contendrá objetos para los elementos y, aunque el desarrollador no los haya usado.

En en esta etapa Esta página de ejemplo se encuentra entre el documento HTML5 más simple y un punto de partida avanzado para una página web HTML5 práctica. En secciones posteriores le agregaremos el resto. elementos necesarios y profundizar en las marcas.

Descripción del tipo de documento HTML5

La primera línea de cada documento HTML5 siempre describe el tipo de documento. Esta descripción indica claramente que lo que sigue es contenido HTML5 y se ve así:

Lo primero que llama la atención sobre el tipo de documento HTML5 es su asombrosa simplicidad. Compare esto, por ejemplo, con la torpe descripción del tipo de documento que los desarrolladores web deben utilizar cuando trabajan con XHTML 1.0 estricto:

Incluso los desarrolladores web profesionales se han visto obligados a insertar una descripción de tipo de documento XHTML copiando y pegando desde otro documento. Y la descripción del tipo de documento HTML5 es breve, clara y fácil de ingresar manualmente.

La descripción del tipo de documento HTML5 también destaca porque no contiene un número oficial. Versiones HTML(5 para HTML5). Simplemente indica que la página es una página HTML. Esto está en línea con el nuevo concepto de HTML5 como lenguaje vivo. Añadido a HTML nuevo Las funciones están disponibles automáticamente para su colocación en la página sin requerir cambios en la descripción del tipo de documento.

Todo esto plantea una pregunta difícil: si HTML5 es un lenguaje vivo, ¿por qué una página necesita siquiera una descripción del tipo de documento?

La respuesta a esta pregunta es que se sigue utilizando la descripción del tipo de documento. razones históricas. Al procesar una página a la que le falta una descripción del tipo de documento, la mayoría de los navegadores (incluidos Explorador de Internet y Firefox) vaya a modo de compatibilidad (modo peculiaridades). En este modo, intentan mostrar la página teniendo en cuenta errores en las reglas que se han utilizado en más versiones anteriores. El problema con esto es que el modo de compatibilidad de un navegador puede ser diferente del modo de compatibilidad de otro navegador, como resultado de lo cual las páginas diseñadas para un navegador probablemente mostrarán errores en otro navegador, como tamaño de fuente incorrecto, diseño roto. etc.

Y cuando el navegador encuentra una descripción del tipo de documento en la página, sabe que el procesamiento de esta página debe realizarse siguiendo reglas más estrictas. modo estándares, que garantiza un formato y una estructura de página coherentes cuando se muestran en cualquier navegador moderno. Con algunas excepciones, el navegador es completamente indiferente al tipo de documento que se especifica en la descripción. Simplemente verifica que la página tenga algún tipo de descripción del tipo de documento. Una descripción de tipo de documento HTML5 es simplemente la descripción de tipo de documento válida más corta que habilita el modo estándar del navegador.

Codificación de caracteres

Una codificación es un estándar que le dice a una computadora cómo convertir texto en una secuencia de bytes al escribir texto en un archivo (y también cómo conversión inversa al abrir un archivo). Por razones históricas, hay muchos diferentes codificaciones. Hoy en día, casi todos los sitios web utilizan la codificación UTF-8 compacta y rápida, que admite todos los demás alfabetos que puedas necesitar.

Los servidores web suelen estar configurados para indicar a los navegadores que los visitan que las páginas que ofrece el servidor tienen una determinada codificación. Pero no puede estar seguro de que el servidor web en el que planea alojar su sitio web esté configurado de esta manera (a menos que sea suyo). servidor propio). Además, el intento del navegador de adivinar la codificación más probable utilizada puede fallar debido a algún problema de seguridad poco conocido. Por estos motivos, siempre debe incluir información sobre la codificación utilizada en el marcado de su página.

HTML5 facilita esta tarea. Para hacer esto, simplemente inserte el elemento al comienzo del bloque (o, si el elemento no se usa, inmediatamente después del código de descripción del tipo de documento):

Pequeño documento HTML5

Las herramientas de desarrollo web como Dreamweaver o Expression Web insertan este elemento automáticamente cuando creas la página. Estas herramientas también permiten guardar archivos para Codificación UTF. Pero al crear una página web con un editor de texto normal, es posible que deba realizar pasos adicionales para asegurarse de que los archivos se guarden con la codificación correcta.

Idioma

Se considera de buena forma indicar el lenguaje natural de una página web. En ocasiones, esta información puede resultar útil para otras personas, p. motores de búsqueda Puede usarlo para filtrar los resultados de búsqueda y devolver solo páginas en un idioma específico.

La forma más sencilla de insertar información de idioma en una página web es a través del elemento:

La información de idioma también puede ser útil si la página contiene texto en diferentes idiomas, que debe leerse mediante un lector de texto en pantalla. En este caso, el atributo lang con el código de idioma correspondiente se inserta en en el lugar correcto documento, por ejemplo, en elementos que cubren texto en diferentes idiomas. De esta manera, el lector de texto en pantalla puede determinar qué texto puede leer.

Agregar una hoja de estilo

Casi todas las páginas de un sitio web profesional correctamente diseñado utilizan hojas de estilo. Para especificar la hoja de estilo requerida, use un elemento en un bloque de documento HTML5:

Pequeño documento HTML5

Este método es similar a especificar hojas de estilo en documentos HTML tradicionales, pero un poco más simple. Porque solo hay un idioma mesas en cascada estilos - CSS, luego ya no es necesario agregar el atributo type="text/css", que anteriormente era necesario.

Agregar código JavaScript

Idioma secuencias de comandos JavaScript se creó originalmente como una forma laboriosa de agregar brillo y encanto a páginas web aburridas. Actualmente la zona principal Aplicaciones JavaScript ha pasado del desarrollo de interfaces lujosas al desarrollo de aplicaciones web personalizadas, incluidos clientes ultraeficientes correo electrónico, editores de texto y motores de mapeo que se ejecutan directamente en el navegador.

El código JavaScript se inserta en un documento HTML5 de la misma manera que se inserta en una página HTML tradicional. La siguiente lista es un ejemplo de cómo insertar código JavaScript en un documento web mediante un enlace a archivo externo:

Pequeño documento HTML5

El atributo language="JavaScript" es opcional porque, a menos que se especifique algún otro lenguaje de secuencias de comandos (y dado que JavaScript es el único lenguaje de secuencias de comandos ampliamente admitido para HTML, la probabilidad de que esto suceda es insignificante), los navegadores asumen automáticamente que se utiliza JavaScript. Pero incluso cuando se vincula a un archivo JavaScript externo, aún es necesario recordar la etiqueta de cierre. Si omite esta etiqueta debido a un descuido o al intentar acortar el código usando la sintaxis elementos vacios, entonces la página no funcionará correctamente.

Si pasa mucho tiempo probando sus páginas JavaScript en Internet Explorer, agregar una etiqueta puede resultar útil MOTW (Marca de la red- etiqueta de función de red) en el bloque inmediatamente después de la línea de codificación. Esto se hace de esta manera:

Pequeño documento HTML5

Esta línea de código le indica a Internet Explorer que trate la página como si estuviera cargada desde un sitio web remoto. De lo contrario, IE cambia a trato especial bloqueo, muestra una advertencia de seguridad en la línea de mensaje y se niega a ejecutar cualquier código javascript hasta que hagas clic en el botón "Permitir contenido bloqueado".

Todos los demás navegadores ignoran la marca MOTW y utilizan la misma configuración de seguridad tanto para las páginas cargadas desde sitios web remotos como para las archivos locales HTML.

El estándar HTML5 se utiliza cada vez más en el diseño web moderno. Y aunque todavía está en desarrollo, muchos de sus estándares ya han sido aprobados y son utilizados por todos los navegadores modernos, incluidos los móviles.

En este artículo veremos algunas características nuevas de HTML5 con ejemplos concretos su aplicación en la práctica

Nuevo TIPO DE DOCUMENTO

Recordemos cómo se determina la típica. documento XHTML en la sección DOCTYPE:

‹! TIPO DE DOCUMENTO html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

Declarar un tipo de documento en lenguaje de marcado parece mucho más conciso y legible

‹!TIPO DE DOCUMENTO html›

Además, puede utilizar este DOCTYPE al diseñar cualquier página. Si el navegador no está familiarizado con HTML5, mostrará la página en modo estándar.

Semántica de código mejorada

La semántica de código mejorada permite motores de búsqueda diferenciar claramente los tipos de contenido en la página, separar información importante, aumenta la clasificación de la página para consultas de búsqueda.

Elementos de encabezado y pie de página

Ahora puedes deshacerte de construcciones como

‹div id="encabezado"› … ‹/div› ‹div id="pie de página"› … ‹/div›

Y empiece a utilizar otros que sean más comprensibles tanto para los humanos como para las máquinas.

‹encabezado› … ‹/encabezado› ‹pie de página› … ‹/pie de página›

‹div› no tiene origen estructura semántica y se pueden anidar varias veces entre sí y dentro de otros contenedores. El uso de una estructura semántica más reflexiva permite al motor de búsqueda diferenciar claramente dónde se encuentra el encabezado, el pie de página y la parte de información principal.

elemento FIGURA

Considere el siguiente fragmento de código:

‹img src="mars.jpg" alt="Acerca de Marte" /› ‹p›This is an image of Mars‹/p› !}

En este caso, es difícil para los motores de búsqueda determinar que la etiqueta ‹p› que contiene una descripción de la imagen es en realidad su descripción. Por eso es mejor combinar tales estructuras en contenedor compartido, que es ‹figura ›:

‹figura› ‹img src="mars.jpg" alt="Acerca de Marte" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure› !}

En este caso habrá etiqueta adicional‹figcapture› , que especifica cuál es el contenido de la figura y cuál es su título

Usando hgroup

Imagine que el encabezado de su sitio web consta de un título principal y un subtítulo. El uso de las etiquetas habituales ‹h1› y ‹h2› no refleja de ninguna manera la relación entre estos dos elementos. Por lo tanto, se pueden combinar semánticamente usando la etiqueta ‹hgroup›:

‹header› ‹hgroup› ‹h1›Fotogalería ‹/h1› ‹h2›Nuestra vacante en Praga ‹/h2› ‹/hgroup› ‹/header›

No hay tipos para conectar scripts y hojas de estilo.

Es posible que todavía estés usando estructuras para conectar scripts, bibliotecas, hojas de estilo, etc. el siguiente tipo:

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

Por lo tanto, ahora ya no es necesario especificar el tipo de archivo que se incluirá. El navegador lo detectará automáticamente. Esto significa que el atributo tipo ya no es necesario:

‹enlace rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

Estructura del código

El estándar XHTML requería que los valores de los atributos se especificaran en formato único o comillas dobles. El estándar HTML5 permite omitir el uso de comillas si no son necesarias, es decir el valor del atributo se especifica en una palabra sin espacios. Además, ni siquiera es necesario cerrar los elementos emparejados. He aquí un ejemplo:

‹p clase=myClass id=pId›Contenido

Sin embargo, esto puede perjudicar la legibilidad del código por parte del desarrollador. Por lo tanto, el estilo de escritura del código depende completamente de usted, porque el estilo antiguo (probado por el tiempo) todavía es compatible.

Contenido editable

HTML5 le permite hacer que el contenido de su sitio sea completamente editable sin necesidad de pegarlo campos ocultos para ingresar texto. Todo lo que necesitas hacer es agregar el atributo contenteditable="true" (o sin comillas, como aprendimos en el párrafo anterior) al elemento que deseas que sea editable. Después de esto, el usuario podrá editar su contenido directamente desde la página.

En este caso, el usuario puede agregar, eliminar y editar elementos en la lista desordenada ‹ul›. A continuación se muestra un ejemplo de una lista cuyos elementos se pueden cambiar.

• Ver la televisión
• escuchar musica
• Jugar videojuegos

Nuevas características del formulario

HTML5 proporciona a los usuarios y desarrolladores grandes oportunidades para ingresar información en formularios. Para estos fines, se han agregado muchas cosas útiles. Veamos algunos de ellos.

Campos de entrada de correo electrónico

Utilice el atributo type="email" en la etiqueta ‹input› y los campos de entrada tendrán capacidades únicas adicionales para verificar la exactitud de la dirección ingresada y, si la dirección se ingresa incorrectamente, el navegador mostrará al usuario un mensaje de advertencia.

‹entrada id="correo electrónico" nombre="correo electrónico" tipo="correo electrónico" /›

El resultado podría ser así ( Google Chrome):

También hay otros campos de entrada, como direcciones de sitios web o números de teléfono. El principio de su funcionamiento es similar al campo del correo electrónico.

Usando sugerencias

Ahora no es necesario utilizar JavaScript para crear marcadores de posición para la entrada. campos de texto. HTML5 sugiere usar atributo especial marcador de posición, que puede mostrar información sobre herramientas de texto de fondo para el campo.

‹input name="correo electrónico" tipo="correo electrónico" placeholder=" [correo electrónico protegido]" /›

El resultado se muestra a continuación:

Este ejemplo solo funcionará en navegadores que admitan HTML5.

Correo electrónico:

Enfoque automático

Sin usando javascript puedes enfocar automáticamente un elemento después de que se carga la página. Para hacer esto, debe agregar un atributo sin parámetros al campo que debe ingresarse primero.

‹entrada nombre="nombre" tipo="texto" enfoque automático /›

El campo de nombre se activará automáticamente y estará listo para que usted ingrese texto.

Campos obligatorios

Si necesita marcar algunos campos como obligatorios, ahora solo necesita especificar el atributo. Así, al enviar el formulario, el navegador comprobará si el campos obligatorios y, en caso contrario, mostrará un mensaje.

‹input nombre="nombre" tipo="texto" marcador de posición="John Smith" required /› !}

A continuación se muestra una ilustración del resultado de este código (Google Chrome):

Entrada de rango

HTML5 representa absolutamente nuevo elemento controles: entrada de rango, que es un control deslizante cuyo valor se cambia arrastrando un marcador especial entre valores preestablecidos.

‹tipo de entrada="rango" nombre="cantidad" min="0" max="100" paso=".25" valor="10" /›

Los atributos mínimo y máximo se utilizan para establecer los valores extremos del control deslizante, el paso es el paso en el que se cambia el valor. El navegador Google Chrome muestra este control de la siguiente manera:

Este ejemplo solo funcionará en navegadores que admitan HTML5.

Almacenamiento local

El almacenamiento local le permite guardar la información ingresada por el usuario si la página del navegador se cierra o se recarga. Esto es muy conveniente, especialmente en los casos en que el formulario es bastante grande y el sitio se cerró accidentalmente.

Por si mismo Almacenamiento local No forma parte de la especificación HTML5, pero está estrechamente relacionado con ella.

Control almacenamiento local ocurre a través del objeto de clase localStorage usando dos métodos setData() y getData() . A continuación se muestra un ejemplo que utiliza la lista editable descrita anteriormente, que almacenará los últimos valores ingresados ​​en ella.

‹h1›Lista de tareas pendientes ‹/h1› ‹ul contenteditable=true› ‹li›Ver televisión ‹/li› ‹li›Escuchar música ‹/li› ‹li›Jugar videojuegos ‹/li› ‹/ul›

JavaScript (usando bibliotecas jQuery, pero esto es opcional):

$("#todo").blur(function () ( localStorage.setItem("todoData", this.html); )); if (localStorage.getItem("todoData")) ( $("#todo").html(localStorage.getItem("todoData")); )

Soporte multimedia

Ahora no es necesario utilizar complementos ni bibliotecas de terceros para conectarse varios audios y archivos de vídeo. Todas las capacidades de incrustación de medios ahora están incluidas en la especificación HTML5.

Audio

Para incrustar en una página archivo de sonido necesitas usar la etiqueta ‹audio› con los atributos necesarios. El siguiente ejemplo muestra en la página un bloque de control para un archivo de audio que contiene un enlace para descargar este archivo. El sonido se reproducirá automáticamente.

‹controles de reproducción automática de audio›
‹fuente src="archivo.ogg" /›
‹fuente src="archivo.mp3" /›
‹a href="file.mp3"›Descargar este archivo.‹/a›

en la pagina este bloque puede verse así ( navegador de google Cromo)

Ud. de esta etiqueta Los navegadores tienen sus propias funciones de soporte. Por ejemplo, navegador Firefox funciona con archivos .ogg, mientras que los navegadores Webkit funcionan con .mp3

Video

Hasta hace poco, la única forma de insertar contenido de vídeo en una página HTML era integrar contenido Flash. Sin embargo, esta capacidad ahora la proporcionan los propios navegadores que cumplen con las especificaciones HTML5. Esto ganó especial popularidad cuando el mayor sitio de alojamiento de vídeos, YouTube.com, cambió al formato HTML5.

Para integrar con éxito un vídeo en una página, debe utilizar la etiqueta ‹video›. Lamentablemente, entre los fabricantes de navegadores no hay consenso sobre el formato que debe presentarse el vídeo, por lo que cada uno promueve su propio formato. Mientras que IE y Safsri admiten vídeo H.264 (que era compatible con reproductores Flash), Opera y Firefox promueven fuente abierta Formatos Vorbis y Theora. Chrome, por otro lado, puede mostrar correctamente vídeos en todos los formatos, incluido WebM.

‹precarga de controles de vídeo› ‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹source src="video.mp4" type="video/mp4; codecs=" avc1.42E01E, mp4a.40.2"" /› ‹p›Su navegador es antiguo. ‹a href="video.mp4"›Descarga este video en su lugar. ‹/a› ‹/p› ‹/video›

No todos los navegadores pueden mostrar videos HTML5, por lo que debajo de la etiqueta ‹fuente› puede especificar un enlace para descargar el video o integrar un reproductor Flash.

El atributo de precarga permite que el navegador comience a cargar el vídeo automáticamente, lo que puede resultar útil si el vídeo es lo suficientemente grande. El atributo de controles le permite configurar elementos estandar control de transmisión de vídeo.

HTML5 nuevamente le evita buscar implementaciones JS. Si desea que el enfoque predeterminado se establezca en una entrada específica, solo necesita configurar el atributo de enfoque automático.

Ambos estilos de escritura también son posibles aquí, pero prefiero XHTML y escribo "autofocus=autofocus" . Aunque era posible escribir sólo el nombre del atributo.

13. Soporte de audio

Ya no necesitamos complementos de terceros para generar audio en las páginas. HTML5 nos da el . Ahora no necesitamos preocuparnos por ningún complemento para esto. Desafortunadamente, la compatibilidad del navegador con audio HTML5 tampoco es muy fluida. Hoy buen estilo considerado como compatible con versiones anteriores.

Descarga este archivo.

Mozilla y Webkit no son totalmente compatibles con esta solución. Firefox quiere ver archivos .ogg o .wav. Por lo tanto, hoy conviene crear y concretar ambos formatos.

Safari no es compatible con ogg, pero sí entiende mp3 y wav. IE9+ acepta AAC. MP3, las versiones anteriores no admiten etiquetas. Opera funciona con ogg y wav.

14. Soporte de vídeo

Al igual que con , el vídeo HTML5 sólo funciona en más o menos navegadores modernos. Por cierto, no hace mucho YouTube anunció un reproductor HTML5 para sus vídeos.. Lamentablemente, las especificaciones HTML5 no definen un códec para vídeo, por lo que los navegadores difieren en este sentido. IE9 y Safari admiten vídeo H.264, mientras que Opera y Firefox admiten theora y Formatos WebM. Por tanto, para garantizar el funcionamiento conviene utilizar 2 formatos.