HTML SEMANTICO
Objetivo General: Que los estudiantes comprendan la importancia de utilizar etiquetas HTML con significado (semánticas) para estructurar el contenido de una página web de forma clara y lógica.
Introducción
al HTML Semántico
El HTML SEMANTICO Les ayudará a construir páginas web más organizadas, accesibles y fáciles de entender.
"Semántico significa 'relacionado con el significado'. En HTML, las etiquetas semánticas son aquellas que le dicen al navegador y a otras personas (como los buscadores) qué tipo de contenido estamos mostrando."
header: "Es la cabecera de la página o de una sección. Generalmente contiene el título y el logo."
· Ejemplo: "Imaginemos que es como el letrero de la entrada de una casa."
nav: "Es la zona de navegación, donde ponemos los enlaces a otras partes de la página o a otras páginas."
· Ejemplo: "Es como el mapa de la casa, que te dice dónde está cada habitación."
main: "Es la parte principal de la página, donde va el contenido más importante."
· Ejemplo: "Es como la sala de estar, donde pasamos más tiempo."
article: "Es un artículo, como una noticia o una entrada de blog."
· Ejemplo: "Es como una historia o una carta que podemos leer."
section: "Es una sección dentro del contenido, para organizar diferentes partes."
· Ejemplo: "Es como una habitación dentro de la casa."
aside:
"Es contenido
relacionado pero no esencial, como información adicional o publicidad."
footer: "Es el pie de página, generalmente contiene información de contacto o derechos de autor."
· Ejemplo: "Es como el buzón, que está al final de la casa."
Codigo de ejemplo (semantico.html)
<body>
<header>
<h1>Mi Blog</h1>
</header>
<nav>
<a
href="#">Inicio</a>
<a
href="#">Blog</a>
</nav>
<main>
<article>
<h2>Primer Artículo</h2>
<p>Contenido del
artículo...</p>
</article>
</main>
<aside>
<h3>Contenido extra</h3>
</aside>
<footer>
<p>Derechos Reservados
2024</p>
</footer>
</body>
Ejercicio 1: "Identifiquen en la página 'Hola Mundo' qué etiquetas semánticas podríamos usar para mejorarla." (Ej: podríamos meter el h1 en un header)
Ejercicio 2: "Piense cómo dividiría una página web sobre su tema favorito utilizando header, nav, main, article, section, aside y footer. No necesitan escribir código, solo describirlo."
Aplicación
y Práctica del HTML Semántico
"¿Qué significa HTML semántico? ¿Cuáles son algunas etiquetas semánticas que aprendimos?"
·
Paso
1: Abrir el editor de código.
·
Paso
2: Crear un nuevo archivo HTML con la estructura básica (<!DOCTYPE html>,
<html>, <head>, <body>).
·
Paso
3: Escribir el código de una página web sencilla siguiendo las siguientes instrucciones.
Ejemplo:
·
Paso
3.1: Colocar un encabezado con header que contenga un h1 con el título del
proyecto (ej. "Mi Blog de Animales").
·
Paso
3.2: Crear una barra de navegación con nav que tenga enlaces a diferentes
secciones (ej. "Perros", "Gatos", "Aves").
·
Paso
3.3: Escribir el contenido principal con main con al menos un article con un
título y un párrafo.
·
Paso
3.4: Agregar un aside con información adicional.
·
Paso
3.5: Agregar un footer con información de derechos de autor.
·
Los
estudiantes deberán completar el codigo (contenido).
Algunas de las ventajas del HTML semántico:
·
Mejora
la organización del contenido.
·
Hace
más fácil entender el código para otros programadores.
·
Ayuda
a los buscadores a entender mejor el contenido de la página.
·
Mejora
la accesibilidad para personas que usan lectores de pantalla.
Ejercicio
3:
"Transforma tu 'Hola Mundo'": tomen el código de "Hola Mundo" y lo mejoran añadiendo etiquetas semánticas (header, main, footer).
"Mi
Página Personal Semántica": Crear una página web básica sobre usted mismo
usando las etiquetas semánticas aprendidas.
No hay comentarios:
Publicar un comentario