El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem les millors pràctiques per escriure codi HTML net, eficient i mantenible. Seguir aquestes pràctiques no només millorarà la qualitat del teu codi, sinó que també facilitarà la col·laboració amb altres desenvolupadors i la futura mantenibilitat del teu projecte.

Utilitza una estructura clara i coherent

1.1. Indentació i espais

Indentació consistent: Utilitza una indentació consistent (normalment 2 o 4 espais) per a cada nivell de profunditat en el teu codi HTML.
Espais: Utilitza espais per separar atributs dins d'una etiqueta per millorar la llegibilitat.

Exemple:

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple de Millors Pràctiques HTML</title>
  </head>
  <body>
    <header>
      <h1>Benvingut al meu lloc web</h1>
    </header>
    <main>
      <p>Aquest és un paràgraf d'exemple.</p>
    </main>
    <footer>
      <p>&copy; 2023 El meu lloc web</p>
    </footer>
  </body>
</html>

1.2. Comentaris

Comentaris: Utilitza comentaris per explicar seccions complexes del codi o per marcar seccions importants.

Exemple:

<!-- Inici de la secció principal -->
<main>
  <p>Aquest és un paràgraf d'exemple.</p>
</main>
<!-- Fi de la secció principal -->

Utilitza etiquetes semàntiques

Etiquetes semàntiques: Utilitza etiquetes HTML5 semàntiques com <header>, <nav>, <main>, <section>, <article>, <aside>, i <footer> per descriure clarament l'estructura del teu document.

Exemple:

<header>
  <h1>Benvingut al meu lloc web</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">Inici</a></li>
    <li><a href="#about">Sobre nosaltres</a></li>
    <li><a href="#contact">Contacte</a></li>
  </ul>
</nav>
<main>
  <section>
    <h2>Sobre nosaltres</h2>
    <p>Aquest és el contingut sobre nosaltres.</p>
  </section>
</main>
<footer>
  <p>&copy; 2023 El meu lloc web</p>
</footer>

Escriu codi HTML vàlid

Validació: Utilitza eines de validació HTML com el W3C Markup Validation Service per assegurar-te que el teu codi és vàlid i segueix els estàndards.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pàgina vàlida</title>
</head>
<body>
  <h1>Hola, món!</h1>
</body>
</html>

Utilitza atributs descriptius

Atributs alt per a imatges: Sempre proporciona atributs alt descriptius per a les imatges per millorar l'accessibilitat.
Atributs title: Utilitza atributs title quan sigui necessari per proporcionar informació addicional.

Exemple:

<img src="imatge.jpg" alt="Descripció de la imatge" title="Títol de la imatge">

Evita l'ús excessiu de divs i spans

Etiquetes adequades: Utilitza etiquetes HTML adequades en lloc de confiar massa en <div> i <span>. Això fa que el codi sigui més semàntic i fàcil de llegir.

Exemple:

<article>
  <header>
    <h2>Títol de l'article</h2>
  </header>
  <p>Contingut de l'article.</p>
</article>

Optimitza per a la velocitat de càrrega

Minimitza el codi: Redueix l'ús de codi innecessari i minimitza els fitxers HTML, CSS i JavaScript.
Carrega diferida: Utilitza la càrrega diferida (lazy loading) per a imatges i altres recursos multimèdia per millorar la velocitat de càrrega de la pàgina.

Exemple:

<img src="imatge.jpg" alt="Descripció de la imatge" loading="lazy">

Exercici pràctic

Exercici 1: Millora el codi HTML

Millora el següent codi HTML seguint les millors pràctiques que hem après:

<html>
<head>
<title>Pàgina d'exemple</title>
</head>
<body>
<div>
<h1>Benvingut</h1>
<p>Aquesta és una pàgina d'exemple.</p>
</div>
</body>
</html>

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pàgina d'exemple</title>
</head>
<body>
  <header>
    <h1>Benvingut</h1>
  </header>
  <main>
    <p>Aquesta és una pàgina d'exemple.</p>
  </main>
</body>
</html>

Resum

En aquesta secció, hem après diverses millors pràctiques per escriure codi HTML net, eficient i mantenible. Hem cobert la importància d'una estructura clara, l'ús d'etiquetes semàntiques, la validació del codi, l'ús d'atributs descriptius, l'optimització per a la velocitat de càrrega i l'evitació de l'ús excessiu de <div> i <span>. Seguint aquestes pràctiques, podràs crear pàgines web més accessibles, mantenibles i eficients.

Millors pràctiques d'HTML

Utilitza una estructura clara i coherent

1.1. Indentació i espais

1.2. Comentaris

Utilitza etiquetes semàntiques

Escriu codi HTML vàlid

Utilitza atributs descriptius

Evita l'ús excessiu de divs i spans

Optimitza per a la velocitat de càrrega

Exercici pràctic

Exercici 1: Millora el codi HTML

Solució:

Resum

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet