19/09/2025
TECNM/ CAMPUS TGZ/EAD
empezar
Cuadro
Comparativo interactivo
HTML5, XML y CSS3
ISC-V SEMESTRE- PROGRAMACIÓN WEB
LUIS FERNANDO ZEPEDA TRINIDAD-23271315 MAESTRO : ING. CÉSAR IVÁN ÁLVAREZ ALBORES.
+info
DIFERENCIAS CLAVE.
XML
HTML
Ver
Ver
HTML5
Propósito
Propósito
Sintaxis
Sintaxis
Extensibilidad
Extensibilidad
CSS3
BUENAS PRÁCTICAS
Conclusiones
Si hablamos de HTML, HTML5, XML y CSS3 podemos decir que son tecnologías fundamentales para el desarrollo web, y pues cada una con un propósito distinto se complementan entre si. HTML5 nos permite estructurar y presentar contenido , XML facilita el intercambio y almacenamiento de datos de forma extensible, y CSS3 ofrece herramientas avanzadas para diseñar páginas atractivas, responsivas y dinámicas.El Seguir buenas prácticas y estándares W3C nos garantiza que el código sea limpio, mantenible y accesible para todos los usuarios, mejorando la compatibilidad, la usabilidad y la experiencia en la web. En otras palabras nos ayuda a tener un mejor trabajo y diseño.
REFERENCIAS BIBLIOGRÁFICAS
- Cyberstream. (2024b, mayo 1). Guía completa sobre la sintaxis en HTML: todo lo
- Sastre, A. (s. f.). Sintaxis y estructura básica de HTML para principiantes. CertiDevs. https://certidevs.com/aprender-html-sintaxis-estructura
- W3Schools.com. (s. f.). https://www.w3schools.com/cssref/css_selectors.php
- Holcombe, J. (2025, 31 enero). XML vs HTML: Conoce la Diferencia Entre Estos Lenguajes de Marcado. Kinsta®. https://kinsta.com/es/blog/xml-vs-html/#diferencias-entre-xml-y-html
- Cyberstream. (2024c, mayo 21). Guía completa sobre el lenguaje CSS3: todo lo que necesitas saber. Byron Vargas. https://www.byronvargas.com/web/que-es-el-lenguaje-css3/
- Sierra, Á. V. (2024, 26 septiembre). XML: ¿Qué es? Usos y características principales. WowMania. https://wowmania.es/xml-que-es-usos-y-caracteristicas-principales/
Diferencias entre XML y HTML
Tanto HTML como XML son lenguajes de marcado, similares pero distintos a los lenguajes de programación, ya que utilizan etiquetas para anotar un documento. También utilizan una sintaxis similar, como las etiquetas de apertura y cierre.
HTML
El código HTML está hecho específicamente para diseñar páginas web para su visualización en los navegadores.
HTML
Propósito
HTML es el principal lenguaje utilizado para codificar el front-end de un sitio web.HTML es el lenguaje principal responsable de elaborar el diseño y la apariencia básica de un sitio web.
XML
Propósito
Su propósito es almacenar, transportar e intercambiar datos de forma estructurada e independiente de la plataforma o aplicación. No se centra en presentación, sino en organización de la información.
SINTAXIS
- Estructura en etiquetas:
Todo en HTML se escribe con etiquetas entre < >.
Ejemplo: <p>Este es un párrafo</p>.
- Apertura y cierre:
La mayoría de las etiquetas tienen inicio <etiqueta> y cierre </etiqueta>.
Algunas son vacías/autocontenidas, como <br> o <img>.
- Anidación correcta:
Una etiqueta debe cerrarse antes de que termine otra que empezó después.
Ejemplo correcto: <b><i>Texto</i></b> .
- Atributos:
Las etiquetas pueden llevar atributos para dar información extra.
Ejemplo: <img src="foto.jpg" alt="Descripción">.
- Sensibilidad:
HTML no distingue mayúsculas/minúsculas en las etiquetas (pero se recomienda usar minúsculas).
SINTAXIS
Etiquetas personalizadas: El usuario puede crear etiquetas propias (<cliente>, <producto>). Estructura básica: Todo documento XML debe comenzar con una declaración: <?xml version="1.0" encoding="UTF-8"?>. Apertura y cierre obligatorio: Cada etiqueta que se abre debe cerrarse (<dato>123</dato>). Mayúsculas y minúsculas: Es sensible (<Nombre> ≠ <nombre>). Anidación estricta: Debe cumplirse siempre; un error de orden invalida el documento. Atributos: Siempre entre comillas (<persona id="1">Juan</persona>). Elemento raíz: Todo archivo XML debe tener un único elemento raíz que contenga al resto.
EXTENSIBILIDAD
LIMITADA
HTML no es extensible porque sus etiquetas están definidas por el estándar del W3C. Los desarrolladores no pueden inventar nuevas etiquetas; solo pueden usar atributos como class, id o data-* para personalizar contenido. Aunque existen “extensiones” como HTML5 que agregan nuevas etiquetas, siempre dependen de actualizaciones oficiales.
XML
EXTENSIBLE
XML permite que el usuario cree sus propias etiquetas y estructuras sin depender de un estándar fijo. Se puede adaptar a cualquier necesidad (ejemplo: <cliente>, <producto>, <factura>). La extensibilidad lo hace ideal para intercambio de datos entre sistemas, porque cada organización puede definir su propio esquema.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<!-- Encabezado de la página -->
<header>
<h1>Mi Sitio Web</h1>
</header>
<!-- Barra de navegación -->
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<!-- Contenido principal -->
<main>
<section>
<h2>Bienvenido</h2>
<p>Este es un ejemplo de estructura básica en HTML5.</p>
</section>
</main>
<!-- Pie de página -->
<footer>
<p>© 2025 Mi Sitio Web</p>
</footer>
</body>
</html>
ESTRUCTURA BÁSICA
FUNCIONALIDADES
Media Queries: Con esta funcionalidad, los desarrolladores pueden crear diseños responsivos que se adaptan a diferentes dispositivos y tamaños de pantalla.
Transiciones y Animaciones: CSS3 permite a los diseñadores agregar efectos dinámicos a elementos HTML sin necesidad de JavaScript.
Flexbox: Introducido en CSS3, Flexbox simplifica el diseño de interfaces complejas al proporcionar un modelo de diseño más eficiente y flexible.
Gradients y Sombras: Con CSS3, es posible crear gradientes suaves y sombras realistas para mejorar la apariencia visual de un sitio web.
Fuentes personalizadas: Los desarrolladores pueden incorporar fuentes personalizadas en sus proyectos mediante la propiedad @font-face.
MODELO DE CAJA
En CSS, el término "modelo de caja" se utiliza cuando se habla de diseño y maquetación web. El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Cada cuadro consta de cuatro partes: contenido, relleno, bordes y márgenes.
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
BUENAS PRÁCTICAS
HTML semántico: Usar etiquetas como <header>, <main>, <article> y <footer> para reflejar la estructura del contenido. Textos alternativos: Siempre añadir alt a las imágenes para accesibilidad y SEO. Orden lógico de lectura: Mantener el flujo correcto del DOM; usar tabindex solo cuando sea necesario. Contraste de color adecuado: Cumplir con WCAG (mínimo 4.5:1) para texto normal. Formularios accesibles: Etiquetas label asociadas a inputs y mensajes claros de error. Código limpio y validado: Indentación correcta, comentarios claros, validación HTML y CSS con herramientas W3C. Optimización para móviles: Uso de meta viewport, media queries, flexbox o grid para layouts responsivos.
Cuadro
Luis Fernando Zepeda Trinidad
Created on September 22, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Report
View
Akihabara Report
View
Creative whitepaper
View
Social Media Plan
View
Notes Report
View
Genial Whitepaper
View
Genial reporting
Explore all templates
Transcript
19/09/2025
TECNM/ CAMPUS TGZ/EAD
empezar
Cuadro
Comparativo interactivo
HTML5, XML y CSS3
ISC-V SEMESTRE- PROGRAMACIÓN WEB
LUIS FERNANDO ZEPEDA TRINIDAD-23271315 MAESTRO : ING. CÉSAR IVÁN ÁLVAREZ ALBORES.
+info
DIFERENCIAS CLAVE.
XML
HTML
Ver
Ver
HTML5
Propósito
Propósito
Sintaxis
Sintaxis
Extensibilidad
Extensibilidad
CSS3
BUENAS PRÁCTICAS
Conclusiones
Si hablamos de HTML, HTML5, XML y CSS3 podemos decir que son tecnologías fundamentales para el desarrollo web, y pues cada una con un propósito distinto se complementan entre si. HTML5 nos permite estructurar y presentar contenido , XML facilita el intercambio y almacenamiento de datos de forma extensible, y CSS3 ofrece herramientas avanzadas para diseñar páginas atractivas, responsivas y dinámicas.El Seguir buenas prácticas y estándares W3C nos garantiza que el código sea limpio, mantenible y accesible para todos los usuarios, mejorando la compatibilidad, la usabilidad y la experiencia en la web. En otras palabras nos ayuda a tener un mejor trabajo y diseño.
REFERENCIAS BIBLIOGRÁFICAS
Diferencias entre XML y HTML
Tanto HTML como XML son lenguajes de marcado, similares pero distintos a los lenguajes de programación, ya que utilizan etiquetas para anotar un documento. También utilizan una sintaxis similar, como las etiquetas de apertura y cierre.
HTML
El código HTML está hecho específicamente para diseñar páginas web para su visualización en los navegadores.
HTML
Propósito
HTML es el principal lenguaje utilizado para codificar el front-end de un sitio web.HTML es el lenguaje principal responsable de elaborar el diseño y la apariencia básica de un sitio web.
XML
Propósito
Su propósito es almacenar, transportar e intercambiar datos de forma estructurada e independiente de la plataforma o aplicación. No se centra en presentación, sino en organización de la información.
SINTAXIS
SINTAXIS
Etiquetas personalizadas: El usuario puede crear etiquetas propias (<cliente>, <producto>). Estructura básica: Todo documento XML debe comenzar con una declaración: <?xml version="1.0" encoding="UTF-8"?>. Apertura y cierre obligatorio: Cada etiqueta que se abre debe cerrarse (<dato>123</dato>). Mayúsculas y minúsculas: Es sensible (<Nombre> ≠ <nombre>). Anidación estricta: Debe cumplirse siempre; un error de orden invalida el documento. Atributos: Siempre entre comillas (<persona id="1">Juan</persona>). Elemento raíz: Todo archivo XML debe tener un único elemento raíz que contenga al resto.
EXTENSIBILIDAD
LIMITADA
HTML no es extensible porque sus etiquetas están definidas por el estándar del W3C. Los desarrolladores no pueden inventar nuevas etiquetas; solo pueden usar atributos como class, id o data-* para personalizar contenido. Aunque existen “extensiones” como HTML5 que agregan nuevas etiquetas, siempre dependen de actualizaciones oficiales.
XML
EXTENSIBLE
XML permite que el usuario cree sus propias etiquetas y estructuras sin depender de un estándar fijo. Se puede adaptar a cualquier necesidad (ejemplo: <cliente>, <producto>, <factura>). La extensibilidad lo hace ideal para intercambio de datos entre sistemas, porque cada organización puede definir su propio esquema.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Título de la página</title> </head> <body> <!-- Encabezado de la página --> <header> <h1>Mi Sitio Web</h1> </header> <!-- Barra de navegación --> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> <!-- Contenido principal --> <main> <section> <h2>Bienvenido</h2> <p>Este es un ejemplo de estructura básica en HTML5.</p> </section> </main> <!-- Pie de página --> <footer> <p>© 2025 Mi Sitio Web</p> </footer> </body> </html>
ESTRUCTURA BÁSICA
FUNCIONALIDADES
Media Queries: Con esta funcionalidad, los desarrolladores pueden crear diseños responsivos que se adaptan a diferentes dispositivos y tamaños de pantalla. Transiciones y Animaciones: CSS3 permite a los diseñadores agregar efectos dinámicos a elementos HTML sin necesidad de JavaScript. Flexbox: Introducido en CSS3, Flexbox simplifica el diseño de interfaces complejas al proporcionar un modelo de diseño más eficiente y flexible. Gradients y Sombras: Con CSS3, es posible crear gradientes suaves y sombras realistas para mejorar la apariencia visual de un sitio web. Fuentes personalizadas: Los desarrolladores pueden incorporar fuentes personalizadas en sus proyectos mediante la propiedad @font-face.
MODELO DE CAJA
En CSS, el término "modelo de caja" se utiliza cuando se habla de diseño y maquetación web. El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Cada cuadro consta de cuatro partes: contenido, relleno, bordes y márgenes.
div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }
BUENAS PRÁCTICAS
HTML semántico: Usar etiquetas como <header>, <main>, <article> y <footer> para reflejar la estructura del contenido. Textos alternativos: Siempre añadir alt a las imágenes para accesibilidad y SEO. Orden lógico de lectura: Mantener el flujo correcto del DOM; usar tabindex solo cuando sea necesario. Contraste de color adecuado: Cumplir con WCAG (mínimo 4.5:1) para texto normal. Formularios accesibles: Etiquetas label asociadas a inputs y mensajes claros de error. Código limpio y validado: Indentación correcta, comentarios claros, validación HTML y CSS con herramientas W3C. Optimización para móviles: Uso de meta viewport, media queries, flexbox o grid para layouts responsivos.