Desarrollo de Sistemas Web (Front-End)

Guía de referencia — Clase 2

HTML semántico, etiquetas básicas y organización del contenido

1. ¿Qué es HTML?

HTML significa HyperText Markup Language. Es un lenguaje de marcado que se usa para estructurar el contenido de una página web.

HTML no se usa para “hacer que una página se vea linda”. Su función principal es decir qué es cada parte del contenido.

Por ejemplo:

  • un título

  • un párrafo

  • una lista

  • un enlace

  • una imagen

Idea clave

HTML organiza el contenido.

Después, otras tecnologías completan el trabajo:

  • CSS: define la apariencia visual

  • JavaScript: agrega comportamiento e interacción

2. HTML, CSS y JavaScript

Estas tres tecnologías suelen trabajar juntas, pero no cumplen la misma función.

HTML

Define la estructura y el significado del contenido.

CSS

Define colores, tamaños, márgenes, posiciones y estilo visual.

JavaScript

Permite que la página responda a acciones del usuario o cambie dinámicamente.

Ejemplo simple

<h1>Bienvenidos</h1>
<p>Este es un sitio de ejemplo.</p>

Acá HTML indica que hay:

  • un título principal

  • un párrafo

Todavía no decide cómo se ven exactamente. Eso vendrá después con CSS.

3. ¿Qué significa que HTML sea semántico?

Cuando decimos que HTML es semántico, hablamos de usar cada etiqueta según su significado.

No elegimos una etiqueta porque “se ve grande” o “queda mejor visualmente”.
La elegimos porque representa correctamente una parte del contenido.

Ejemplos correctos

  • h1 para un título principal

  • p para un párrafo

  • ul para una lista no ordenada

  • a para un enlace

  • img para una imagen

Ejemplo de mal criterio

Usar un h1 solamente porque el texto se ve grande.

Buen criterio

Usar un h1 porque ese texto es el título principal de la página.

Idea clave

La etiqueta correcta se elige por función, no por apariencia.

4. ¿Qué es una etiqueta HTML?

Una etiqueta HTML es una marca que se escribe entre símbolos < > y que le dice al navegador qué tipo de contenido estamos agregando.

Muchas etiquetas tienen:

  • etiqueta de apertura

  • contenido

  • etiqueta de cierre

Ejemplo

<p>Este es un párrafo.</p>

En este caso:

  • <p> es la apertura

  • Este es un párrafo. es el contenido

  • </p> es el cierre

5. Tipos básicos de etiquetas

5.1 Etiquetas con apertura y cierre

Son las más comunes cuando el contenido va encerrado entre dos marcas.

Ejemplos

<h1>Título principal</h1>
<p>Un párrafo de texto.</p>
<strong>Texto importante</strong>
<a href="https://www.google.com">Ir a Google</a>

5.2 Etiquetas simples

Son etiquetas que no envuelven un contenido interno de la misma forma.

Ejemplos

<br>
<hr>
<img src="foto.jpg" alt="Foto de ejemplo">

6. Estructura básica de un documento HTML

Todo documento HTML parte de una base mínima.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primera página</title>
</head>
<body>

</body>
</html>

Explicación

<!DOCTYPE html>

Indica que estamos trabajando con HTML5.

<html>

Es el elemento raíz del documento.

<head>

Contiene información para el navegador, no para el usuario de forma directa.

<meta charset="UTF-8">

Permite usar correctamente caracteres especiales como tildes y eñes.

<meta name="viewport" ...>

Ayuda a que la página se adapte mejor en pantallas pequeñas.

<title>

Define el título que aparece en la pestaña del navegador.

<body>

Contiene todo lo visible para el usuario.

7. Encabezados: h1 a h6

Las etiquetas de encabezado se usan para títulos y subtítulos.

<h1>Título principal</h1>
<h2>Sección</h2>
<h3>Subsección</h3>
<h4>Detalle</h4>

Jerarquía

  • h1: título principal

  • h2: secciones principales

  • h3: subsecciones

  • h4, h5, h6: niveles menores

Importante

Los encabezados no indican solo tamaño visual.
Indican nivel de importancia y jerarquía.

Ejemplo correcto

<h1>Mi sitio de recetas</h1>
<h2>Recetas dulces</h2>
<h3>Torta de chocolate</h3>
<h3>Budín de limón</h3>
<h2>Recetas saladas</h2>

