HTML, Novedades de HTML5 y Semántica

Todo aquello que se utilice constantemente debe tener actualizaciones de lo contrario surgirá nueva competencia que lo remplazara con mejores features.

HTML5 es la última versión de HTML

HTML evoluciona en distintos intervalos de tiempo y en esta última versión nos trae las nuevas características como etiquetas, atributos, APIS y nuevo comportamiento.

Nuevos recursos clasificados de HTML5

• Semántica: Permite describir con mayor precisión cual es su contenido.
• Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
• Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.
• Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente.
• Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
• Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.
• Acceso al dispositivo: Proporciona APIs para el uso de varios compomentes internos de entrada y salida de nuestro dispositivo.

Por ahora me enfocare en hablar de su semántica

Cada elemento de HTML se crea con el fin de semantisar el código y tenerlo cada vez más ordenad. Esto define que timpo de contenido puede tener cada elemento o etiqueta.

Hay más 7 tipos de categorías y cada elemento de HTML debe de encajar en almenos un tipo de ellas

• Metadata
• Embedded => Contenido incrustado
• Interactive => Contenido interactivo
• Heading => Contenido de título
• Phrasing => Contenido textual o estático
• Flow => Contenido dinámico
• Sectioning => Contenido de seccionamiento

METADATA

metadata modifican la presentación o el comportamiento del documento.
Estos elementos se encuentran dentro de la etiqueta head
Etiquetas:
<base>, <link>, <meta>, <script>, <style> ,<title> y otros más.

EMBEDDED
El contenido incrustado o embebido, importa otros recursos o inserta contenido desde otro lenguaje de marcado o espacio de nombres en el documento.
Etiquetas:
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>.

INTERACTIVE
El contenido interactivo incluye elementos que han sido diseñados específicamente para la interacción con el usuario.
Etiquetas:
<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.

HEADING
EL contenido de encabezado, define el título de una sección
Etiquetas:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> y <hgroup>.

PHRASING
Este contenido define como el usuario visualiza nuestros textos.
Etiquetas:
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command> y otros más.

FLOW
Son los elemntos cuyo contenido debe de ser representado en el navegador web, generalmente contienen textos o embebidos, la mayoria de elementos perteneces a este tipo de contenido.
Etiquetas:
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br> y otros más.

SECTIONING
Este tipo de contenido se encarga de dividir el contenido por secciones
Etiquetas:
<footer>, <header>, <article>, <aside>, <nav> y <section>, y nuestro querido <div>

Puedes encontrar más información en los siguientes enlaces.
https://developer.mozilla.org/es/docs/HTML/HTML5
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

Espero te haya gustado este tutorial 😃