Différencier HTML (structure) de CSS (présentation)

Différencier HTML (structure) de CSS (présentation)

HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils servent des fonctions différentes. Comprendre la distinction entre les deux est essentiel pour une conception Web efficace.

1. HTML : La structure de la page

HTML est le langage de balisage utilisé pour définir la structure et le contenu d'une page Web. Il utilise des balises pour indiquer les différents éléments d'une page, tels que les titres, les paragraphes, les listes et les images. HTML donne au navigateur des instructions sur la manière de structurer le contenu pour qu'il soit affiché correctement.

Exemple de code HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page Web</title>
  </head>
  <body>
    <header>
      <h1>Mon Site Web</h1>
      <nav>
        <ul>
          <li>
            <a href="#">Accueil</a>
          </li>
          <li>
            <a href="#">À propos</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
    <section>
      <h2>À propos de moi</h2>
      <p>Bienvenue sur mon site Web !</p>
    </section>
    <footer>
      <p>&copy; 2024 Mon Site Web</p>
    </footer>
  </body>
</html>

Dans cet exemple, HTML est utilisé pour structurer la page en sections logiques comme l'en-tête (<header>), le contenu principal (<section>), et le pied de page (<footer>).

2. CSS : La présentation visuelle

CSS est un langage de style utilisé pour contrôler la présentation visuelle des éléments HTML. Il permet de définir des règles de style telles que les couleurs, les polices, les marges et les bordures pour rendre la page plus attrayante et conviviale. CSS sépare la présentation du contenu, ce qui permet de modifier facilement l'apparence d'un site sans changer sa structure.

Exemple de code CSS :

/* Styles pour l'en-tête */ 
header { 
  background-color: #333; 
  color: #fff; 
  padding: 20px; 
} 

/* Styles pour les liens de navigation */ 
  nav ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
} 

nav ul li { 
  display: inline; 
  margin-right: 10px; 
}

nav ul li a { 
  color: #fff; 
  text-decoration: none; 
} 

/* Styles pour le contenu principal */ 
section { 
  padding: 20px; 
} 

/* Styles pour le pied de page */ 
footer { 
  background-color: #333; 
  color: #fff; 
  padding: 10px 20px; 
  text-align: center; 
}

Dans cet exemple, CSS est utilisé pour styliser les différents éléments HTML, comme l'en-tête (header), les liens de navigation (nav ul li a), le contenu principal (section), et le pied de page (footer).

En résumé, HTML définit la structure et le contenu d'une page Web, tandis que CSS contrôle la présentation visuelle de cette structure. En combinant les deux, les concepteurs peuvent créer des sites Web esthétiquement agréables et faciles à naviguer.