Ejemplo problemático

<h3>Mi sitio de recetas</h3>
<h1>Torta de chocolate</h1>
<h2>Recetas dulces</h2>

En este caso, la jerarquía es confusa.

8. Párrafos: la etiqueta p

La etiqueta p se usa para bloques de texto.

<p>Estoy aprendiendo HTML en la materia de Front-End.</p>
<p>HTML me permite organizar correctamente el contenido de una página.</p>

Cuándo usar p

Cuando querés escribir una idea, una explicación o un bloque de texto normal.

Para qué sirve

  • separa ideas

  • mejora la legibilidad

  • organiza mejor el contenido

Error común

Poner mucho texto sin separarlo en párrafos.

9. Saltos de línea: la etiqueta br

br significa line break.
Sirve para hacer un salto de línea dentro del mismo bloque de texto.

<p>
Nombre: Juan Pérez<br>
Curso: Front-End<br>
Comisión: 1° A
</p>

Importante

br no crea un nuevo párrafo.
Solo baja una línea.

Cuándo puede ser útil

  • direcciones

  • datos cortos

  • bloques breves donde conviene cortar la línea

Cuándo no conviene abusar

No conviene usar muchos br para “maquetar” una página o separar grandes bloques de contenido.

Mal uso

<p>Primer texto</p>
<br><br><br>
<p>Segundo texto</p>

Mejor alternativa

<p>Primer texto</p>
<p>Segundo texto</p>

10. Separación horizontal: la etiqueta hr

hr inserta una línea horizontal.

<h2>Noticias</h2>
<p>Últimas novedades del curso.</p>
<hr>
<h2>Próximas actividades</h2>
<p>Ejercicios y práctica.</p>

Para qué puede servir

  • marcar una separación temática simple

  • dividir bloques de contenido

Idea clave

hr puede ayudar, pero no reemplaza una buena estructura.

11. Listas en HTML

HTML permite organizar varios elementos relacionados mediante listas.

11.1 Lista no ordenada: ul

Se usa cuando el orden de los elementos no importa.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

11.2 Lista ordenada: ol

Se usa cuando el orden sí importa.

<ol>
  <li>Abrir Visual Studio Code</li>
  <li>Crear un archivo HTML</li>
  <li>Guardar el archivo</li>
</ol>

11.3 Elemento de lista: li

Cada ítem va dentro de una etiqueta li.

Diferencia entre ul y ol

ul

  • unordered list

  • lista no ordenada

  • el orden no importa

  • el navegador suele mostrar viñetas

ol

  • ordered list

  • lista ordenada

  • el orden sí importa

  • el navegador suele mostrar numeración automática

Ejemplo comparativo

<h2>Lenguajes del Front-End</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>Pasos para crear una página</h2>
<ol>
  <li>Crear el archivo</li>
  <li>Escribir la estructura básica</li>
  <li>Agregar contenido</li>
</ol>

Error común

Escribir los números manualmente dentro de una ul.

<ul>
  <li>1. Paso uno</li>
  <li>2. Paso dos</li>
</ul>

Eso está mal planteado semánticamente. Si hay pasos, corresponde ol.

12. Enlaces: la etiqueta a

La etiqueta a se usa para crear enlaces.

<a href="https://www.google.com">Ir a Google</a>

href

Es el atributo que indica a dónde lleva el enlace.

Ejemplo de enlace externo

<a href="https://developer.mozilla.org/es/">Ir a MDN Web Docs</a>

Ejemplo de enlace interno

<a href="contacto.html">Ir a contacto</a>

Buenas prácticas

El texto del enlace debe ser claro.

Poco claro

<a href="https://www.google.com">Clic acá</a>

Mejor

<a href="https://www.google.com">Ir a Google</a>

Abrir en otra pestaña

<a href="https://www.google.com" target="_blank">Abrir Google</a>

Aclaración

target="_blank" hace que el enlace abra en otra pestaña.

13. Imágenes: la etiqueta img

La etiqueta img se usa para insertar imágenes.

<img src="foto.jpg" alt="Foto de ejemplo">

Atributos importantes

src

Indica la ruta de la imagen.

alt

Describe la imagen.

Ejemplo con URL externa

<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo de 150 por 150 píxeles">

Ejemplo con archivo local

<img src="imagenes/perfil.jpg" alt="Foto de perfil del estudiante">

