Introducción a HTML 5

A partir de 2022, HTML 5 es lo que deberías estar usando y otras tecnologías para el desarrollo web. Cualquier diseñador profesional de páginas web te dará la misma respuesta.

 

Un sitio web es uno de los componentes esenciales de Internet, señala la agencia de diseño web Málaga Limón Publicidad. Por ejemplo, la interfaz de usuario de cualquier sitio web permite a los visitantes explorar y conectar empresas, servicios y personas.

 

Una página web que se muestra en casi cualquier navegador o dispositivo se construye a partir del texto oculto de lenguajes informáticos especializados. Lenguajes que le dan estructura y conceptualización. Un lenguaje muy utilizado es el llamado HTML (HyperText Markup Language).

 

HTML es un lenguaje de marcado establecido que puede codificar el plano de una página web y representarlo en una pantalla. HTML 5 define todos los aspectos de cualquier página web, desde la representación visual hasta los puntos en los que se puede hacer clic.

HTML 5 es fácil de aprender

 

Crear un sitio web puede ser fácil con el uso y el conocimiento de HTML 5. Para empezar con HTML 5, se necesita un programa editor de texto. Por ejemplo, un desarrollador web podría utilizar un editor de texto para escribir código, guardar ese documento como un archivo HTML y publicar ese archivo en un servidor web. Algunas aplicaciones y editores son Notepad, Adobe Dreamweaver y TextPad.

Etiquetas HTML

 

El contenido de la página web se muestra a partir del código HTML y otros lenguajes de programación.

 

HTML5 consiste en una serie de palabras clave que se encierran entre corchetes angulares («< >») llamados «etiquetas».  Ejemplos de etiquetas HTML5 son los párrafos (<p>, </p>), las imágenes (<img>, </img>), las tablas de hojas de cálculo (<table>, </table>) y (<a>, </a>) .

 

Crear un elemento de una página Web consiste en escribir una etiqueta de inicio (una palabra clave entre corchetes angulares) y una etiqueta de cierre (la misma etiqueta pero con el símbolo / delante de la palabra clave) para establecer el elemento.

 

Dependiendo del tipo de elemento, es posible insertar una cadena de texto u otra etiqueta entre las etiquetas de inicio y fin. Todo elemento que se añada al texto HTML debe estar dentro de la etiqueta HTML (<html>, </html>). Otra etiqueta importante necesaria para una página web es la etiqueta head (<head>, </head>). Por ejemplo, el elemento que contiene la página web, como el título y el CSS. La etiqueta body (<body>, </body>) es donde están todos los elementos visuales de la página web, como el texto, las imágenes y los enlaces.

Atributos de las etiquetas

 

Es posible modificar el estilo de los elementos mediante la etiqueta «attributes».  Para cambiar el estilo de una etiqueta, un desarrollador front-end o full-stack (el desarrollador back-end se especializa en secuencias de comandos del lado del servidor) escribe una palabra clave de atributo después del nombre del elemento dentro de los corchetes de la etiqueta de inicio para especificar el estilo de ese elemento. Los elementos tienen una amplia gama de estilos modificables, como cambiar el color, la fuente y el tamaño del texto o ajustar la posición, las dimensiones y el aspecto de los bordes de una imagen. Es posible aplicar más de un estilo a un elemento escribiendo varios atributos en una etiqueta. Estos atributos son opcionales y su compatibilidad varía de un elemento a otro. Los atributos no forman parte de HTML, pero su lenguaje se llama CSS 3 (Cascading Style Sheets).

En línea, integrado y externo

 

Tres tipos diferentes de CSS definen la apariencia de los elementos de las etiquetas:

 

    Estilos en línea

    estilo integrado

    hojas de estilo externas

 

Los estilos en línea son atributos codificados directamente en la etiqueta de un elemento, que pueden incluso anular cualquier estilo definido en las otras dos hojas de estilo.

 

Las hojas de estilo incrustadas son una serie de estilos que proporcionan un aspecto coherente a toda una página Web.

 

