DEV Community: gilq

Comentarios en HTML: El diario secreto del desarrollador 📝

gilq — Sun, 29 Mar 2026 00:46:22 +0000

¿Alguna vez has abierto un proyecto después de 6 meses y te has preguntado: "¿Qué rayos estaba pensando cuando hice esto?"? Si la respuesta es sí, es porque no usaste suficientes comentarios. Hoy vamos a aprender a escribir notas que el navegador ignora, pero que tus colegas amarán.

🙈 ¿Qué es un comentario?

Un comentario es un bloque de texto que el navegador omite por completo al renderizar la página. No aparece en la pantalla, no ocupa espacio visual, pero vive en el código fuente para guiar a los humanos.

🛠️ ¿Para qué usarlos realmente?

Explicar lógica compleja: "Este div es para el slider de la promo de verano".
Organizar secciones: Marcar dónde empieza el Header y dónde termina el Footer.
Desactivar código temporalmente: Probar cómo se ve la web sin un botón sin tener que borrarlo.

Código: La Sintaxis de la Invisibilidad

<section>
  <h2>Nuestros Servicios</h2>
</section>
<!-- este es un comentario->
<img src="banner.jpg" alt="Promoción">

Tip para el Futuro Senior:

No comentes lo obvio. No escribas `encima de un

`. Los comentarios deben explicar el PORQUÉ, no el QUÉ.

Mal: <h1>Hola</h1>
Bien: <h1>Hola</h1>

Advertencia: Recuerda que cualquiera puede ver tus comentarios haciendo "Clic derecho > Ver código fuente". ¡No guardes contraseñas ni insultos ahí dentro! 😂

Meta Charset UTF-8: El Escudo contra los símbolos raros 🛡️

gilq — Sun, 29 Mar 2026 00:41:49 +0000

¿Alguna vez has entrado a una web y en lugar de "Mañana" has leído "MaÃ±ana"? Ese es el síntoma de una web sin alma... o mejor dicho, sin UTF-8. Hoy vamos a entender por qué esta es la primera etiqueta que debes escribir en tu <head>.

🔠 ¿Qué es la Codificación?

Las computadoras no entienden letras, solo números (ceros y unos). La codificación es el "diccionario" que le dice al navegador: "El número 241 es una ñ".

Antiguamente, cada país tenía su propio diccionario. Si abrías una web española en un navegador configurado para inglés, los acentos se rompían. UTF-8 llegó para ser el Traductor Universal.

🌍 ¿Por qué UTF-8 es el estándar?

UTF-8 (Unicode) es capaz de representar prácticamente cualquier carácter de cualquier idioma del mundo:

Acentos y Ñ: ¡Indispensable en español!
Emojis: Sí, los 🔥 y 🚀 también son caracteres.
Alfabetos complejos: Japonés, Árabe, Griego, etc.

Código: La Línea Obligatoria

<head>
    <meta charset="UTF-8">

    <title>Mi Web Profesional</title>
</head>

Tip para el Futuro Senior:

Coloca la etiqueta <meta charset="UTF-8"> dentro de los primeros 1024 bytes de tu archivo HTML (básicamente, justo después de abrir el <head>). ¿Por qué? Porque el navegador necesita saber cómo leer el resto de las etiquetas antes de que el archivo se vuelva demasiado pesado. Si la pones al final, ¡podría ser demasiado tarde!

Etiquetas : Las instrucciones secretas de tu Web 🕵️‍♂️

gilq — Sun, 29 Mar 2026 00:38:29 +0000

Si el HTML es un libro, las etiquetas <meta> son la ficha técnica de la biblioteca. No forman parte de la historia (el contenido visible), pero le dicen al bibliotecario (el navegador) y al lector (Google) de qué trata, en qué idioma está y cómo debe abrirse.

🔌 ¿Para qué sirven realmente?

Las etiquetas <meta> viven exclusivamente dentro del <head>. Sus funciones principales son:

