# 10 Consejos Esenciales de HTML para Principiantes

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](https://developer.mozilla.org/es/docs/Web/HTML/Element). ¡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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```xml
<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.

```html
<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.

```html
<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.

```html
<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.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Recuerda que puedes ayudarte de la <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/es/docs/Web/HTML/Element" style="pointer-events: none">documentación de MDN</a></div>
</div>

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.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714976426305/0aa63a2b-8cc9-4ce8-949a-2f6535ae9b35.png align="center")

* 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](https://codepen.io/gartnerleandro/pen/JjVgMBM?editors=1000)

¡Sigue practicando y nunca dejes de aprender!