¿Por qué alt es importante?

  • describe la imagen si no carga

  • mejora la accesibilidad

  • ayuda a comprender el contenido

Mal ejemplo

<img src="foto1.jpg" alt="imagen">

Mejor ejemplo

<img src="foto1.jpg" alt="Estudiante escribiendo código HTML en su computadora">

14. Texto con importancia: strong

La etiqueta strong marca una parte del texto como importante.

<p>HTML es <strong>fundamental</strong> para estructurar una página web.</p>

Importante

No se usa solo para “poner en negrita”.
Se usa para marcar importancia.

15. Texto con énfasis: em

La etiqueta em marca una parte del texto con énfasis.

<p>Hoy vamos a trabajar con <em>muchos ejemplos</em>.</p>

Diferencia entre strong y em

  • strong: indica importancia

  • em: indica énfasis

Ambas pueden tener un efecto visual por defecto en el navegador, pero su sentido no es solo visual.

16. Atributos HTML

Los atributos agregan información a las etiquetas.

Ejemplos

<a href="https://www.google.com">Google</a>
<img src="foto.jpg" alt="Foto de ejemplo">
<html lang="es">

Estructura general

<etiqueta atributo="valor">

Ejemplo

<a href="https://www.youtube.com">YouTube</a>

Acá:

  • a es la etiqueta

  • href es el atributo

  • https://www.youtube.com es el valor

17. Organización del contenido

Saber HTML no es memorizar una lista de etiquetas.
La parte importante es cómo se organiza todo junto.

Una página clara suele tener:

  • un título principal

  • secciones

  • texto separado en párrafos

  • listas cuando hay varios elementos relacionados

  • enlaces claros

  • imágenes bien descritas

Idea clave

Una página no es una suma de etiquetas puestas al azar.

18. Ejemplo de contenido mal organizado

<h3>Bienvenidos</h3>
<p>Curso Front-End</p>
<h1>HTML</h1>
<br>
<br>
<a href="#">más</a>
<img src="foto.jpg">
<h2>Temas</h2>

Problemas

  • jerarquía de encabezados confusa

  • el enlace no explica a dónde lleva

  • la imagen no tiene alt

  • hay saltos de línea sin mucho criterio

  • el orden general es poco claro

19. Ejemplo mejor organizado

<h1>Curso de Desarrollo Front-End</h1>
<p>En esta materia aprenderemos a crear páginas web.</p>

<h2>Temas principales</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>Más información</h2>
<p>Podés consultar la documentación en el siguiente enlace:</p>
<a href="https://developer.mozilla.org/es/">Ir a MDN Web Docs</a>

<hr>

<img src="frontend.jpg" alt="Ilustración sobre desarrollo web front-end">

Mejoras

  • hay un h1 claro

  • hay secciones con h2

  • la lista está bien usada

  • el enlace tiene texto descriptivo

  • la imagen tiene alt

20. Ejemplo completo 1 — Página simple sobre un tema

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi deporte favorito</title>
</head>
<body>

  <h1>Mi deporte favorito: el fútbol</h1>

  <p>
    El fútbol es uno de los deportes más populares del mundo.
    Me gusta porque es dinámico y emocionante.
  </p>

  <p>
    Se juega en equipo y requiere práctica constante.<br>
    También ayuda a mejorar la coordinación y la resistencia física.
  </p>

  <h2>Elementos del fútbol</h2>
  <ul>
    <li>Pelota</li>
    <li>Arco</li>
    <li>Botines</li>
    <li>Camiseta</li>
  </ul>

  <h2>Más información</h2>
  <p>Podés leer más sobre este deporte en el siguiente enlace:</p>

  <a href="https://es.wikipedia.org/wiki/F%C3%BAtbol">Ir a la página sobre fútbol</a>

  <p>Imagen relacionada:</p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Soccerball.svg" alt="Pelota de fútbol en fondo blanco">

</body>
</html>

