Imagina leer un libro donde todo el texto tiene exactamente el mismo tamaño, sin capítulos, sin palabras en negrita y sin índice, solo letras continuas y sin sentido. Sería ilegible. La web funciona de la misma manera.
Los navegadores web son completamente ciegos. No saben qué es un título o qué es un párrafo a menos que se lo digas explícitamente. Bienvenidos a tu segunda clase. Hoy dejaremos de escribir texto al azar para empezar a darle estructura real al código.
Jerarquía visual con Headers
Los headers son los encargados de darle niveles de importancia a nuestro contenido. HTML nos proporciona seis niveles, desde <h1> hasta <h6>.
El tag <h1> es el título principal del documento. Una regla de oro irrompible: solo debe existir un único <h1> por página. Los motores de búsqueda lo utilizan para entender el tema principal de tu sitio.
Si quieres usar texto grande, no uses un <h1>. Usaremos CSS para el diseño visual más adelante. Usar los tags incorrectos solo para cambiar el tamaño de la fuente es la forma más rápida de arruinar tu SEO.
<h1>Guía de HTML Semántico</h1>
<h2>Conceptos Básicos</h2>
<h3>Uso de Headers</h3>
<p>Este es un párrafo de texto normal que acompaña a los headers.</p>
HTMLAgrupando información con Lists
Cuando necesitas enumerar elementos, no escribes texto separado por guiones de forma manual. Para eso existen las lists. HTML maneja dos tipos principales: desordenadas y ordenadas.
Las unordered lists utilizan el tag <ul> y muestran viñetas. Las ordered lists usan el tag <ol> y enumeran automáticamente con números.
En ambos casos, cada elemento interno debe estar envuelto de manera estricta en un tag <li> (list item).
<h3>Lenguajes de Frontend</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Pasos para programar</h3>
<ol>
<li>Abrir el editor de código</li>
<li>Escribir el código</li>
<li>Guardar el archivo</li>
</ol>
HTMLConectando la web con Anchor y Attributes
La web recibe su nombre porque todos los documentos están conectados entre sí. El tag <a>, conocido como anchor, es el responsable de crear estas conexiones. Sin embargo, un anchor por sí solo no sabe a dónde ir.
Aquí entran en juego los attributes. Un attribute es información adicional que inyectamos dentro del tag de apertura. Para un anchor, el attribute más crítico es href, el cual indica la dirección de destino.
Si deseas que el enlace se abra en una pestaña nueva para no perder a tu visitante, puedes agregar el attribute target con el valor _blank. Es un detalle simple que mejora enormemente la experiencia de navegación.
<p>
Visita mi blog para más tutoriales:
<a href="https://sofidev.blog" target="_blank">Leer artículos</a>
</p>
HTMLIdentificadores únicos: id, class y data
A medida que tu documento crece, tendrás decenas de tags idénticos. El navegador necesita una forma de diferenciarlos cuando queramos aplicarles estilos o manipularlos con methods de JavaScript.
El attribute id es como un número de pasaporte. Es estrictamente único e irrepetible dentro de la misma página. Úsalo solo para elementos estructurales cruciales.
Por otro lado, el attribute class funciona como un uniforme. Puedes aplicar la misma class a múltiples elementos para agruparlos lógicamente. Finalmente, los data attributes te permiten almacenar información personalizada directamente en el HTML.
<nav id="menu-principal">
<a class="boton-primario" href="/">Inicio</a>
<a class="boton-primario" href="/contacto">Contacto</a>
<div data-usuario="novato">Información de sesión</div>
</nav>
HTMLEl verdadero propósito de la Accessibility
La semántica no existe solo para mantener tu código organizado o para complacer a los motores de búsqueda. Su propósito principal es la accessibility. Escribimos código para que cualquier persona pueda consumirlo.
Los lectores de pantalla utilizados por personas con discapacidad visual dependen totalmente de que uses los tags correctos. Si creas un botón usando un simple tag <div>, esa herramienta jamás le dirá al usuario que puede interactuar con él.
Escribir HTML semántico es el primer paso para crear una web inclusiva. Acostúmbrate desde hoy a pensar en el significado de la estructura, no solo en cómo se ve en la pantalla. Tu yo del futuro te lo agradecerá.