Las hojas de estilo externas son una lista de atributos de etiquetas codificados en un archivo de texto independiente que estiliza el aspecto de varias páginas Web enlazadas a él. La elección de los atributos y hojas de estilo más apropiados suele depender de las preferencias del desarrollador Web o del diseño de la página.

 

Diseño web HTML 5

Programas de construcción de sitios web más fiables

 

HTML es uno de los programas de construcción de sitios web más fiables y estándares reconocibles en la industria informática. HTML5 es un lenguaje de codificación muy fiable que muchos desarrolladores web respaldan, y su popularidad no disminuirá pronto. Según Clayton Hamsher, del Informe HTML5, el uso de HTML5 entre los desarrolladores de aplicaciones web aumentó del 33% al 39% de 2013 a 2015, y el 14% de los desarrolladores adoptó HTML5 como su principal tecnología de codificación. Se espera que HTML5 amplíe su funcionalidad a medida que mejore el software de desarrollo web.

Compatibilidad con navegadores y dispositivos

 

HTML5 también se ha convertido en un lenguaje compatible con muchos navegadores y dispositivos de Internet. El laboratorio de innovación de SPi Global informa que HTML5 está hecho para ser compatible con múltiples navegadores Web y dispositivos que tienen funcionalidades Web, haciendo que navegadores como Internet Explorer, Google Chrome, Opera y Mozilla Firefox, junto con dispositivos como el iPhone, iPad y el Galaxy Tab sean utilizables con HTML5. También reconocen que, dado que HTML5 no está bajo el control de ninguna empresa, se considera un estándar abierto, lo que permite a los desarrolladores web utilizar la libertad de creatividad para implementar tantas funciones a una página HTML5 como consideren oportuno.

Historia de HTML 5

 

Para explicar adecuadamente la historia de HTML 5, es necesario hacer un análisis del lenguaje HTML. La primera versión de HTML, o HTML 1, era un lenguaje de edición sencillo que no incluía algunas de las características de las que disfrutan hoy los desarrolladores de sitios web, como las etiquetas de imagen o tabla utilizadas para desarrollar sitios web modernos. HTML se iría actualizando gradualmente a lo largo de HTML 2, a medida que los desarrolladores iban añadiendo distintas características, como la etiqueta p o párrafo y la etiqueta li o lista. Tras HTML 2, la siguiente versión de desarrollo de HTML llegó en HTML 3.2, que supuso una actualización masiva o la implementación de hojas de estilo. También se añadieron el elemento de fuente, los applets y los datos tabulares con las etiquetas table, tr y td.

HTML 3.2, XHTML

 

Poco después de HTML 3.2 se empezó a trabajar en HTML 4, pero el W3C (Consorcio de la World Wide Web) interrumpió el proyecto en 1998. Esto abriría la puerta a XHTML, el supuesto sustituto de HTML, que los desarrolladores pensaban que sería más limpio. Sin embargo, XHTML tenía muchos defectos en sus primeras versiones que frustraban a los desarrolladores. La mayoría de los problemas se debían a las estrictas directrices a la hora de escribir el código. Si te olvidas de cerrar las etiquetas en el marcado medio, tu sitio web no se convertirá en un completo error, pero esto no ocurría con XHTML. En XHTML 1, si te olvidabas de cerrar una etiqueta, el sistema no cubría la información que faltaba. En su lugar, hacía que todo el sitio web mostrara un mensaje de error gigante.

 

Tras su primera versión, se suponía que XHTML 2 sería una continuación que sentaría las bases de los estándares web. Sin embargo, esto nunca fue así, y el sistema cometió el enorme error de no ser desarrollado para ser compatible con versiones anteriores. Esto supuso un gran problema, ya que mucha gente seguía utilizando versiones anteriores de HTML.

Grupo de trabajo sobre tecnología de aplicaciones de hipertexto web

 

Así que, tras la debacle de XHTML, un grupo llamado The Web Hypertext Application Technology Working Group WHAT WG decidió agruparse y empezar a trabajar en el futuro de HTML. Estaban hartos del XHTML, como muchos otros desarrolladores de la época. El grupo comenzó el desarrollo con unas pocas directrices: compatibilidad con versiones anteriores y concordancia entre especificaciones e implementaciones.

 