21. Ejemplo completo 2 — CV simple

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CV - Eduardo Malvacio</title>
</head>
<body>

  <h1>Eduardo Malvacio - Currículum Vitae</h1>

  <p>
    Soy ingeniero en informática y me dedico al desarrollo de aplicaciones,
    al marketing digital y al asesoramiento de marcas.
    Me interesa especialmente la creación de soluciones digitales y el trabajo con <strong>tecnologías web</strong>.
  </p>

  <p>
    Trabajo en proyectos vinculados al desarrollo de aplicaciones personalizadas,
    automatizaciones y micro SaaS.<br>
    También tengo experiencia en marketing médico y en la construcción de productos digitales.
  </p>

  <h2>Datos personales</h2>
  <ul>
    <li>Nombre: Eduardo Malvacio</li>
    <li>Profesión: Ingeniero en informática</li>
    <li>Área de trabajo: Desarrollo web, automatización y marketing digital</li>
    <li>LinkedIn: perfil profesional disponible online</li>
  </ul>

  <h2>Perfil profesional</h2>
  <p>Podés ver más sobre mi experiencia profesional en el siguiente enlace:</p>

  <a href="https://www.linkedin.com/in/emalvacio/">Ir a mi LinkedIn</a>

  <p>Imagen de perfil:</p>
  <img src="foto-perfil.jpg" alt="Foto de perfil de Eduardo Malvacio">

</body>
</html>

22. Ejemplo completo 3 — Página institucional simple

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Curso de Front-End</title>
</head>
<body>

  <h1>Curso de Desarrollo Front-End</h1>

  <p>Este curso introduce a los estudiantes en HTML, CSS y JavaScript.</p>
  <p>El objetivo es aprender a construir páginas web claras, ordenadas y funcionales.</p>

  <h2>Temas principales</h2>
  <ol>
    <li>Estructura HTML</li>
    <li>Estilos con CSS</li>
    <li>Interacción con JavaScript</li>
  </ol>

  <h2>Recursos</h2>
  <ul>
    <li>Apuntes de clase</li>
    <li>Ejercicios prácticos</li>
    <li>Documentación web</li>
  </ul>

  <p>Accedé a más material en el siguiente enlace:</p>
  <a href="https://developer.mozilla.org/es/">Documentación recomendada</a>

  <hr>

  <img src="https://via.placeholder.com/300x150" alt="Imagen ilustrativa del curso de desarrollo web">

</body>
</html>

23. Errores comunes al empezar con HTML

Error 1: usar etiquetas por apariencia

Elegir h1 porque “se ve grande”.

Error 2: poner todo el texto seguido

No separar ideas en párrafos.

Error 3: abusar de br

Usarlo para maquetar en vez de para un salto puntual.

Error 4: usar enlaces con texto poco claro

Ejemplo: “más”, “ver”, “clic acá”.

Error 5: olvidar el atributo alt en imágenes

Error 6: mezclar títulos sin jerarquía

Por ejemplo, empezar con h3 y después usar h1.

Error 7: escribir números manualmente en listas no ordenadas

Error 8: olvidar cerrar etiquetas

24. Comparación: mal uso y mejor uso

Mal uso

<h1>Noticias</h1>
Texto del curso
<br><br><br>
<h4>Temas</h4>
1. HTML
2. CSS
3. JavaScript
<a href="#">más</a>
<img src="imagen.jpg">

Mejor uso

<h1>Noticias del curso</h1>
<p>En esta semana trabajaremos conceptos básicos de HTML.</p>

<h2>Temas</h2>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<p>Más información en el siguiente enlace:</p>
<a href="https://developer.mozilla.org/es/">Ir a MDN Web Docs</a>

<img src="imagen.jpg" alt="Imagen representativa del curso de programación web">

25. Ejercicio modelo

Consigna

Crear una página HTML sobre un tema libre que incluya:

  • un h1

  • dos h2

  • dos párrafos

  • al menos un br, solo si realmente hace falta

  • una lista

  • un enlace

  • una imagen con alt

  • una palabra destacada con strong o em

Recomendaciones

  • elegir un tema simple

  • organizar primero las ideas

  • no pensar primero en lo visual

  • revisar que cada etiqueta tenga sentido

Posibles temas

  • una serie o película

  • un deporte

  • un videojuego

  • una banda musical

  • una pequeña presentación personal

  • un mini CV

26. Guía para construir una página paso a paso

Paso 1

Escribir la estructura básica del documento.

Paso 2

Agregar el título principal con h1.

Paso 3

Agregar uno o más párrafos.

Paso 4

Dividir la información en secciones con h2.

Paso 5

Agregar listas si hay varios elementos relacionados.

Paso 6

Agregar un enlace con texto claro.

Paso 7

Agregar una imagen con src y alt.

Paso 8

Revisar la jerarquía y el orden del contenido.

27. Visual Studio Code