Configuración técnica: Definir el juego de caracteres o la compatibilidad.
SEO (Buscadores): Darle a Google una descripción para mostrar en sus resultados.
Responsividad: Adaptar la web a celulares.
Redes Sociales: Controlar cómo se ve tu link cuando lo compartes en WhatsApp o X (Twitter).

🚀 Código: El "Kit de Supervivencia"

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Domina HTML. La guía definitiva para convertirte en Senior.">

    <meta name="keywords" content="HTML, Web Dev, Senior, Learning">
</head>

Tip para el Futuro Senior:

¿Has notado que al compartir un link en Discord o Slack aparece una "tarjeta" con imagen y título? Eso se logra con las etiquetas Open Graph (og:). Si quieres que tu web se vea profesional al ser compartida, DEBES incluirlas.

<meta property="og:title" content="Mi Pagina">
<meta property="og:image" content="banner-pro.jpg">

Etiqueta : Tu primera impresión en el mundo 🌍</h1> <p>gilq — Sun, 29 Mar 2026 00:36:35 +0000</p> <p>Si el <code><head></code> es el cerebro de tu web, la etiqueta <code><title></code> es su <strong>nombre y apellido</strong>. No aparece dentro de la página blanca, pero es el texto más importante que escribirás para el SEO (Optimización en Buscadores).</p> <h3> 🔍 ¿Dónde aparece el título? </h3> <p>Muchos principiantes la confunden con el <code><h1></code>, pero el <code><title></code> vive en tres lugares críticos:</p> <ol> <li> <strong>La pestaña del navegador:</strong> Ayuda al usuario a encontrar tu web entre 50 pestañas abiertas.</li> <li> <strong>Resultados de búsqueda (Google):</strong> Es el enlace azul gigante en el que la gente hace clic.</li> <li> <strong>Marcadores/Favoritos:</strong> Es el nombre con el que se guarda tu sitio.</li> </ol> <h3> 🏗️ La Fórmula Maestra para un <code><title></code> PRO </h3> <p>Un Arquitecto Web no escribe simplemente "Inicio". Usa una estructura que venda:<br> <code>Palave Clave Principal | Nombre de la Marca</code></p> <h3> 🚀 Código: Configuración de Éxito </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><head></span> <span class="nt"><title></span>Página de Inicio<span class="nt"></title></span> <span class="nt"><title></span>Curso de HTML Pro | Domina 2000 temas con John<span class="nt"></title></span> <span class="nt"></head></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>Mantén tus títulos entre <strong>50 y 60 caracteres</strong>. Si te pasas, Google cortará el texto con "..." y perderás clics. Además, intenta que cada página de tu sitio tenga un título <strong>único</strong>. Si todas se llaman igual, Google se confundirá y tu SEO caerá al suelo.</p> </article> <article> <h1>Etiqueta <body>: El Escenario Principal</h1> <p>gilq — Sun, 29 Mar 2026 00:34:38 +0000</p> <p>Si el <code><head></code> es el cerebro invisible, el <code><body></code> es el cuerpo, el corazón y el alma de tu sitio web. Todo lo que el usuario puede ver, tocar, leer o clickear <strong>DEBE</strong> vivir dentro de estas etiquetas. Si no está en el body, para el usuario simplemente no existe.</p> <h3> 🖼️ El Lienzo del Arquitecto </h3> <p>El <code><body></code> es el contenedor de todos los elementos visuales:</p> <ul> <li> <strong>Textos:</strong> Títulos (<code>h1</code>), párrafos (<code>p</code>), listas (<code>ul</code>).</li> <li> <strong>Multimedia:</strong> Imágenes (<code>img</code>), videos, audios.</li> <li> <strong>Interactividad:</strong> Botones, formularios, enlaces.</li> <li> <strong>Estructura:</strong> Secciones, artículos, barras laterales.</li> </ul> <h3> 🛠️ Los Atributos que debes conocer </h3> <p>Aunque el diseño se hace con CSS, el <code><body></code> tiene superpoderes que un <strong>Arquitecto Web</strong> aprovecha:</p> <ol> <li> <strong>Clases Dinámicas:</strong> Usar <code><body class="dark-mode"></code> para cambiar el estilo de TODA la página con una sola palabra.</li> <li> <strong>Eventos Globales:</strong> Detectar cuando el usuario hace scroll o cuando la página termina de cargar.</li> </ol> <h3> 🚀 Código: El Corazón de la Página </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><body></span> <span class="nt"><header></span> <span class="nt"><h1></span>Bienvenido al Master Curriculum de John<span class="nt"></h1></span> <span class="nt"></header></span> <span class="nt"><main></span> <span class="nt"><p></span>Aquí es donde el contenido cobra vida.<span class="nt"></p></span> <span class="nt"><button></span>¡Haz clic aquí!<span class="nt"></button></span> <span class="nt"></main></span> <span class="nt"><footer></span> <span class="nt"><p></span><span class="ni">©</span> 2026 - El camino a Senior<span class="nt"></p></span> <span class="nt"></footer></span> <span class="nt"></body></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>Mantén tu <code><body></code> limpio. No amontones etiquetas sin sentido. Usa <strong>HTML Semántico</strong> (como <code><main></code>, <code><nav></code>, <code><section></code>) dentro del body para que Google y los lectores de pantalla entiendan la jerarquía de tu contenido. Un body organizado es un body rápido.</p> </article> <article> <h1>Etiqueta <head>: El Cerebro Invisible de tu Web 🧠</h1> <p>gilq — Sun, 29 Mar 2026 00:33:08 +0000</p> <p>Si el HTML fuera un ser humano, el <code><head></code> sería su mente. Aquí no vive nada que el usuario pueda tocar o ver directamente en la página, pero sin él, tu sitio sería invisible para Google, mudo para las redes sociales y sordo para el diseño responsivo.</p> <h3> ¿Qué sucede en el Cuartel General? </h3> <p>Dentro del <code><head></code> se gestiona toda la configuración crítica del documento:</p> <ol> <li> <strong>Metadatos (<code><meta></code>)</strong>: Instrucciones para el navegador y buscadores (SEO).</li> <li> <strong>Identidad (<code><title></code>)</strong>: El nombre que aparece en la pestaña del navegador.</li> <li> <strong>Conexiones (<code><link></code>)</strong>: El puente hacia tus archivos CSS e iconos (favicons).</li> <li> <strong>Comportamiento (<code><script></code>)</strong>: El acceso a la lógica de JavaScript.</li> </ol> <h3> Código: Un Head de Alto Rendimiento </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span> <span class="nt"><title></span>Master Curriculum | John<span class="nt"></title></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"estilos.css"</span><span class="nt">></span> <span class="nt"></head></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>No satures el <code><head></code>. Cada archivo CSS o JS que pongas aquí detiene el renderizado de la página hasta que se descarga. Un <strong>Arquitecto Web</strong> sabe qué scripts poner aquí y cuáles enviar al final del <code><body></code> para que la web cargue como un rayo. ⚡</p> </article> <article> <h1>Etiqueta <html>: El Universo de tu Web</h1> <p>gilq — Sun, 29 Mar 2026 00:30:42 +0000</p> <p>Si tu sitio web fuera un organismo vivo, la etiqueta <code><html></code> sería la piel que lo contiene todo. Es el elemento raíz (<em>root</em>) y absolutamente nada en tu página puede existir fuera de sus fronteras.</p> <h3> El Rey de la Jerarquía </h3> <p>El navegador utiliza esta etiqueta para saber dónde empieza y dónde termina el documento. Es el ancestro común de todos los elementos (el "padre de todos"). </p> <h3> 🛠️ Los Atributos que te hacen PRO </h3> <p>Un desarrollador novato deja la etiqueta vacía: <code><html></code>. Un <strong>Arquitecto Web</strong> como tu utilizas los atributos estratégicos:</p> <ol> <li> <strong><code>lang="es"</code></strong>: (Obligatorio para Seniors) Le dice a los motores de búsqueda y a los lectores de pantalla en qué idioma está el contenido. Evita que el navegador pregunte "¿Quieres traducir esta página?".</li> <li> <strong><code>dir="ltr"</code></strong>: Define la dirección del texto (de izquierda a derecha). Fundamental si algún día trabajas con idiomas como el árabe (<code>rtl</code>).</li> </ol> <h3> Código : La Raíz Perfecta </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><html</span> <span class="na">lang=</span><span class="s">"es"</span><span class="nt">></span> <span class="nt"><head></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"></body></span> <span class="nt"></html></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>En CSS, puedes seleccionar este elemento usando el selector <code>:root</code>. Es la mejor práctica para declarar tus <strong>Variables CSS</strong> (colores, tamaños, fuentes) porque garantiza que estarán disponibles para absolutamente todos los elementos de tu sitio.</p> </article> <article> <h1>El Esqueleto Universal: Estructura básica de un documento HTML</h1> <p>gilq — Sun, 29 Mar 2026 00:27:58 +0000</p> <p>Todo rascacielos empieza con unos planos sólidos. En la web, ese plano es el <strong>Boilerplate</strong>. No importa si estás creando Facebook o el blog de tu perro, todos comparten el mismo ADN.</p> <h3> Las piezas del rompecabezas </h3> <ol> <li> <strong><code><!DOCTYPE html></code></strong>: No es una etiqueta, es una declaración. Le grita al navegador: "¡Oye, prepárate para procesar HTML moderno!".</li> <li> <strong><code><html></code></strong>: El contenedor raíz. Todo nace y muere aquí dentro.</li> <li> <strong><code><head></code></strong>: El centro de control. Metadatos, títulos, enlaces a CSS y scripts que el usuario no ve, pero que hacen que la web funcione.</li> <li> <strong><code><body></code></strong>: El escenario. Aquí es donde vive el contenido real que tus usuarios consumirán.</li> </ol> <h3> Código: El "Hola Mundo" Profesional </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"es"</span><span class="nt">></span> <span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span> <span class="nt"><title></span>Mi Gran Proyecto - John<span class="nt"></title></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><h1></span>¡Hola desde la estructura maestra!<span class="nt"></h1></span> <span class="nt"><p></span>Este es el contenido visible que el navegador renderiza.<span class="nt"></p></span> <span class="nt"></body></span> <span class="nt"></html></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>Nunca olvides el atributo <code>lang="es"</code> en la etiqueta <code><html></code>. No solo ayuda a Google a indexar tu sitio en el idioma correcto, sino que permite que los <strong>lectores de pantalla</strong> para personas con discapacidad visual usen la pronunciación adecuada. ¡La accesibilidad empieza en la primera línea!</p> </article> <article> <h1>El viaje del código: ¿Cómo funciona el navegador con HTML?</h1> <p>gilq — Sat, 28 Mar 2026 03:47:33 +0000</p> <p>Cuando escribes <code>index.html</code> y lo abres en Chrome o Safari, sucede una coreografía de milisegundos que transforma texto plano en una interfaz visual. ¿Alguna vez te has preguntado qué pasa "bajo el capó"?</p> <h3> 1. El Nacimiento del DOM </h3> <p>El navegador no "lee" el HTML como nosotros. Lo desglosa y crea el <strong>DOM</strong> (<em>Document Object Model</em>). Es un árbol genealógico donde el <code><html></code> es el abuelo, el <code><body></code> es el padre y tus etiquetas son los hijos. Si el DOM está roto, tu sitio no funciona.</p> <h3> 2. El Árbol de Renderizado (Render Tree) </h3> <p>Mientras se crea el DOM, el navegador lee el CSS y crea el <strong>CSSOM</strong>. Luego, junta ambos para crear el <strong>Render Tree</strong>. Aquí es donde el navegador decide: "Este elemento se ve, este no (display: none)".</p> <h3> 3. Layout y Paint (El momento de la verdad) </h3> <ul> <li> <strong>Layout (Reflow):</strong> El navegador calcula el tamaño y la posición exacta de cada caja en la pantalla (geometría pura).</li> <li> <strong>Paint:</strong> Finalmente, el navegador "pinta" los píxeles (colores, bordes, sombras e imágenes).</li> </ul> <h3> Código: ¿Por qué importa el orden? </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><head></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"pesado.js"</span><span class="nt">></script></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><h1></span>Contenido instantáneo<span class="nt"></h1></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"pesado.js"</span><span class="nt">></script></span> <span class="nt"></body></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>Cada vez que cambias un estilo con JavaScript (como el ancho de un div), obligas al navegador a repetir el proceso de <strong>Layout</strong> y <strong>Paint</strong>. Si lo haces muchas veces por segundo, la web se verá lenta. ¡Optimiza tus animaciones usando <code>transform</code> para evitar el Reflow!</p> </article> <article> <h1>¿Qué es HTML5? (Mucho más que una versión)</h1> <p>gilq — Sat, 28 Mar 2026 03:40:22 +0000</p> <p>Si crees que HTML5 es solo "HTML con etiquetas nuevas", prepárate. HTML5 fue el terremoto que destruyó la necesidad de usar Flash, Java Applets y otros complementos externos que hacían que la web fuera lenta y peligrosa.</p> <h3> El Ecosistema HTML5 </h3> <p>HTML5 no es solo lenguaje de marcado; es una <strong>trinidad tecnológica</strong>:</p> <ol> <li> <strong>Estructura Semántica:</strong> Etiquetas con significado (<code><header></code>, <code><article></code>, <code><main></code>).</li> <li> <strong>CSS3:</strong> Estilo avanzado, animaciones y diseño responsivo nativo.</li> <li> <strong>JavaScript APIs:</strong> El verdadero poder. Acceso a la cámara, GPS, almacenamiento local y gráficos 2D/3D (Canvas).</li> </ol> <h3> El fin de los Plugins </h3> <p>Antes de HTML5, para ver un video necesitabas "Adobe Flash Player". Si no lo tenías actualizado, no veías nada. HTML5 introdujo las etiquetas <code><video></code> y <code><audio></code>, permitiendo que los navegadores reprodujeran multimedia de forma nativa, segura y mucho más rápida.</p> <h3> Código de la Nueva Era </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><object</span> <span class="na">data=</span><span class="s">"video.swf"</span> <span class="na">type=</span><span class="s">"application/x-shockwave-flash"</span><span class="nt">></span>...<span class="nt"></object></span> <span class="nt"><video</span> <span class="na">controls</span> <span class="na">width=</span><span class="s">"640"</span><span class="nt">></span> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"mi-video.mp4"</span> <span class="na">type=</span><span class="s">"video/mp4"</span><span class="nt">></span> Tu navegador no soporta video nativo. <span class="nt"></video></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>HTML5 introdujo el concepto de <strong>Web Storage</strong>. Ahora puedes guardar datos en el navegador del usuario (<code>localStorage</code>) sin necesidad de bases de datos complejas para cosas pequeñas. Esto permite que tu web funcione incluso si el usuario pierde la conexión a internet.</p> </article> <article> <h1>HTML vs XHTML: El orden contra el caos</h1> <p>gilq — Sat, 28 Mar 2026 03:37:34 +0000</p> <p>A principios de los años 2000, la web estuvo a punto de cambiar para siempre. Hubo un movimiento que quería que el HTML fuera tan estricto como el XML. Si cometías un error mínimo, ¡la página simplemente no cargaba!</p> <h3> XHTML: La dictadura del código limpio </h3> <p>El <strong>XHTML</strong> (<em>Extensible HyperText Markup Language</em>) nació con una misión: obligar a los desarrolladores a ser perfectos. </p> <ul> <li> <strong>Reglas de oro:</strong> Todo debía estar en minúsculas, todas las etiquetas debían cerrarse (<code><br /></code> en lugar de <code><br></code>) y los atributos no podían estar solos (<code>disabled="disabled"</code>).</li> <li> <strong>El problema:</strong> Si olvidabas una barra diagonal, el navegador mostraba un error de "XML Parsing Error" y el usuario no veía nada.</li> </ul> <h3> HTML5: La libertad del "Living Standard" </h3> <p>En 2004, un grupo de rebeldes (WHATWG) decidió que la web debía ser tolerante a errores. Así nació el espíritu de <strong>HTML5</strong>.</p> <ul> <li> <strong>Filosofía:</strong> "Pavimentar el camino". Si los desarrolladores ya escribían <code><BR></code> en mayúsculas, el navegador debía entenderlo.</li> <li> <strong>Resultado:</strong> HTML5 ganó porque priorizó la experiencia del usuario y la facilidad para el desarrollador sobre la pureza del código.</li> </ul> <h3> Comparativa de Código </h3> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked=</span><span class="s">"checked"</span> <span class="nt">/></span> <span class="nt"><br</span> <span class="nt">/></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">></span> <span class="nt"><br></span> </code></pre> </div> <h3> Tip para el Futuro Senior: </h3> <p>Aunque HTML5 te permite ser "sucio" (no cerrar etiquetas o usar mayúsculas), los profesionales seguimos escribiendo con la prolijidad de XHTML (minúsculas y etiquetas cerradas). ¿Por qué? Porque un código limpio es más fácil de mantener y depurar.</p> </article> <article> <h1>De documentos científicos a la Web 3.0: Historia del HTML</h1> <p>gilq — Sat, 28 Mar 2026 03:33:54 +0000</p> <p>¿Sabías que el primer servidor web era una computadora NeXT en un laboratorio de Suiza? HTML no nació para crear redes sociales ni tiendas online; nació para que los científicos compartieran sus tesis sin volverse locos con el formato.</p> <p><strong>La línea del tiempo del esqueleto digital</strong></p> <p>1991 - El Big Bang (HTML 1.0): Tim Berners-Lee publica la primera versión con apenas 18 etiquetas. No había imágenes, ni formularios, solo texto azul y enlaces que funcionaban.</p> <p>1995 - La era de las tablas (HTML 2.0): Se estandarizan los formularios y las tablas. Los diseñadores empezaron a usar tablas para "maquetar", algo que hoy nos daría pesadillas.</p> <p>1997 - El caos de los navegadores (HTML 3.2): Netscape e Internet Explorer empezaron a inventar sus propias etiquetas (como el infame ). W3C puso orden para que la web fuera una sola.</p> <p>1999 - La madurez (HTML 4.01): Se separó por primera vez el contenido (HTML) de la presentación (CSS). Fue el estándar de oro por más de una década.</p> <p>2014 - La Revolución (HTML5): Tras años de peleas con Adobe Flash, HTML5 llega para dominar el video, el audio y las aplicaciones móviles de forma nativa.</p> <p>El "Dato" para Seniors:<br> ¿Sabías que existió HTML 5.1 y 5.2? Pero en 2019, la W3C y el WHATWG (el grupo que realmente hace el trabajo) acordaron que HTML ya no tendría versiones fijas. Ahora es un "Living Standard". Se actualiza constantemente sin esperar años para una nueva versión.</p> <p>¿Por qué importa esto hoy?<br> Entender de dónde venimos nos ayuda a no cometer errores del pasado (como usar etiquetas de formato visual en lugar de semánticas). HTML hoy es una plataforma de software, no solo un documento.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"investigacion.html"</span><span class="nt">></span>Ver reporte científico<span class="nt"></a></span> <span class="nt"><nav></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/blog"</span><span class="nt">></span>Blog Histórico<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></nav></span> </code></pre> </div> </article> </main></body></html>