Para comenzar su trabajo, el grupo de trabajo WHAT empezó a redactar un documento en el que se detallaba cómo debía escribirse y analizarse HTML. No se trataba de un pequeño logro. Fue fundamental para el desarrollo de HTML 5. Antes de que se elaborara este documento, muchos navegadores web no disponían de las bases necesarias para tratar los errores en el código. Para cambiar esto, hubo que completar un largo proceso de ingeniería inversa en diferentes navegadores como Firefox, Safari, Opera e Internet Explorer, cada uno incorporando la implementación del otro. Esto acabaría dando paso al Parser HTML5. Todos los navegadores modernos siguen ahora sus directrices.

W3C Y QUÉ

 

Tras un breve periodo en el que el W3C y el WHAT WG se ignoraron mutuamente. Los dos grupos trabajaban entonces en proyectos separados y, al parecer, el W3C aún no había perdido el interés por XHTML. El WHAT WG empezó a trabajar en HTML 5 en 2004, con desarrolladores de Apple, la Fundación Mozilla y Opera Software. En 2006, el W3C anunció que había empezado a trabajar con el WHAT WG para desarrollar HTML 5.

 

En 2008 se publicó la primera versión de HTML 5. Ian Hickson escribió el software. Algunos de los objetivos del software HTML 5 eran crear un código fácil de leer y garantizar que el software estuviera a la altura de los formatos multimedia actuales. Además, se implementaron nuevas etiquetas en el software, que incluyen las etiquetas <video>, <audio>, <canvas>, <section> y <article>. También se añadieron etiquetas descriptivas como <nav> y <footer>, mientras que se suprimieron las etiquetas <font> y <center>. HTML 5 incorpora API de secuencias de comandos (no del lado del servidor), como arrastrar y soltar, mensajería entre documentos, almacenamiento web y geolocalización.

Avance rápido hacia HTML 5

 

En la cronología de HTML 5, ciertos acontecimientos clave durante su creación llevaron al lenguaje al estado en que se encuentra hoy. Por ejemplo, determinadas aplicaciones se hicieron compatibles con HTML 5, empezando por Firefox 3 en 2008 y YouTube ofreciendo un reproductor de vídeo HTML 5. Uno de los acontecimientos más críticos en el desarrollo de HTML 5 se produjo cuando Steve Jobs, CEO de Apple, anunció que Flash ya no era necesario para reproducir contenido multimedia en los dispositivos de Apple en abril de 2010. Sin embargo, otras aplicaciones como la Chrome Web Store incorporan HTML 5, lo que mejora la flexibilidad de la venta de aplicaciones en dispositivos que no son de Apple, como las tabletas. Adobe eliminaría Flash por completo de los dispositivos móviles en noviembre de 2011.

 

Como dice Ian, HTML 5 sigue creciendo y desarrollándose, ya que es un producto que nunca estará realmente acabado. Es un lenguaje en constante crecimiento que seguirá teniendo origen en el futuro. Sin embargo, la adopción de HTML 5 en distintas plataformas ha superado los mil millones desde enero de 2013, cuando los smartphones empezaron a adoptar el lenguaje. Es probable que muchos más productos hayan pasado a HTML 5 en la actualidad. En resumen, HTML 5 se ha generalizado en diferentes aplicaciones y empresas, lo que lo convierte en un lenguaje clave para la web actual.

Lo que hay que saber sobre HTML

 

En conclusión, HTML 5 tuvo un proceso de desarrollo muy largo que se convirtió en XHTML, con una codificación estricta, y luego volvió a un largo ciclo de desarrollo que incluyó múltiples características añadidas y eliminadas. Internet está cambiando, y es probable que HTML 5 siga ajustándose y manteniéndose para adaptarse a los estándares actuales hasta que se trabaje en un nuevo lenguaje HTML 6. Sin embargo, hasta entonces, sólo podemos predecir si el desarrollo continuado del lenguaje HTML 5 será tan largo y agotador en los últimos años como lo fue al principio.