HTML y CSS
HTML5: Etiquetas semánticas
Estructurar el contenido de ● Unidad 1: HTML y CSS Te encuentras aquí
un documento con HTML y ● Unidad 2: Bootstrap
utilizar componentes CSS
para definir el aspecto visual ● Unidad 3: JavaScript
de la página web.
● Unidad 4: Terminal, Git, GitHub y
GitHub Pages
¿Qué aprenderás en esta sesión?
● Aplicar las etiquetas semánticas de HTML5, para
agrupar el contenido, darle sentido y forma a las
diferentes secciones que componen la página web.
¿Recuerdas la estructura
del archivo HTML de
Meet&Coffee?
¿Qué es HTML5?
Investiguemos
/* Dividiendo nuestra página en
secciones */
Dividiendo nuestra página en secciones
<div>
● Si inspeccionamos, dentro
de su <body>, hay varias
etiquetas <div> que
agrupan la información
● Estás sólo dividen el
contenido, pero no tienen
semántica.
Dividiendo nuestra página en secciones
Orientación semántica
Fuente: w3schools
● HTML5 tiene semántica: Define
estructura, y facilita que la página web
sea mejor indexada por los
buscadores.
● Usaremos:
○ <nav>
○ <header>
○ <section>
○ <footer>
Si quieres conocer más acerca de las etiquetas
semánticas, puedes consultar este enlace.
¿Por qué se habla de
etiquetas semánticas?
¿Por qué <div> no es una
etiqueta semántica?
/* Analizando secciones de nuestro
HTML */
Analizando secciones de nuestro HTML
HTML5 Element Flowchart
● Ahora analizaremos
sección a sección
nuestro HTML de Meet &
Coffee
● Para ello usaremos el
"HTML5 Element
Flowchart" de HTML5
Doctor, como se puede
observar en la siguiente
imagen:
Analizando secciones de nuestro HTML
Primera sección: Barra de navegación
<nav>
<ul>
¿Es un bloque de navegación? <li><a href="#">Ícono</a></li>
<li><a
href="#">Ubicación</a></li>
● Sí, por lo tanto la etiqueta que <li><a href="#">Próxima
usaremos será <nav>. Charla</a> </li>
<li><a href="#">Eventos
anteriores</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
Analizando secciones de nuestro HTML
Segunda sección: Sección principal (Hero section)
● ¿Es un bloque de navegación? No, porque no nos proporciona enlaces para navegar
por el sitio.
● ¿Tiene sentido por sí misma? No, porque es la primera parte de un contenido mayor.
● ¿Se requiere para entender el contenido? Sí.
● ¿Podría moverse a un apéndice (complemento)? No.
● ¿Tiene lógica añadirle un encabezado?: Sí, por lo tanto sería un <section>.
Sin embargo…
Analizando secciones de nuestro HTML
Segunda sección: Sección principal (Hero section)
● Existe una sección más específica que <section> para esta división.
● En esta sección está el encabezado principal <h1>
● Es lo primero que se ve de la página después del menú de navegación
● Incluye la información que permite contextualizar al sitio que se está visitando.
● Por lo tanto, esta sección la podemos etiquetar como <header>
<header>
<img src="assets/img/bg-hero.png" alt="Hero image">
<h1>Descubre lo último en tecnología bebiendo café</h1>
<h2>Charlas, eventos y simposios sobre tecnología</h2>
</header>
Analizando secciones de nuestro HTML
Tercera sección: Sección de lugar.
● ¿Es un bloque de navegación? No.
<section>
● ¿Tiene sentido por sí misma? No, ya que <img src="assets/img/we-work.jpg"
depende de las otras secciones para su alt="We work location">
entendimiento. <h2>¿Donde nos juntamos?</h2>
<p>Todos los martes y viernes, de
● ¿Se requiere para entender el contenido? Sí. 19:00 a 22:00 en We Work, Calle Baker 133,
Providencia, Santiago.</p>
● ¿Podría moverse a un apéndice </section>
(complemento)? No.
● ¿Tiene lógica añadirle un encabezado?: Sí, por
lo tanto sería un <section>.
Analizando secciones de nuestro HTML
Sección final: Contacto (footer)
● <footer> representa un pie de página
para el elemento principal.
<footer>
<p>Meet & coffee 2018. Todos los
● Generalmente contiene información derechos reservados.</p>
sobre su sección como quién lo </footer>
escribió, enlaces a documentos
relacionados, datos de derechos de
autor o similares.
Resumen
● La etiqueta <div> se utiliza para crear divisiones dentro de una página web, pero no
tienen semántica.
● HTML5 tiene etiquetas que cumplen la misma función de dividir que el <div>, pero que
le atribuyen semántica al contenido, como <nav>, <header>, <section> y <footer>, entre
otras.
¿Para qué se utiliza <nav>?
¿Para qué se utiliza
<header>?
¿Para qué se utiliza
<section>?
¿Para qué se utiliza <footer>?
Próxima sesión…
● Realizar material de estudio asincrónico que consiste
en un desafío evaluado para practicar los conceptos
aprendidos en todas las sesiones anteriores.
