Hoy voy a compartir contigo algunos consejos esenciales de HTML que todo principiante debería conocer para mejorar y optimizar su código. Si no sabes para qué se utilizan algunas de las etiquetas que menciono en el post te recomiendo que visites esta página. ¡Vamos allá!
1. Define el viewport
Es esencial para las páginas web modernas asegurarse de que se vean bien en todos los dispositivos. Definir el viewport en la sección <head> de tu HTML garantiza que tu sitio sea visualmente accesible en dispositivos móviles.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Utiliza etiquetas semánticas
Las etiquetas semánticas como <header>, <footer>, <article> , <section> , etc. No solo ayudan a estructurar tu contenido de manera clara, sino que también mejoran la accesibilidad y el SEO.
<article>
<h1>Introducción a HTML</h1>
<p>HTML es el lenguaje de marcado utilizado para crear páginas web.</p>
</article>
3. Aprovecha el elemento <main>
El elemento <main> indica el contenido principal de tu página y debería usarse solo una vez por documento, facilitando la accesibilidad.
<main>
<h1>Bienvenido a mi Blog</h1>
<p>Este es el principal contenido de la página.</p>
</main>
4. No olvides la etiqueta <meta charset="utf-8">
Esta etiqueta asegura que tu página web pueda mostrar caracteres de múltiples idiomas sin problemas.
<head>
<meta charset="utf-8">
</head>
5. Usa el atributo alt en las imágenes
Describir tus imágenes con el atributo alt mejora la accesibilidad y ayuda en el SEO.
<img src="paisaje.jpg" alt="Hermoso paisaje de montañas al amanecer" width="100" height"50">
6. Utiliza rel en enlaces externos para seguridad y SEO
Cuando enlazas a sitios externos, es una buena práctica utilizar el atributo rel con valores como noopener y noreferrer para mejorar la seguridad y el SEO.
<a href="<https://www.ejemplo-externo.com>" rel="noopener noreferrer" target="_blank">Visita este sitio externo</a>
Los formularios son esenciales para la interacción del usuario. Asegúrate de asociar cada etiqueta <input> con un <label> correspondiente.
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
8. Utiliza <time> para Fechas y Horas
La etiqueta <time> es útil para marcar fechas y horas, lo que ayuda a los buscadores y otros servicios a entender esos datos específicamente.
<p>La conferencia comienza el <time datetime="2024-10-05">5 de octubre de 2024</time>.</p>
9. Optimiza la carga de tus scripts
Colocar los <script> al final del cuerpo de tu HTML o usar el atributo async puede mejorar el tiempo de carga de la página.
<script src="app.js" async></script>
10. Agrega Descripciones de Accesibilidad con ARIA
Mejora la accesibilidad de tu sitio web utilizando atributos ARIA para describir roles, estados y propiedades de los elementos a las tecnologías de asistencia.
<button aria-label="Cerrar ventana">X</button>
11. Utiliza las listas ordenadas y desordenadas correctamente
Las listas son herramientas poderosas para organizar el contenido y hacerlo más legible.
<ul>
<li>Elemento uno</li>
<li>Elemento dos</li>
</ul>
Estos consejos están diseñados para ayudarte a escribir HTML más claro, accesible y funcional. Espero que los encuentres útiles en tu aprendizaje y práctica del desarrollo web.
Ejercicios
Si quieres practicar aquí te dejo un reto.
Utiliza el editor de código con el que te sientas más cómodo e intenta aplicar los consejos anteriores para generar un HTML que tenga lo siguiente:
- Buena estructura de HTML, intenta que la estructura tenga semántica. En algunos editores online puede que recibas un mensaje como al que aparece a continuación porque estos editores insertan tu HTML directamente en el elemento
body, pero no te preocupes por eso.
Utiliza el elemento main
Agrega enlaces a páginas externas, por ejemplo: Twitter
Agrega una marca de tiempo con el elemento time
Agrega al menos una lista del tipo que quieras
Utiliza el tag section para dividir las diferentes secciones y agrega un título a cada sección, por ejemplo: Crea una sección para los enlaces, otro para la lista...
Resultado de Ejemplo
¡Sigue practicando y nunca dejes de aprender!
