Lenguaje de marcado: HTML y la construcción de la primera página web con Visual Studio Code
Una aplicación web comienza con una necesidad de comunicación: presentar información, ofrecer un servicio o permitir que una persona realice una acción. Antes de incorporar bases de datos, procesos del servidor o interfaces complejas, es necesario organizar el contenido que recibirá el navegador.
Para esa tarea se utiliza HTML, el lenguaje que permite representar la estructura y el significado de los documentos de la Web.
Un título, un párrafo, una fotografía y una tabla pueden aparecer juntos en una pantalla, pero cumplen funciones diferentes. HTML permite identificar esas funciones para que el navegador y otras herramientas puedan interpretar el documento.
En este artículo se explican los fundamentos del lenguaje de marcado, la representación de documentos, los tipos de valores utilizados en HTML, la estructura global de una página y sus elementos básicos. El editor de trabajo será Visual Studio Code.
Como ejemplo se desarrollará una página informativa de un laboratorio de cómputo. Al finalizar, se contará con una base para construir documentos web organizados, enlazar recursos y comprender cómo se integra el contenido de una página.
Video explicativo: HTML y tu primera página web
Cómo aprovechar este artículo: lee primero la explicación de cada elemento y después copia su ejemplo en Visual Studio Code. Los bloques identificados como incorrectos muestran errores deliberados para aprender a detectarlos. La página completa y el archivo de ayuda se encuentran en la sección de construcción paso a paso.
2.1 Introducción al lenguaje de marcado
2.1.1 ¿Qué es un lenguaje de marcado?
Un lenguaje de marcado es un sistema de símbolos y reglas que permite señalar la estructura, el significado o determinadas características de un documento.
Considérese este texto:
Laboratorio de cómputo Consulta los equipos disponibles para tus actividades académicas.
Una persona puede interpretar que la primera línea es un título. Sin embargo, en un archivo de texto común esa relación depende principalmente de la forma en que se presenta.
Con HTML puede indicarse explícitamente:
<h1>Laboratorio de cómputo</h1>
<p>
Consulta los equipos disponibles para tus actividades académicas.
</p>
Aquí:
<h1> identifica un encabezado principal.
<p> identifica un párrafo.
Las etiquetas delimitan el contenido al que se aplica ese significado.
El propósito principal del marcado es describir qué representa cada parte del documento.
2.1.2 ¿Qué es HTML?
HTML significa HyperText Markup Language, en español, Lenguaje de Marcado de Hipertexto.
El nombre reúne tres ideas:
Concepto | Significado |
Hipertexto | Contenido conectado mediante enlaces |
Marcado | Identificación de partes del documento mediante etiquetas |
Lenguaje | Conjunto de reglas para expresar esa estructura |
HTML permite representar encabezados, párrafos, enlaces, listas, tablas, imágenes, formularios y otros componentes. Es una de las tecnologías fundamentales de la Web.
2.1.3 HTML, CSS y JavaScript
Estas tecnologías colaboran, pero tienen responsabilidades diferentes:
Tecnología | Responsabilidad principal | Pregunta que ayuda a resolver |
HTML | Estructura y significado | ¿Qué contiene la página? |
CSS | Presentación | ¿Cómo se distribuye y se ve? |
JavaScript | Comportamiento programado | ¿Qué debe ocurrir ante una acción? |
Por ejemplo, en un catálogo:
HTML identifica el nombre de cada equipo y su descripción.
CSS organiza las tarjetas y define sus colores.
JavaScript puede filtrar los equipos cuando el usuario selecciona una opción.
HTML no es un lenguaje de programación de propósito general. No se utiliza, por sí solo, para escribir algoritmos que calculen promedios o consulten una base de datos.
Esto no significa que todo documento HTML carezca de interacción: los enlaces, formularios y controles nativos ya ofrecen comportamientos implementados por el navegador.
2.1.4 Etiquetas, elementos y atributos
Estos tres conceptos deben distinguirse.
Etiqueta
Es una marca escrita entre los símbolos < y >:
<p>
Elemento
Es la unidad que representa una parte del documento. En muchos casos incluye apertura, contenido y cierre:
<p>El laboratorio abre a las ocho de la mañana.</p>
Atributo
Es información adicional escrita en la etiqueta de apertura:
<p id="horario">El laboratorio abre a las ocho de la mañana.</p>
En este ejemplo:
Parte | Función |
<p | Inicio de la etiqueta de apertura |
id | Nombre del atributo |
"horario" | Valor del atributo |
> | Fin de la etiqueta de apertura |
Texto | Contenido |
</p> | Etiqueta de cierre |
Los atributos no pueden inventarse indistintamente para todos los elementos. Cada elemento admite determinados atributos y existen otros de uso global.
2.1.5 Elementos vacíos
Algunos elementos no contienen contenido ni utilizan etiqueta de cierre.
Por ejemplo:
<img src="imagenes/laboratorio.jpg" alt="Mesas con equipos de cómputo">
<br>
<hr>
<meta charset="UTF-8">
Se denominan elementos vacíos.
No debe escribirse:
<img src="foto.jpg"></img>
En HTML, img no admite esa etiqueta de cierre.
También es frecuente encontrar:
<img src="foto.jpg" alt="Equipo de cómputo" />
La barra final no convierte al elemento en “autocerrado” al estilo de XML; en HTML es innecesaria para este elemento.
2.1.6 Anidación
Anidar significa colocar un elemento dentro de otro:
<p>
El préstamo requiere una <strong>identificación vigente</strong>.
</p>
El elemento strong está dentro del párrafo.
La anidación debe respetar el orden de apertura y cierre.
Incorrecto:
<p>El equipo es <strong>de uso académico.</p></strong>
Correcto:
<p>El equipo es <strong>de uso académico.</strong></p>
Además, no basta con cerrar las etiquetas en orden: también debe respetarse el contenido permitido.
Por ejemplo, un encabezado no debe colocarse dentro de un párrafo:
<!-- Incorrecto -->
<p>
<h2>Reglamento</h2>
</p>
La forma apropiada es:
<h2>Reglamento</h2>
<p>Los equipos deben utilizarse de manera responsable.</p>
El navegador puede reparar ciertos errores al interpretar el documento, pero esa reparación no garantiza que la estructura resultante sea la que se pretendía.
2.1.7 Comentarios
Un comentario permite escribir explicaciones dentro del código:
<!-- Sección de información del laboratorio -->
<h2>Horario de atención</h2>
No aparece como contenido de la página, pero puede consultarse en el código fuente o mediante las herramientas del navegador.
Por ello, los comentarios no deben contener contraseñas ni información privada.
2.2 Representación de documentos
2.2.1 Un documento puede tener varias representaciones
Una página web puede entenderse desde diferentes perspectivas:
Representación | Descripción |
Archivo fuente | Texto HTML guardado en un archivo |
Estructura lógica | Relación entre títulos, párrafos, listas y otros elementos |
DOM | Representación del documento mediante objetos y nodos |
Presentación | Resultado que el navegador muestra o comunica |
Estas representaciones están relacionadas, pero no son idénticas.
El archivo contiene el marcado. El navegador lo interpreta y construye una estructura que utilizará para presentar el contenido.
2.2.2 El archivo HTML
Un archivo HTML es un archivo de texto.
Por ejemplo:
index.html
La extensión .html ayuda a identificar su naturaleza.
Puede crearse con un editor de código, como Visual Studio Code. No debe confundirse con un archivo de Word: cambiar la extensión de un documento .docx a .html no lo transforma correctamente en una página web.
Un documento mínimo podría ser:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>Esta página fue escrita con HTML.</p>
</body>
</html>
2.2.3 Estructura lógica y jerarquía
El contenido debe organizarse según su significado.
Por ejemplo:
La página tiene un título principal.
El título principal introduce el contenido.
Existen secciones de servicios y reglamento.
Cada sección contiene información relacionada.
En HTML:
<h1>Laboratorio de cómputo</h1>
<h2>Servicios</h2>
<p>Consulta y préstamo de equipos.</p>
<h2>Reglamento</h2>
<p>Utiliza los equipos de forma responsable.</p>
Los encabezados expresan jerarquía. No deben elegirse únicamente porque su tamaño predeterminado parezca conveniente.
2.2.4 El DOM
DOM significa Document Object Model, o Modelo de Objetos del Documento.
Es la representación que permite trabajar con el documento como una estructura de nodos.
En este fragmento:
<body>
<h1>Laboratorio</h1>
<p>Bienvenido.</p>
</body>
Pueden identificarse estas relaciones:
Elemento | Relación |
body | Contiene a h1 y p |
h1 | Es hijo de body |
p | Es hijo de body |
h1 y p | Son hermanos |
“Bienvenido.” | Es texto contenido en p |
Más adelante, JavaScript puede utilizar esta representación para consultar o modificar contenido.
El DOM puede diferir del archivo original porque el navegador corrige ciertos errores o porque un programa modifica la página después de cargarla.
2.2.5 Semántica del documento
La semántica se refiere al significado de los elementos.
Por ejemplo:
<h1>Reglamento del laboratorio</h1>
Expresa que el contenido es un encabezado principal.
En cambio:
<div>Reglamento del laboratorio</div>
Utiliza un contenedor genérico. Aunque CSS podría darle la apariencia de un título, no le proporciona automáticamente el mismo significado.
Entre los elementos semánticos se encuentran:
Elemento | Significado habitual |
header | Contenido introductorio de una página o sección |
nav | Bloque principal de navegación |
main | Contenido principal |
section | Sección temática |
article | Contenido que puede tener sentido de manera independiente |
aside | Contenido relacionado de forma complementaria |
footer | Información de cierre de una página o sección |
Los elementos genéricos div y span siguen siendo útiles cuando no existe otro elemento más apropiado. La elección debe responder al contenido.
2.2.6 Espacios y saltos de línea
En el flujo normal del texto, el navegador suele colapsar los espacios y saltos de línea del archivo.
Por ejemplo:
<p>Laboratorio de
cómputo</p>
Normalmente se mostrará como:
Laboratorio de cómputo
Presionar muchas veces la barra espaciadora en el código no es una forma adecuada de alinear elementos.
Para párrafos se utiliza <p>, para saltos necesarios dentro de un mismo texto puede utilizarse <br> y para la distribución visual se emplea CSS.
2.2.7 Referencias de caracteres
Algunos caracteres pueden confundirse con el propio marcado.
Para mostrar:
<p>Hola</p>
como texto visible, puede escribirse:
<p><p>Hola</p></p>
Referencias frecuentes:
Escritura | Carácter |
< | < |
> | > |
& | & |
" | " |
| Espacio que impide una separación de línea en ese punto |
Con UTF-8, las letras acentuadas y la ñ pueden escribirse directamente:
<p>Programación, imágenes y vínculos.</p>
No es necesario convertir todas las letras acentuadas en referencias.
2.3 Tipos de datos básicos
2.3.1 Qué significa “tipo de dato” en HTML
En HTML, este apartado se relaciona principalmente con los formatos de valores admitidos por los atributos y ciertos contenidos.
Por ejemplo:
<img
src="imagenes/equipo.jpg"
alt="Computadora de escritorio"
width="640"
height="360"
>
Aquí aparecen:
Una referencia a un recurso en src.
Una cadena de texto en alt.
Números enteros en width y height.
No deben confundirse estos valores con las variables y tipos que se estudian en un lenguaje de programación.
La especificación de HTML define reglas particulares para números, fechas, booleanos y otros formatos.
2.3.2 Texto
Muchos atributos reciben texto:
<img
src="imagenes/teclado.jpg"
alt="Teclado con distribución en español"
>
Una práctica clara es colocar los valores entre comillas.
title="Información del laboratorio"
Aunque algunos valores pueden escribirse sin ellas, utilizarlas de manera consistente reduce errores.
2.3.3 Identificadores: id
El atributo id permite identificar un elemento dentro del documento:
<section id="reglamento">
<h2>Reglamento</h2>
</section>
Su valor debe ser único en ese documento.
Puede utilizarse como destino de un enlace:
<a href="#reglamento">Consultar el reglamento</a>
Conviene emplear identificadores descriptivos y sencillos:
reglamento
horario-atencion
equipos-disponibles
En HTML, un id no debe contener espacios.
2.3.4 Conjuntos de nombres: class
El atributo class puede contener varios nombres separados por espacios:
<p class="aviso importante">
Entrega el equipo antes de salir.
</p>
El elemento pertenece a las clases aviso e importante.
A diferencia de id, una misma clase puede utilizarse en varios elementos. Resulta útil para aplicar estilos o seleccionar grupos mediante JavaScript.
2.3.5 Números enteros y decimales
Algunos atributos reciben enteros:
<ol start="3">
<li>Registrar la solicitud.</li>
<li>Recibir el equipo.</li>
</ol>
Otros admiten valores numéricos con condiciones particulares:
<input type="number" min="0" max="10" step="0.5">
En este caso:
min establece el mínimo.
max establece el máximo.
step establece el incremento válido.
La sintaxis del atributo utiliza punto decimal:
step="0.5"
El control mostrado al usuario puede adaptarse a convenciones regionales del navegador.
2.3.6 Atributos booleanos
Un atributo booleano expresa un estado mediante su presencia o ausencia.
Por ejemplo:
<input type="text" disabled>
El campo está deshabilitado.
Para que no lo esté:
<input type="text">
Esta escritura no lo habilita:
<input type="text" disabled="false">
El atributo sigue presente. Además, "false" no es una forma válida de expresar el valor falso de un atributo booleano.
Otros ejemplos son required, checked y multiple, en los elementos donde corresponden. No todos los atributos con palabras como "true" o "false" siguen este mecanismo.
2.3.7 Valores enumerados
Algunos atributos admiten opciones definidas:
<input type="email">
<button type="button">Consultar</button>
<img src="foto.jpg" alt="Equipo del laboratorio" loading="lazy">
En estos casos se utilizan palabras clave. Sus valores válidos dependen del atributo.
2.3.8 URL y rutas
Una URL identifica un recurso.
Dirección absoluta:
<a href="https://developer.mozilla.org/es/">
Consultar documentación
</a>
Ruta relativa:
<a href="ayuda.html">Consultar ayuda</a>
Ruta hacia una subcarpeta:
<img src="imagenes/laboratorio.jpg" alt="Laboratorio de cómputo">
Ruta hacia la carpeta superior:
<a href="../index.html">Regresar al inicio</a>
Las rutas web utilizan /.
Debe evitarse depender de ubicaciones personales como:
C:\Users\Angel\Desktop\foto.jpg
Esa ubicación no estará disponible cuando otra persona consulte el sitio.
2.3.9 Fechas y horas
HTML permite representar fechas de forma legible para las personas y con un valor estructurado:
<p>
Próxima revisión:
<time datetime="2026-11-07">7 de noviembre de 2026</time>.
</p>
El texto visible puede redactarse de manera natural; datetime utiliza una sintaxis definida.
Ejemplo de hora:
<time datetime="08:00">8:00 de la mañana</time>
2.3.10 Idioma y codificación
El idioma principal se declara con lang:
<html lang="es">
La codificación puede declararse así:
<meta charset="UTF-8">
Son conceptos diferentes:
El idioma describe la lengua del contenido.
La codificación describe cómo se representan los caracteres.
Declarar UTF-8 debe acompañarse de guardar efectivamente el archivo con esa codificación.
2.3.11 Tipos MIME
Los tipos MIME describen la naturaleza de un recurso.
Tipo | Recurso |
text/html | Documento HTML |
text/css | Hoja de estilos |
image/png | Imagen PNG |
image/jpeg | Imagen JPEG |
application/pdf | Documento PDF |
video/mp4 | Video MP4 |
audio/mpeg | Audio MPEG |
Ejemplo:
<object
data="documentos/reglamento.pdf"
type="application/pdf"
>
<a href="documentos/reglamento.pdf">
Abrir el reglamento en PDF
</a>
</object>
Cambiar una extensión o escribir un tipo MIME no transforma el contenido real del archivo.
2.3.12 Colores y medidas: relación con CSS
En materiales antiguos pueden aparecer atributos como bgcolor o etiquetas como font. Para desarrollar páginas actuales, la presentación debe trabajarse con CSS.
Por ejemplo:
<p style="color: #1747a6;">
Información del laboratorio.
</p>
En este ejemplo:
style es un atributo HTML.
color: #1747a6; es una declaración CSS.
De forma similar:
<div style="max-width: 40rem;">
Contenido.
</div>
rem es una unidad de CSS. No debe añadirse indiscriminadamente a atributos HTML que esperan números:
<!-- Correcto -->
<img src="foto.jpg" alt="Equipo" width="640">
<!-- No corresponde al formato de este atributo -->
<img src="foto.jpg" alt="Equipo" width="640px">
La documentación histórica de HTML 4 agrupaba cadenas, URI, colores, longitudes, tipos MIME y otros valores como “tipos de datos básicos”. Es útil reconocer esa terminología, distinguiéndola de las prácticas del HTML actual.
2.4 Estructura global de un documento
2.4.1 Estructura inicial
Una base apropiada para comenzar es:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<meta
name="description"
content="Información y servicios del laboratorio de cómputo."
>
<title>Laboratorio de cómputo</title>
</head>
<body>
<h1>Laboratorio de cómputo</h1>
<p>Bienvenido a nuestra primera página web.</p>
</body>
</html>
2.4.2 <!DOCTYPE html>
Es una declaración que ayuda al navegador a utilizar el modo de representación estándar.
No es un elemento de contenido ni requiere cierre.
Se escribe al inicio:
<!DOCTYPE html>
2.4.3 <html>
Es el elemento raíz del documento:
<html lang="es">
...
</html>
Contiene a head y body.
2.4.4 <head>
Contiene metadatos y referencias a recursos del documento.
Puede incluir:
Título.
Codificación.
Descripción.
Hojas de estilo.
Iconos.
Otros metadatos.
No es el lugar para escribir los párrafos y secciones que forman el contenido principal de la página.
2.4.5 <title>
Define el título del documento:
<title>Servicios | Laboratorio de cómputo</title>
Se utiliza, entre otros lugares, en la pestaña del navegador.
No equivale al encabezado visible:
<h1>Servicios del laboratorio</h1>
Ambos deben describir el contenido de manera coherente.
2.4.6 <meta charset="UTF-8">
Declara la codificación:
<meta charset="UTF-8">
Conviene colocarla cerca del inicio de head.
Si aparecen textos como Programación, debe revisarse que el archivo y la declaración utilicen la codificación correcta.
2.4.7 Configuración del área de visualización
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
Ayuda a que los navegadores móviles utilicen el ancho del dispositivo para el área de visualización.
No vuelve adaptable a toda una página por sí sola. Las imágenes, tablas y reglas de distribución también deben diseñarse adecuadamente.
2.4.8 <body>
Contiene el contenido del documento presentado al usuario:
<body>
<h1>Laboratorio</h1>
<p>Información de los servicios.</p>
</body>
Una página convencional debe organizarse con un solo cuerpo.
La estructura básica y la separación entre los metadatos y el contenido forman parte de los fundamentos de la construcción de documentos HTML.
2.4.9 Organización semántica del cuerpo
<body>
<header>
<h1>Laboratorio de cómputo</h1>
<p>Tecnología para aprender.</p>
</header>
<nav aria-label="Navegación principal">
<a href="#servicios">Servicios</a>
<a href="#reglamento">Reglamento</a>
</nav>
<main>
<section id="servicios">
<h2>Servicios</h2>
<p>Consulta y préstamo de equipos.</p>
</section>
<section id="reglamento">
<h2>Reglamento</h2>
<p>Cuida los equipos y respeta los horarios.</p>
</section>
</main>
<footer>
<p>Información del laboratorio de cómputo.</p>
</footer>
</body>
En este ejemplo, los enlaces de navegación apuntan a identificadores que existen dentro de la misma página.
2.5 Elementos básicos de HTML
2.5.1 Texto
Encabezados
HTML ofrece seis niveles:
<h1>Laboratorio de cómputo</h1>
<h2>Servicios</h2>
<h3>Préstamo de equipos</h3>
<h4>Requisitos</h4>
<h5>Casos particulares</h5>
<h6>Observaciones adicionales</h6>
No es necesario utilizar todos.
Para una primera página, una organización clara consiste en:
Un h1 para el tema principal.
h2 para las secciones.
h3 para subsecciones cuando sean necesarias.
El nivel expresa jerarquía; el tamaño puede ajustarse después con CSS.
Párrafos
<p>
El laboratorio cuenta con equipos para realizar
actividades de investigación y elaboración de documentos.
</p>
Cada párrafo debe agrupar una idea o conjunto de ideas relacionadas.
Importancia y énfasis
<p>
<strong>Es obligatorio devolver el equipo.</strong>
</p>
<p>
El servicio está destinado <em>principalmente</em>
a actividades académicas.
</p>
strong comunica importancia.
em comunica énfasis.
Aunque normalmente se representan con negrita y cursiva, su elección debe basarse en el significado.
Los elementos b e i también existen, pero tienen usos semánticos distintos. Para cambiar únicamente la apariencia se utiliza CSS.
Saltos de línea
<p>
Laboratorio de cómputo<br>
Edificio principal<br>
Planta baja
</p>
br es útil cuando el salto forma parte del contenido, como en una dirección. No debe repetirse muchas veces para crear márgenes.
Separación temática
<p>Información general del servicio.</p>
<hr>
<p>Condiciones especiales de préstamo.</p>
hr representa una separación temática.
Superíndices y subíndices
<p>Superficie del aula: 48 m<sup>2</sup>.</p>
<p>Fórmula del agua: H<sub>2</sub>O.</p>
Abreviaturas
<p>
Trabajaremos con
<abbr title="Lenguaje de Marcado de Hipertexto">HTML</abbr>.
</p>
La expansión también puede escribirse en el texto cuando sea necesaria para comprenderlo, sin depender de que el usuario pase el puntero sobre la abreviatura.
Código
<p>
El archivo principal se llama <code>index.html</code>.
</p>
Para mostrar un bloque conservando espacios y saltos:
<pre><code><h1>Mi página</h1>
<p>Bienvenidos.</p></code></pre>
pre conserva el formato del texto y code identifica contenido de código.
2.5.2 Vínculos
Un vínculo permite navegar hacia un recurso o una ubicación del documento.
<a href="ayuda.html">Consultar la ayuda del laboratorio</a>
a representa el enlace.
href indica el destino.
El contenido entre las etiquetas es el texto del vínculo.
Enlace externo:
<a href="https://developer.mozilla.org/es/docs/Web/HTML">
Consultar la documentación de HTML
</a>
Enlace interno:
<a href="#horario">Ir al horario</a>
<section id="horario">
<h2>Horario</h2>
<p>Consulta la disponibilidad con el encargado.</p>
</section>
Enlace a un archivo:
<a href="documentos/reglamento.pdf">
Abrir el reglamento en PDF
</a>
Correo electrónico:
<a href="mailto:contacto@example.com">
Escribir al laboratorio
</a>
El vínculo mailto: solicita abrir una aplicación o servicio de correo configurado. No envía automáticamente un mensaje.
Abrir otra pestaña:
<a
href="https://developer.mozilla.org/es/"
target="_blank"
rel="noopener"
>
Consultar MDN — se abre en otra pestaña
</a>
No es necesario abrir todos los enlaces de esa manera.
El texto debe describir el destino. “Consultar el reglamento” resulta más informativo que “Haz clic aquí”. Las rutas relativas y los fragmentos permiten enlazar recursos y partes del mismo documento.
2.5.3 Listas
Lista no ordenada
Se utiliza cuando la secuencia no determina el significado:
<ul>
<li>Computadoras.</li>
<li>Proyectores.</li>
<li>Accesorios.</li>
</ul>
Lista ordenada
Se utiliza cuando el orden importa:
<ol>
<li>Consultar la disponibilidad.</li>
<li>Presentar una identificación.</li>
<li>Registrar el préstamo.</li>
<li>Recibir el equipo.</li>
</ol>
Lista de descripciones
Permite relacionar términos y explicaciones:
<dl>
<dt>HTML</dt>
<dd>Lenguaje para estructurar documentos web.</dd>
<dt>Navegador</dt>
<dd>Programa que interpreta y presenta recursos web.</dd>
</dl>
Listas anidadas
La lista interior debe colocarse dentro del elemento al que pertenece:
<ul>
<li>
Computadoras
<ul>
<li>De escritorio.</li>
<li>Portátiles.</li>
</ul>
</li>
<li>Proyectores.</li>
</ul>
No debe construirse una lista escribiendo guiones y saltos de línea dentro de un párrafo. Los elementos de lista proporcionan estructura al contenido.
2.5.4 Tablas
Las tablas representan datos relacionados en filas y columnas.
Ejemplo:
<table>
<caption>Equipos del laboratorio</caption>
<thead>
<tr>
<th scope="col">Equipo</th>
<th scope="col">Categoría</th>
<th scope="col">Estado</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Laptop 01</th>
<td>Portátil</td>
<td>Disponible</td>
</tr>
<tr>
<th scope="row">Proyector 01</th>
<td>Proyección</td>
<td>En mantenimiento</td>
</tr>
</tbody>
</table>
Elemento o atributo | Función |
table | Contiene la tabla |
caption | Identifica su tema |
thead | Agrupa las filas de encabezado |
tbody | Agrupa las filas principales |
tfoot | Agrupa filas de cierre o resumen |
tr | Define una fila |
th | Define una celda de encabezado |
td | Define una celda de datos |
scope="col" | Asocia un encabezado con una columna |
scope="row" | Asocia un encabezado con una fila |
Sin CSS, la tabla puede mostrarse sin bordes visibles. Eso no significa que no exista.
Los bordes pueden definirse mediante CSS:
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #555;
padding: 0.5rem;
}
</style>
Combinar columnas
<table>
<caption>Inventario por categoría</caption>
<tbody>
<tr>
<th scope="row">Computadoras</th>
<td>10</td>
</tr>
<tr>
<th scope="row">Proyectores</th>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total de equipos: 12</td>
</tr>
</tfoot>
</table>
colspan="2" indica que la celda ocupa dos columnas. rowspan permite ocupar varias filas.
Las tablas deben utilizarse para datos tabulares. La distribución general de una página se resuelve con CSS.
2.5.5 Objetos
En este apartado, “objeto” se refiere a un recurso incorporado mediante elementos de HTML. No debe confundirse con un objeto de programación orientada a objetos.
El elemento object permite incorporar ciertos recursos externos:
<object
data="documentos/reglamento.pdf"
type="application/pdf"
width="640"
height="480"
>
<p>
No fue posible mostrar el documento.
<a href="documentos/reglamento.pdf">
Abrir el reglamento en PDF
</a>.
</p>
</object>
En este caso:
data indica el recurso.
type indica su tipo MIME.
width y height establecen dimensiones.
El contenido interior ofrece una alternativa.
La visualización de un PDF depende del navegador y de su configuración. Conviene ofrecer también un enlace directo fuera del objeto.
Otro elemento es:
<embed
src="documentos/reglamento.pdf"
type="application/pdf"
width="640"
height="480"
>
embed es vacío y no contiene un contenido alternativo interno como el de object.
Para imágenes convencionales se prefiere img; para audio y video se utilizan sus elementos específicos. La incorporación de recursos debe elegirse según el tipo de contenido.
2.5.6 Imágenes
La forma básica es:
<img
src="imagenes/laboratorio.jpg"
alt="Mesas organizadas con computadoras de escritorio"
width="640"
height="360"
>
src indica dónde está el archivo.
alt proporciona una alternativa textual según la función de la imagen.
width y height ayudan a establecer las dimensiones y la proporción prevista. Deben corresponder a la proporción real del recurso.
El texto alternativo debe describir lo relevante, sin limitarse a expresiones como “imagen” o al nombre del archivo.
Para una imagen puramente decorativa:
<img src="imagenes/separador.png" alt="">
Un atributo alt vacío comunica que no aporta información que deba anunciarse. No equivale a omitirlo.
Imagen con pie
<figure>
<img
src="imagenes/laboratorio.jpg"
alt="Estaciones de trabajo del laboratorio"
width="640"
height="360"
>
<figcaption>
Área destinada a las actividades de programación.
</figcaption>
</figure>
El pie y el texto alternativo pueden complementarse; no necesitan repetir exactamente lo mismo.
Adaptación al espacio disponible
<style>
img {
max-width: 100%;
height: auto;
}
</style>
Esta regla permite reducir la imagen cuando el contenedor es más estrecho.
Formatos frecuentes:
Formato | Uso habitual |
JPEG | Fotografías |
PNG | Imágenes con transparencia o gráficos sin pérdida |
WebP y AVIF | Compresión de imágenes para la Web |
SVG | Gráficos vectoriales |
Debe reducirse el peso de los archivos sin afectar innecesariamente su comprensión.
2.5.7 Aplicaciones e interactividad
Una página puede ofrecer interacción nativa, ejecutar programas o incorporar aplicaciones externas.
Interacción nativa con HTML
<details>
<summary>¿Cómo solicito una computadora?</summary>
<p>
Consulta la disponibilidad y presenta tu identificación
con el encargado del laboratorio.
</p>
</details>
El navegador permite abrir y cerrar este contenido sin escribir JavaScript.
Controles de entrada
<form>
<p>
<label for="nombre">Nombre:</label>
<input id="nombre" name="nombre" type="text" required>
</p>
<p>
<label for="correo">Correo:</label>
<input id="correo" name="correo" type="email">
</p>
<button type="button">Ejemplo de botón</button>
</form>
Este ejemplo muestra controles. El botón tiene type="button" y no envía el formulario.
Para guardar solicitudes reales se necesita implementar el procesamiento correspondiente.
Incorporar otra página con iframe
<iframe
src="ayuda.html"
title="Ayuda del laboratorio"
width="640"
height="240"
loading="lazy"
></iframe>
iframe crea un contexto de navegación dentro del documento.
El título debe explicar qué contiene. Algunas páginas externas impiden su incorporación y no todos los servicios permiten utilizar su dirección normal como enlace de inserción.
Aplicación sencilla con JavaScript
HTML crea los componentes:
<button id="contar" type="button">
Registrar una consulta
</button>
<p id="resultado" role="status">Consultas: 0</p>
JavaScript incorpora el comportamiento:
<script>
let consultas = 0;
const boton = document.querySelector("#contar");
const resultado = document.querySelector("#resultado");
boton.addEventListener("click", () => {
consultas += 1;
resultado.textContent = `Consultas: ${consultas}`;
});
</script>
Este bloque debe colocarse después de los elementos a los que se refiere, por ejemplo, antes de </body>.
El contador vuelve a cero al recargar. No representa un registro compartido ni persistente.
Audio y video
<audio controls>
<source src="multimedia/indicaciones.mp3" type="audio/mpeg">
Tu navegador no pudo reproducir el audio.
</audio>
<video controls width="640">
<source src="multimedia/recorrido.mp4" type="video/mp4">
Tu navegador no pudo reproducir el video.
</video>
Según el contenido, deben proporcionarse subtítulos, transcripciones u otras alternativas.
En materiales antiguos pueden aparecer applets de Java o contenido Flash. Esas tecnologías no son la base para desarrollar una primera página actual; el estándar identifica numerosos elementos y mecanismos históricos como obsoletos.
Construcción de la primera página en Visual Studio Code
1. Preparar el entorno
Se necesitan:
Visual Studio Code.
Un navegador.
Una carpeta para el proyecto.
Visual Studio Code incorpora soporte para HTML, como resaltado de sintaxis, sugerencias y formato. No se necesita instalar una extensión para comenzar a escribirlo.
2. Crear la carpeta
Crea una carpeta llamada:
mi-primera-web
Dentro se utilizarán estos recursos:
Recurso | Función |
index.html | Página principal |
ayuda.html | Página complementaria |
imagenes/arquitectura.png | Imagen del ejemplo |
documentos/reglamento.pdf | Documento opcional para practicar objetos |
Conviene usar nombres sencillos, sin espacios y con una escritura consistente.
3. Abrir la carpeta en Visual Studio Code
Abre Visual Studio Code.
Selecciona Archivo → Abrir carpeta, o File → Open Folder.
Elige mi-primera-web.
En el explorador de archivos del editor, crea index.html.
Crea también ayuda.html.
Guarda los cambios.
Si el editor muestra “Texto sin formato” o “Plain Text”, verifica la extensión y selecciona el modo de lenguaje HTML.
4. Utilizar Emmet
Dentro de index.html, escribe:
!
Selecciona la sugerencia de Emmet y confírmala para generar una estructura inicial. Comprueba que el atributo de idioma quede así:
<html lang="es">
Otra abreviatura es:
ul>li*3
Puede expandirse como:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Emmet está integrado en Visual Studio Code. La expansión mediante Tab depende de su configuración; también puede utilizarse el comando Emmet: Expand Abbreviation.
5. Preparar la imagen y el PDF
Para la imagen puede utilizarse una fotografía propia o esta ilustración de ejemplo:
Guárdala dentro de imagenes con el nombre:
arquitectura.png
Para practicar con objetos, coloca un PDF dentro de documentos y nómbralo:
reglamento.pdf
El archivo PDF es un recurso que debes proporcionar. Escribir su ruta en HTML no lo crea.
6. Escribir la página principal
El siguiente documento reúne los elementos estudiados. Incluye un bloque pequeño de CSS para facilitar la lectura; su estructura principal está construida con HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<meta
name="description"
content="Primera página del laboratorio de cómputo."
>
<title>Laboratorio de cómputo | Mi primera web</title>
<style>
body {
max-width: 900px;
margin: auto;
padding: 1rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #172033;
background: #f5f7fa;
}
header,
nav,
section,
footer {
margin-bottom: 1.5rem;
}
nav a {
display: inline-block;
margin: 0.25rem 0.75rem 0.25rem 0;
}
img {
max-width: 100%;
height: auto;
}
figure {
margin: 1rem 0;
}
.tabla-contenedor {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
background: white;
}
th,
td {
padding: 0.6rem;
border: 1px solid #718096;
text-align: left;
}
th {
background: #e8eef6;
}
iframe,
object {
display: block;
width: 100%;
border: 1px solid #718096;
background: white;
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid #1747a6;
outline-offset: 3px;
}
</style>
</head>
<body>
<header id="inicio">
<h1>Laboratorio de cómputo</h1>
<p>
Un espacio para aprender, investigar y desarrollar
proyectos con tecnología.
</p>
</header>
<nav aria-label="Navegación principal">
<a href="#presentacion">Presentación</a>
<a href="#servicios">Servicios</a>
<a href="#equipos">Equipos</a>
<a href="#reglamento">Reglamento</a>
<a href="#ayuda">Ayuda</a>
</nav>
<main>
<section id="presentacion">
<h2>Presentación</h2>
<p>
Esta es nuestra primera página construida con
<abbr title="Lenguaje de Marcado de Hipertexto">
HTML
</abbr>.
</p>
<p>
Su propósito es organizar información sobre
los servicios del laboratorio.
</p>
<figure>
<img
src="imagenes/arquitectura.png"
alt="Navegador, servidor y base de datos
colaboran para procesar un préstamo."
width="1600"
height="1000"
>
<figcaption>
Componentes de una aplicación web.
</figcaption>
</figure>
</section>
<section id="servicios">
<h2>Servicios</h2>
<ul>
<li>Consulta de información académica.</li>
<li>Elaboración de documentos.</li>
<li>Prácticas de programación.</li>
<li>Préstamo de equipos según disponibilidad.</li>
</ul>
<h3>Pasos para solicitar un equipo</h3>
<ol>
<li>Consultar la disponibilidad.</li>
<li>Presentar una identificación.</li>
<li>Registrar el préstamo con el encargado.</li>
<li>Recibir el equipo.</li>
</ol>
<p>
<strong>
Los equipos deben devolverse en el horario acordado.
</strong>
</p>
</section>
<section id="equipos">
<h2>Equipos</h2>
<p>
Los siguientes datos son ilustrativos y
no se actualizan automáticamente.
</p>
<div class="tabla-contenedor">
<table>
<caption>Inventario de ejemplo</caption>
<thead>
<tr>
<th scope="col">Equipo</th>
<th scope="col">Categoría</th>
<th scope="col">Estado</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Laptop 01</th>
<td>Portátil</td>
<td>Disponible</td>
</tr>
<tr>
<th scope="row">Laptop 02</th>
<td>Portátil</td>
<td>Prestada</td>
</tr>
<tr>
<th scope="row">Proyector 01</th>
<td>Proyección</td>
<td>Disponible</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="reglamento">
<h2>Reglamento</h2>
<p>
Utiliza los equipos de forma responsable y
comunica cualquier falla al encargado.
</p>
<p>
<a href="documentos/reglamento.pdf">
Abrir el reglamento en PDF
</a>
</p>
<object
data="documentos/reglamento.pdf"
type="application/pdf"
width="640"
height="400"
>
<p>
No fue posible mostrar el PDF.
Utiliza el enlace anterior para abrirlo.
</p>
</object>
</section>
<section id="ayuda">
<h2>Ayuda</h2>
<details>
<summary>¿Esta página registra préstamos?</summary>
<p>
No. Es una página informativa de ejemplo.
Los registros se realizan con el encargado.
</p>
</details>
<p>
<a href="ayuda.html">
Abrir la página de ayuda
</a>
</p>
<iframe
src="ayuda.html"
title="Indicaciones de ayuda del laboratorio"
width="640"
height="240"
loading="lazy"
></iframe>
</section>
<section>
<h2>Recursos para aprender</h2>
<p>
<a href="https://developer.mozilla.org/es/docs/Web/HTML">
Consultar la documentación de HTML en MDN
</a>
</p>
<dl>
<dt>HTML</dt>
<dd>Organiza la estructura del documento.</dd>
<dt>CSS</dt>
<dd>Define su presentación.</dd>
<dt>JavaScript</dt>
<dd>Permite programar comportamientos.</dd>
</dl>
</section>
</main>
<footer>
<hr>
<p>
Proyecto de introducción a la programación web.
</p>
<p>
<a href="#inicio">Volver al inicio</a>
</p>
</footer>
</body>
</html>
7. Crear la página complementaria
En ayuda.html, escribe:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>Ayuda del laboratorio</title>
</head>
<body>
<h1>Ayuda del laboratorio</h1>
<p>
Antes de solicitar un equipo, consulta su disponibilidad
y revisa el reglamento.
</p>
<p>
Si encuentras una falla, informa al encargado.
</p>
<p>
<a href="index.html" target="_top">
Regresar a la página principal
</a>
</p>
</body>
</html>
El atributo target="_top" permite que el enlace abra la página principal en el contexto superior cuando la ayuda se consulta dentro del iframe.
La misma página también puede abrirse de manera independiente.
8. Guardar y visualizar
Guarda ambos archivos.
Localiza index.html en la carpeta del proyecto.
Ábrelo con un navegador.
Revisa el contenido.
Modifica un párrafo en Visual Studio Code.
Guarda.
Actualiza la página del navegador.
Para este ejemplo de HTML y archivos locales, no es necesario instalar PHP, una base de datos o un servidor de aplicaciones.
La dirección puede comenzar con:
file:///
Eso indica que el navegador abrió un archivo local. No significa que el sitio esté publicado en Internet.
9. Formatear el código
En Visual Studio Code, abre la paleta de comandos y busca:
Format Document
o su equivalente traducido.
El formato mejora la sangría y facilita reconocer la anidación. No sustituye la revisión de la estructura y el significado del documento.
10. Comprobar el resultado
Comprobación | Resultado esperado |
Título de la pestaña | Identifica el laboratorio |
Texto acentuado | Se muestra correctamente |
Navegación interna | Lleva a la sección elegida |
Imagen | Aparece si se guardó en la ruta indicada |
Listas | Presentan servicios y pasos |
Tabla | Relaciona equipos con categoría y estado |
Se muestra o puede abrirse por enlace, si existe | |
Ayuda | Abre como página independiente y dentro del marco |
Pregunta desplegable | Puede abrirse y cerrarse |
Regreso al inicio | Lleva al encabezado |
La ausencia de una imagen o un PDF no debe confundirse con un error general de HTML: primero hay que verificar que el recurso exista y que su ruta sea correcta.
Errores frecuentes al comenzar
Problema | Posible causa | Corrección |
Se muestra el código como texto | Archivo con extensión incorrecta o contenido escapado | Revisar el nombre y la forma de apertura |
La página no refleja cambios | Archivo sin guardar o página sin actualizar | Guardar y recargar |
La imagen no aparece | Ruta, nombre o extensión incorrectos | Comparar el código con el archivo real |
Un enlace interno no funciona | El identificador no existe o es diferente | Revisar href e id |
Aparecen caracteres extraños | Codificación inconsistente | Guardar en UTF-8 y declararlo |
El contenido queda mal organizado | Anidación incorrecta | Revisar apertura, cierre y contenido permitido |
Un botón no hace nada | No tiene comportamiento programado ni acción de envío | Definir qué debe hacer |
El PDF no se visualiza | Falta el archivo o el navegador no lo incorpora | Comprobar el recurso y ofrecer enlace |
Una página externa no aparece en un marco | El sitio impide la incorporación | Utilizar un enlace o una integración permitida |
Funciona en una computadora y falla en otra | Rutas personales o diferencias entre mayúsculas y minúsculas | Utilizar rutas relativas consistentes |
Un navegador puede mostrar una página con errores de marcado. Que “se vea bien” no demuestra que el documento sea correcto.
Puede utilizarse el Nu HTML Checker para revisar el código mediante carga de archivo o entrada de texto:
La validación ayuda a detectar problemas de conformidad, pero debe complementarse con pruebas de navegación, contenido y accesibilidad.
Conclusión
HTML permite convertir información en un documento estructurado y navegable. Sus elementos expresan relaciones: qué es un encabezado, qué constituye una lista, qué datos pertenecen a una tabla y hacia dónde conduce un vínculo.
Visual Studio Code facilita la escritura y organización del código, mientras que el navegador interpreta el documento y presenta el resultado.
La primera página desarrollada reúne texto, enlaces, listas, tablas, imágenes, objetos e incorporación de otro documento. A partir de esta estructura pueden añadirse estilos más elaborados, comportamientos con JavaScript y, posteriormente, operaciones conectadas con un servidor.
Referencias y enlaces de consulta
MDN Web Docs. HTML: Lenguaje de Marcado de Hipertexto. Introducción y documentación general. https://developer.mozilla.org/es/docs/Web/HTML
MDN Web Docs. Sintaxis básica de HTML. Elementos, atributos, anidación y escritura del marcado. https://developer.mozilla.org/es/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax
WHATWG. HTML Living Standard. Especificación del lenguaje HTML. https://html.spec.whatwg.org/
WHATWG. Common microsyntaxes. Reglas para valores numéricos, booleanos, fechas y otros formatos. https://html.spec.whatwg.org/dev/common-microsyntaxes.html
Microsoft. HTML in Visual Studio Code. Herramientas de edición y formato de HTML. https://code.visualstudio.com/docs/languages/html
Microsoft. Emmet in Visual Studio Code. Abreviaturas y generación de estructuras. https://code.visualstudio.com/docs/languages/emmet
MDN Web Docs. Referencia de elementos HTML. Función y características de los elementos. https://developer.mozilla.org/es/docs/Web/HTML/Reference/Elements
MDN Web Docs. Creating links. Construcción de enlaces y uso de rutas. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links
MDN Web Docs. Lists. Listas ordenadas, no ordenadas y de descripciones. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists
MDN Web Docs. HTML table basics. Organización de datos mediante tablas. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics
MDN Web Docs. Elemento img. Inserción de imágenes y alternativas textuales. https://developer.mozilla.org/es/docs/Web/HTML/Reference/Elements/img
MDN Web Docs. De object a iframe. Recursos y documentos incorporados. https://developer.mozilla.org/es/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies
MDN Web Docs. Elemento iframe. Contextos de navegación incorporados. https://developer.mozilla.org/es/docs/Web/HTML/Reference/Elements/iframe
WHATWG. Obsolete features. Características históricas que deben distinguirse del desarrollo actual. https://html.spec.whatwg.org/multipage/obsolete.html
W3C. Nu HTML Checker. Herramienta para revisar documentos HTML. https://validator.w3.org/nu/
Comentarios