10 Consejos Esenciales de HTML para Principiantes

Leandro GartnerLeandro Gartner
4 min read

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>

7. Implementa formularios accesibles

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.

💡
Recuerda que puedes ayudarte de la documentación de MDN

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!

0
Subscribe to my newsletter

Read articles from Leandro Gartner directly inside your inbox. Subscribe to the newsletter, and don't miss out.

consejos htmlbuenas practicas htmlhtml para principiantesHTMLHTML tags aprender html

Written by

Leandro Gartner
Leandro Gartner