web-dev-qa-db-fra.com

Un bon squelette HTML

Je veux recommencer à créer des sites Web, mais je suis hors de la scène HTML depuis un certain temps maintenant. Je me demandais simplement si c'était un bon squelette pour un site Web. Et sinon, que dois-je changer, ajouter et/ou supprimer?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
    <head>
        <rel="stylesheet" type="text/css" href="css/main.css" />
        <meta http-equiv="content-type" content="text/php; charset=utf-8" />

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
        </div>

    </body>

    <footer>
        <div class="Footer">
            <b>Copyright - 2010</b>
        </div>
    </footer>
</html>
htmlboilerplateskeleton-code
42
Nick

Essayez www.htmlshell.com , vous pouvez y obtenir un squelette de base, avec des inclusions optionnelles pour des choses comme jQuery ou favicons, etc.

44
Steve Niles

J'ai commencé avec HTML5 Boilerplate .. . il permet de s'assurer que tout est le plus cohérent entre les différents navigateurs et prend déjà en compte la majorité des éléments dont j'ai besoin plus tard.

16
FatherStorm

tl; dr

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="stylesheet" href="/default.css">
  <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
  <link rel="canonical" href="http://example.com/">
  <meta name="description" content="…">
</head>
<body>

  <header>
    <!-- site-wide header -->
    <h1>Example <!-- site name --></h1>
  </header>

  <main>
    <!-- this page’s main content -->
  </main>

  <nav>
    <!-- site-wide navigation -->
  </nav>

  <footer>
    <!-- site-wide footer -->
  </footer>

</body>
</html>

Un squelette HTML5 pourrait ressembler à ceci:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CC</title>
</head>
<body>

</body>
</html>

(Notez que ce n'est pas le document HTML5 le plus minimal , donc de nombreuses parties sont facultatives.)

Si vous utilisez un codage différent de UTF-8, modifiez la valeur de meta-charset en conséquence.

Si vous utilisez une langue de contenu différente de l'anglais, modifiez en conséquence la valeur de l'attribut lang .

Si vous souhaitez spécifier explicitement la directionnalité du texte, utilisez l'attribut dir sur l'élément html, par exemple: <html dir="ltr" lang="en">

link/meta éléments communs à ajouter aux head

  • Lien vers une feuille de style (text/css est supposé par défaut):

    <link rel="stylesheet" href="/default.css">

  • Lien vers un favicon :

    <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">

  • Spécification de RL canonique du document:

    <link rel="canonical" href="http://example.com/">

  • Fournir une description du contenu de la page:

    <meta name="description" content="…">

Éléments pour body

Comme chaque page est différente, cela ne peut pas être répondu de manière générale, il est donc préférable de laisser le body vide.

Cependant, la plupart des pages font probablement partie d'un site Web et la plupart des sites Web ont probablement un en-tête à l'échelle du site (→ header) avec le nom du site (→ h1), pied de page (→ footer) et menu de navigation (→ nav). Ceux-ci doivent appartenir à la racine de sectionnement body (c'est-à-dire qu'ils n'ont aucun autre élément de contenu de sectionnement comme parent). nav peut ou non faire partie de header.
Le contenu principal (→ main) peut ou non consister en un élément de sectionnement (généralement article ou section, ou plusieurs d'entre eux).

<header>
  <!-- site-wide header -->
  <h1>Example <!-- site name --></h1>
</header>

<main>
  <!-- this page’s main content -->
</main>

<nav>
  <!-- site-wide navigation -->
</nav>

<footer>
  <!-- site-wide footer -->
</footer>
5
unor

Il n'y a rien de tel qu'un <footer> élément dans XHTML 1.0 Transitional. Vous devez le faire comme ceci:

<body>
    ...
    <div class="footer">
        ...
    </div>
</body>

J'aime utiliser un doctype strict dans mes projets, mais le vôtre fonctionne aussi.

3
jwueller
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main/css.css">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
            <div class="Footer">
                Copyright - 2010
            </div>
        </div>
    </body>
</html>
1
2371

W3C DOM Level 1 Core est un bon point de départ:

<!DOCTYPE html>
<html>
<head>
  <title>My Document</title>
</head>
<body>
</body>
</html>

Le DOM du W3C niveau 1 vous permet de changer l'arborescence de contenu comme vous le souhaitez . Il est suffisamment puissant pour créer n'importe quel document HTML à partir de zéro.

De là, vous pouvez ajouter n'importe quelle option (<html lang="en">, <meta charset="utf-8">, etc.), élément (link, main, nav, div, footer, etc.) ou dépendance de bibliothèque (jQuery, Bootstrap, etc.), en fonction de vos besoins et préférences.

1
Elan