Lección 12: HTML buenas prácticas

Introducción a las buenas prácticas en HTML

Las buenas prácticas en HTML son un conjunto de recomendaciones que ayudan a crear código más limpio, mantenible y accesible. Seguir estas prácticas mejora la calidad de tu sitio web y facilita su desarrollo y mantenimiento a largo plazo.

1. Usar DOCTYPE y codificación correctos

Siempre incluye la declaración DOCTYPE y especifica la codificación de caracteres:

HTML


                    <!DOCTYPE html>

                    <html lang="es">

                    <head>

                      <meta charset="UTF-8">

                      ...

                    </head>

2. Utilizar elementos semánticos

Usa elementos HTML5 semánticos para estructurar tu contenido de manera significativa:

HTML


                    <header>...</header>

                    <nav>...</nav>

                    <main>

                      <article>...</article>

                      <aside>...</aside>

                    </main>

                    <footer>...</footer>

3. Escribir nombres de elementos y atributos en minúsculas

Aunque HTML no distingue entre mayúsculas y minúsculas, es una buena práctica usar minúsculas consistentemente:

HTML


                    <a href="https://www.ejemplo.com">Enlace</a>

4. Cerrar todas las etiquetas

Aunque HTML5 permite omitir algunas etiquetas de cierre, es una buena práctica cerrar todas las etiquetas no vacías para mayor claridad y consistencia:

HTML


                    <p>Este es un párrafo.</p>

                    <li>Elemento de lista</li>

                    <td>Celda de tabla</td>

Para elementos vacíos como <img>, <br>, <hr>, etc., no es necesario ni recomendado añadir una barra de cierre:

HTML


                    <img src="imagen.jpg" alt="Descripción de la imagen">

                    <br>

                    <hr>

5. Usar comillas para los valores de los atributos

Siempre usa comillas para los valores de los atributos, incluso cuando no sea estrictamente necesario:

HTML


                    <input type="text" name="username" required="required">

6. Evitar el uso excesivo de divs

Usa elementos semánticos en lugar de divs cuando sea posible:

HTML


                    <section>

                      <h2>Título de la sección</h2>

                      <p>Contenido de la sección...</p>

                    </section>

7. Usar atributos alt en imágenes

Siempre proporciona un texto alternativo para las imágenes:

HTML


                    <img src="logo.png" alt="Logo de la empresa">

8. Mantener una estructura clara

Usa indentación y estructura tu código de manera lógica para mejorar la legibilidad:

HTML


                    <article>

                      <h1>Título del artículo</h1>

                      <p>Primer párrafo...</p>

                      <p>Segundo párrafo...</p>

                    </article>

Ejercicio práctico

Revisa y corrige el siguiente código HTML para que siga las buenas prácticas que hemos aprendido:

HTML


                    <HTML>

                    <HEAD>

                    <TITLE>Mi Página</TITLE>

                    </HEAD>

                    <BODY>

                    <DIV class=header>

                    <H1>Bienvenido a mi sitio</H1>

                    </DIV>

                    <DIV class=content>

                    <IMG src=imagen.jpg>

                    <P>Este es un párrafo de ejemplo.</P>

                    </DIV>

                    <DIV class=footer>

                    <P>Copyright 2024</P>

                    </DIV>

                    </BODY>

                    </HTML>

Lección anterior Volver al inicio