Durante la cursada se puede usar Visual Studio Code como editor de código.

Ventajas

  • gratuito

  • muy usado

  • cómodo para escribir HTML, CSS y JavaScript

  • permite trabajar con varios archivos a la vez

Recomendación básica

Guardar siempre el archivo con extensión .html.

Ejemplos:

  • index.html

  • cv.html

  • ejercicio1.html

28. Buenas prácticas iniciales

  • usar nombres claros en los archivos

  • escribir el código ordenado

  • respetar sangrías

  • revisar cierres de etiquetas

  • usar alt en imágenes

  • usar enlaces con texto descriptivo

  • no abusar de br

  • usar títulos con jerarquía lógica

Ejemplo más prolijo

<h1>Mi página</h1>
<p>Bienvenidos a mi sitio.</p>

<h2>Temas</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Ejemplo menos prolijo

<h1>Mi página</h1><p>Bienvenidos a mi sitio.</p><h2>Temas</h2><ul><li>HTML</li><li>CSS</li></ul>

Los dos pueden funcionar, pero no se leen igual de bien.

29. Resumen de etiquetas vistas

Estructura general

  • html: inicio del documento HTML

  • head: información para el navegador

  • body: contenido visible

  • title: título de la pestaña

  • meta: metadatos

Organización del contenido

  • h1 a h6: títulos y subtítulos

  • p: párrafo

  • br: salto de línea

  • hr: separación horizontal

Listas

  • ul: lista no ordenada

  • ol: lista ordenada

  • li: elemento de lista

Vínculos e imágenes

  • a: enlace

  • img: imagen

Texto con significado

  • strong: importancia

  • em: énfasis

30. Conclusión

HTML es la base estructural de una página web.

Ideas que tienen que quedar claras

  • HTML organiza el contenido

  • la semántica importa

  • cada etiqueta tiene una función

  • los títulos marcan jerarquía

  • los párrafos separan ideas

  • br no reemplaza un párrafo

  • ul y ol no son lo mismo

  • los enlaces deben ser claros

  • las imágenes deben tener alt

  • una página clara empieza con una estructura clara

Frase final

Saber HTML no es memorizar etiquetas: es saber usar cada una donde corresponde.

31. Ejemplos extra de práctica

Ejemplo A — Lista de compras

<h1>Lista de compras</h1>
<p>Estos son los productos que necesito comprar esta semana.</p>

<h2>Productos</h2>
<ul>
  <li>Leche</li>
  <li>Pan</li>
  <li>Arroz</li>
  <li>Frutas</li>
</ul>

Ejemplo B — Pasos de una receta

<h1>Cómo preparar mate</h1>
<h2>Pasos</h2>
<ol>
  <li>Colocar yerba en el mate</li>
  <li>Inclinar la yerba</li>
  <li>Agregar agua tibia</li>
  <li>Colocar la bombilla</li>
  <li>Cebar con agua caliente</li>
</ol>

Ejemplo C — Datos de contacto

<h1>Contacto</h1>
<p>
Instituto de Formación Técnica Superior N° 18<br>
Tecnicatura Superior en Desarrollo de Software<br>
Turno noche
</p>

Ejemplo D — Enlace útil

<p>Consultá más material en el siguiente sitio:</p>
<a href="https://developer.mozilla.org/es/">MDN Web Docs</a>

Ejemplo E — Imagen simple

<img src="logo.png" alt="Logo del proyecto estudiantil">

32. Mini checklist antes de entregar un ejercicio

Antes de entregar un archivo HTML, conviene revisar:

  • ¿Tiene estructura básica completa?

  • ¿Tiene un h1 claro?

  • ¿Los subtítulos están bien organizados?

  • ¿Los textos están en párrafos?

  • ¿La lista usada es la correcta?

  • ¿El enlace explica a dónde lleva?

  • ¿La imagen tiene alt?

  • ¿El archivo está guardado como .html?

  • ¿El contenido tiene sentido y orden?

33. Sugerencia de práctica personal

Para ganar seguridad con HTML, conviene practicar creando páginas pequeñas como:

  • una presentación personal

  • una ficha de una película

  • una página sobre un hobby

  • un mini CV

  • una página de noticias simple

  • una lista de recursos útiles

Cuanto más practiques la organización del contenido, más natural te va a resultar usar etiquetas semánticas correctamente.


Última modificación: lunes, 20 de abril de 2026, 18:18