Embedded Files
INB COMPUTERS "Honestidad, calidad y profesionalismo"
POST ED: 29 noviembre, 2024. ACTUALIZADO EN: 22 julio, 2025.
¿Que es HTML?
¿Que es HTML?
HTML (HyperText Markup Language, por sus siglas en inglés) es el lenguaje de marcado estándar utilizado para la estructuración y presentación del contenido en la web. No es un lenguaje de programación, sino un lenguaje de marcado semántico, lo que significa que su función principal es describir la estructura lógica de la información, organizándola mediante etiquetas que delimitan encabezados, párrafos, listas, enlaces, imágenes, formularios, tablas y otros elementos esenciales para la representación visual y accesible de una página web.
HTML5
HTML5
HTML5 es la quinta y más reciente versión estable del lenguaje de marcado HTML (HyperText Markup Language), estandarizada por el W3C (World Wide Web Consortium) y el WHATWG (Web Hypertext Application Technology Working Group).
ESTRUCTURA DE UNA PAGINA WEB
ESTRUCTURA DE UNA PAGINA WEB
Ejemplo de estructura HTML
<!DOCTYPE html><html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Título del documento</title> <link rel="stylesheet" href="estilos.css" /> </head>
<body> <header> <h1>Encabezado principal</h1> </header>
<nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Acerca</a></li> </ul> </nav>
<main> <section> <article> <h2>Subtítulo</h2> <p>Contenido informativo estructurado semánticamente.</p> </article> </section> </main>
<aside> <p>Contenido complementario (notas, enlaces, etc.).</p> </aside>
<footer> <p>© 2025 Profesor Iván Anguiano – Derechos reservados.</p> </footer>
<script src="script.js"></script> </body></html>
<body> <header> <h1>Encabezado principal</h1> </header>
<nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Acerca</a></li> </ul> </nav>
<main> <section> <article> <h2>Subtítulo</h2> <p>Contenido informativo estructurado semánticamente.</p> </article> </section> </main>
<aside> <p>Contenido complementario (notas, enlaces, etc.).</p> </aside>
<footer> <p>© 2025 Profesor Iván Anguiano – Derechos reservados.</p> </footer>
<script src="script.js"></script> </body></html>
Ejemplo de código de HTML
Estructura HTML
Estructura HTML
<!DOCTYPE html>: Declaración obligatoria que indica que el documento está escrito en HTML5.
<html lang="es">: Elemento raíz que encapsula todo el contenido HTML. El atributo lang especifica el idioma, importante para accesibilidad y SEO.
<head>: Contiene metadatos del documento (no visibles), como codificación, título, enlaces a hojas de estilo, fuentes, favicons y scripts que deben cargarse antes del contenido.
<body>: Área visible del documento. Contiene los elementos que el usuario ve e interactúa.
EDITORES WEB (BASADOS EN NAVEGADOR)
EDITORES WEB (BASADOS EN NAVEGADOR)
Estos entornos permiten editar y previsualizar código sin necesidad de instalar software adicional, facilitando el acceso desde cualquier equipo con conexión a internet. Son ideales para formación, prototipado rápido y enseñanza colaborativa:
CodePen
CodePen
WEB: https://codepen.io
Diseñado para desarrollo front-end, permite crear "pens" donde HTML, CSS y JS se editan y visualizan en tiempo real. Es excelente para enseñanza visual, prototipos UI y actividades formativas. Soporta frameworks como Tailwind, Bootstrap y Vue.js.
Ideal para ambientes formativos como estos se recomienda iniciar con entornos en línea.
JSFiddle
JSFiddle
WEB: https://jsfiddle.net
Ofrece un entorno simplificado donde se puede trabajar con fragmentos de código en HTML, CSS y JavaScript. Muy útil para pruebas rápidas, demostraciones pedagógicas y colaboración entre estudiantes. Muy parecido a CodePen.
Ideal para ambientes formativos como estos se recomienda iniciar con entornos en línea.
Replit
Replit
WEB: https://replit.com
Más allá de HTML, admite múltiples lenguajes de programación y colaboraciones en tiempo real. Ideal para enseñanza interdisciplinaria donde se combina diseño web con lógica algorítmica, IA o ciberseguridad.
EDITORES WEB (LOCALES)
EDITORES WEB (LOCALES)
Proveen mayor control sobre el proyecto, acceso offline y capacidades de personalización. Son más recomendables para desarrollo estructurado, integración con control de versiones y proyectos de largo plazo:
Visual Studio Code
Visual Studio Code
WEB: https://code.visualstudio.com
Editor de código moderno, extensible y gratuito. Soporta HTML, CSS y JavaScript con herramientas de autocompletado, validación en tiempo real, depuración y extensiones como Live Server para previsualización inmediata. Ideal para proyectos educativos robustos y aprendizaje de buenas prácticas en desarrollo web.
Brackets
Brackets
WEB: https://brackets.io
Enfocado en diseño web con una interfaz visual, ofrece vista previa en vivo, edición contextual de CSS y conexión directa con archivos HTML. Aunque su desarrollo ha sido descontinuado oficialmente, sigue siendo funcional y pedagógicamente amigable.
Sublime Text
Sublime Text
WEB: https://www.sublimetext.com
Ligero, veloz y altamente configurable. Aunque no incluye previsualización integrada, con algunos paquetes como Emmet y View In Browser, se transforma en una potente herramienta educativa para comprender estructuras web limpias.
Page updated
Report abuse