El estándar HTML5 se finalizó y lanzó en 2014, y es lo que debería haber sido HTML cuando se lanzó la primera versión hace tantos años. HTML 2.0 fue el primer "estándar" verdadero, publicado en 1995. Dos años después, se publicó HTML 3. Otros dos años más tarde, se introdujo HTML 4.01 y ha sido el caballo de batalla de Internet desde entonces.
El primer 'borrador de trabajo' de HTML5 se introdujo en 2008, con una compatibilidad sorprendentemente amplia con el navegador en ese momento. El HTML5 que conocemos hoy es muy diferente del HTML del pasado, y aquí vamos a discutir qué cambió el último estándar con su lanzamiento. Desde que se lanzó HTML5, ha sido ampliamente aceptado y todas sus características y capacidades ahora son compatibles con todos los principales navegadores. Todavía hay algunos problemas aquí y allá, pero HTML5 en general se ha asimilado bien con la experiencia moderna en línea.
Como desarrollador web, podrías ser un viejo profesional que ha dominado los estándares más antiguos o un novato que curiosamente observa el desarrollo de nuevos estándares al margen. De cualquier manera, eventualmente debe comenzar la transición a HTML5.
HTML Vs HTML5 Infografía
El primer paso para hacer la transición a HTML5 o aprender es comprender la diferencia entre el estándar anterior y el último. Estas son algunas diferencias clave entre HTML y HTML5:
-
HTML5 es un lenguaje vivo
HTML5 es un lenguaje vivo, un trabajo en progreso. Es sorprendente ver lo que HTML5 puede hacer, pero también es importante saber que HTML5 no es una versión totalmente estandarizada como HTML4, que tiene más de diez años y es un estándar establecido, inmutable.
Si está entrando en HTML5, tendrá que hacer algunas actualizaciones. Los atributos y elementos se agregan y modifican regularmente cada año. Esto también depende de cuánto use elementos ricos, pero definitivamente es uno de los riesgos involucrados cuando se usa un lenguaje fluido y cambiante como HTML5.
-
HTML5 es más simple
Si bien HTML5 tiene riesgos como actualizaciones constantes, generalmente es fácil mantenerse al día con los cambios y actualizaciones debido a la sintaxis más simple en comparación con HTML4. Por ejemplo, tiene una declaración muy simple al comienzo de la página para configurarla como una página HTML5:
La simple declaración de Doctype es una de las simplificaciones realizadas en la sintaxis HTML, que es compatible con todas las versiones desde HTML4 y hasta XHTML1. Sin embargo, HTML5 no es compatible con SGML.
Cursos recomendados
- Entrenamiento gratuito de programación de Python
- Curso de certificación de prueba de software gratuito
- Cursos gratuitos de programación Java
- Curso completo de PERL
-
El nuevo elemento
HTML5 viene con una serie de elementos nuevos y elimina varios otros (que cubriremos en un momento), pero uno de sus elementos clave agregados es el que ha impactado enormemente el uso de Adobe Flash en los sitios web. Aunque Flash todavía está en uso en varios sitios web, HTML5 ha sido adoptado por muchas personas y mucha gente piensa que eventualmente hará que Flash quede obsoleto. Solo el tiempo decidirá eso; Hasta entonces, el elemento en cascada de HTML5 ha demostrado ser una buena alternativa a Flash.
El elemento se puede usar para dibujar gráficos con varias formas y colores mediante secuencias de comandos, generalmente JavaScript. El elemento es simplemente un contenedor para los gráficos; necesita usar un script para definir los gráficos. Por defecto, un lienzo es un área rectangular sin contenido ni bordes. El mercado es así:
Es importante especificar un atributo de identificación, así como el ancho y la altura para definir el tamaño del lienzo. Puede agregar un atributo de estilo para definir bordes.
También puede usar JavaScript, como el siguiente ejemplo:
var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");
ctx.fillStyle = "# FF0000";
ctx.fillRect (0, 0, 150, 75);
-
Lo nuevo y los elementos
Otra gran adición que viene con HTML5 son las novedades y los elementos, que indican una nueva anatomía web. Con estas nuevas etiquetas, ya no es necesario identificar los dos elementos con una etiqueta.
Las especificaciones definen el elemento de encabezado como la representación de un grupo de ayudas de 'navegación' o 'introductorias'. Como tal, el elemento se puede utilizar para definir una introducción a una sección de una página, o a toda la página en sí. Aquí hay un fragmento de código que usa el elemento de encabezado.
Título
Por autor archivado en la web 2.0
Cuerpo del texto
Las especificaciones HTML5 se refieren al elemento de pie como la representación de "un pie de página para su ancestro más cercano que secciona contenido o elemento raíz de seccionamiento", y que generalmente contiene información sobre la sección, como el nombre del autor, datos de copyright, enlaces a documentos, etc.
Lógicamente, el pie de página se coloca en la parte inferior de la página web. Pero también se puede colocar al final de una sección de página. Aquí hay un ejemplo de codificación que usa el elemento de pie de página:
Título del contenido
Por autor archivado en la web 2.0
Cuerpo del texto.
Etiquetas: Símbolo del sistema, Brújula, CSS, Sass, Terminal
10 me gusta
Aquí, el pie de página contiene etiquetas de publicación y la publicación 'Me gusta de Facebook'.
-
Los elementos
Ahora, si revisaste los ejemplos anteriores, habrías notado algunos elementos nuevos más, como el. Este elemento, junto con el elemento, le permite marcar secciones específicas de su diseño y son muy beneficiosas para la optimización de motores de búsqueda. El elemento del artículo se especifica como la representación de un componente autónomo de una página web para que sea reutilizable o distribuible de forma independiente. Esto podría ser un periódico, publicación en el foro, artículo de revista, entrada de blog o cualquier otra cosa.
El elemento de artículo generalmente tiene su propio encabezado en un elemento de encabezado, y tal vez incluso un pie de página, como viste en el ejemplo anterior. Simplemente puede pensar en el elemento como una entrada de blog o una pieza de contenido independiente; La parte difícil es identificar lo que es independiente. En pocas palabras, una pieza de contenido independiente es una que tiene sentido por sí misma.
Una buena manera de saber si un contenido es independiente es preguntando si tiene sentido dentro de una fuente RSS. Los artículos de blog y las páginas estáticas tienen sentido, y algunos sitios tienen comentarios. Pero un párrafo en el artículo no tendría ningún sentido separado del resto del contenido. Aquí hay un fragmento de código con pie de página y etiquetas de publicación.
Título del contenido
Publicado: 2016-02-24
Cuerpo del texto
Licencia Creative Commons Reconocimiento-CompartirIgual
El elemento de sección, de acuerdo con las especificaciones del W3C, que representa una 'sección genérica' de una aplicación o documento. Podría confundirse con la etiqueta, así que aclaremos la confusión en este momento. La etiqueta de sección se usa cuando el contenido dentro de ella debe agruparse por separado del resto de la página con un solo tema, y cuando debe verse como una entrada en el esquema de la página. Sin embargo, el elemento div se especifica como un "contenedor genérico", lo que significa que no está separado de la página principal en sí, aparte de sus propios atributos de título, idioma y clase.
-
Nuevo y elementos
Los elementos y elementos nuevos de HTML5 son parte de las especificaciones de Elementos interactivos, pero se encuentran entre los elementos menos comentados por los desarrolladores. Dado el hecho de que la web ha cambiado a más paginación y documentos vinculados, estos elementos son una adición bienvenida para una mayor interactividad web.
El elemento no debe confundirse con el elemento, que se define como una etiqueta de navegación HTML que representa el bloque de navegación de la página. Por lo general, contiene enlaces para que los usuarios salten a través de secciones dentro de la página o hacia otra página. Por otro lado, la etiqueta de menú representa los comandos de menú para simplificar en aplicaciones de escritorio y móviles. Aquí hay un ejemplo del elemento en acción:
Hola Mundo
Mientras tanto, el elemento es otra forma de organizar imágenes y texto. Se utiliza junto con el elemento para marcar ilustraciones, diagramas y fotos. A continuación se muestra un fragmento de código corto que presenta ambos elementos en acción.
-
Nuevo y elementos
Estas son dos adiciones principales al estándar HTML5. La etiqueta de audio, como la etiqueta de video, permite a los desarrolladores insertar música y audio en su sitio web. A diferencia del estándar anterior, no está limitado a agregar música midi, aunque todavía hay algunas limitaciones en el tipo de archivos utilizados. La mayoría de los navegadores relacionados con Webkit admiten archivos MP3 normales, pero otros solo admiten el formato OGG. La buena noticia es que hay toneladas de convertidores de archivos, y simplemente puede suministrar dos versiones del archivo de audio; la versión correcta se recogerá automáticamente.
Puede usar la etiqueta de audio como cualquier otro elemento. Aquí hay un fragmento de ejemplo:
La etiqueta de audio también tiene una serie de atributos para controles adicionales, incluidos los atributos de eventos, y los eventos incluyen eventos de ventana, eventos de formulario, eventos de medios y eventos de mouse. El elemento de video también tiene una serie de atributos de contenido, incluidos SRC, atributos globales, bucle, control, precarga y póster. Los atributos SRC, loop, autoplay y control son bastante explicativos e iguales para todos los elementos multimedia, mientras que los atributos globales son comunes para todos los elementos. Incluyen dir, oculto, menú contextual y más.
Hay algunos otros atributos y elementos multimedia que vienen con HTML5, como el elemento de pista que proporciona pistas de texto para el elemento de video.
-
Nuevas formas
HTML5 ahora viene con forma y elementos. Si no planea usar muchas tablas en la página, también puede eliminar el atributo y echar un vistazo a los cambios realizados antes de continuar.
-
No mas y elementos
Esto significa que todos los atributos que permiten a los desarrolladores crear una tabla perfectamente diseñada y teñida, como el borde, bgcolor, alinear, altura, reglas y más. Todos estos atributos son reemplazados por CSS.
-
No más y
Esto es genial para aquellos desarrolladores que trabajaron durante los primeros días del HTML. Los atributos frameset, frame y noframes se han eliminado por completo, junto con otros como blink, basefont y más. Tendrá que administrar sin usar tablas para el diseño. Las tablas siguen siendo parte de HTML5, pero ya no están destinadas a píxeles. Las especificaciones dicen que las tablas no deben usarse para ayudas de diseño y para controlar el diseño de la página.
Conclusión
Como puede ver claramente, hay muchos cambios en HTML5 y debe usarlo con cuidado y precaución. También debe actualizar sus conocimientos sobre el idioma a medida que cambia con el tiempo y obtiene más actualizaciones. Debe detener el uso de elementos que HTML5 ha eliminado de sí mismo y usar los nuevos elementos HTML5 que definitivamente permanecerán, como las etiquetas de encabezado o pie de página.
Lo que has visto anteriormente es la versión simplificada de cuántos cambios ha realizado HTML5 con su lanzamiento. Pero seamos honestos aquí; no hay nada simple o lento en la forma en que se está adoptando HTML5, y el nuevo estándar agrega muchas capacidades que son cruciales para una experiencia de usuario moderna. Necesita mantenerse al día con el nuevo lenguaje y también aprender algo de CSS, que tiene un papel más importante que antes.
Lo bueno de estos cambios es que, aunque son grandes, son para mejor y esto es entendido por todos los interesados involucrados aquí. Los navegadores serán más potentes a medida que avanzan hacia la nube, con la capacidad de manejar más por sí mismos. Con cosas como Ajax y con la incrustación de video y audio, etc., será mucho más fácil codificar en un método directo y permitir que el navegador asuma el trabajo pesado. Por ejemplo, los nuevos elementos de estructura como figura, pie de página, resumen y sección se refieren a la estructura del documento y la representación se deja al navegador.
Artículos relacionados:-
Aquí hay algunos artículos que lo ayudarán a obtener más detalles sobre el HTML frente a HTML5, así que simplemente vaya al enlace.
- HTML y XML
- HTML5 vs Flash Las 9 principales diferencias (con infografías)
- HTML vs XHTML
- HTML5 vs Flash
- Increíbles diferencias HTML5 vs JavaScript
- 10 consejos útiles impresionantes sobre programación en Python (trucos)