HTML5 – Structure de base

Modèle minimal

Voici un exemple de la structure minimale d’une page en HTML5


<!doctype html>
<html lang='fr'>
<head>
    <meta charset='utf-8'>
    <title>Modèle minimal</title>
    <script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/
jquery.min.js'></script>
    <script  type='text/javascript' src='script.js'></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>


x


<!doctype html>
<html lang='fr'>
<head>
    <meta charset='utf-8'>
    <title>Modèle minimal</title>
    <script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/
jquery.min.js'></script>
    <script  type='text/javascript' src='script.js'></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>

Publier par sm2017 dans HTML5 - Structure de base Commentaires fermés sur HTML5 – Modèle minimal

Document HTML5 de base

Voici un exemple de structure de base d’une page en HTML 5


<!doctype html>
<html lang='fr'>
<head>
    <meta charset='utf-8'>
    <title>Modèle</title>
    <script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/
jquery.min.js'></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/
jqueryui/1.8.10/jquery-ui.min.js'></script>
    <script  type='text/javascript' src='script.js'></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <!-- L'élément <header> contient des éléments introductifs (titre, logo, formulaire de recherche, etc) -->
        <h1>Bienvenu sur le site</h1>
        <h2>Structure de base d'une page HTML5</h2>
    </header>
        <aside>
        <!-- L'élément <aside> est une section dont le contenu est indirectement lié à ce qui l'entoure -->
        <!-- et qui pourrait être séparé de cet environnement. -->
        <!-- Ce peut être des colonnes annexes ou des encadrés qui contiennent un glossaire, des publicités, la biographie -->
        <!-- de l'auteur, etc -->
        <h3>Première balise aside</h3>
        <p>Contenu de la première balise</p>
    </aside>
    <aside>
        <h3>Deuxième balise aside</h3>
        <p>Contenu de la deuxième balise</p>
    </aside>
    <nav>
       <!-- L'élément <nav> (pour navigation) permet de naviguer dans un document avec des liens vers des pages -->
       <!-- ou des articles. -->
       <p>Nouveautés</p>
       <p>Qui sommes nous</p>
       <p>Nos produits</p>
       <p>Contact</p>
    </nav>
    <article>
        <!-- L'élément <article> représente du contenu autonome. Chaque  <article> doit être identifié avec un en-tête h1-h6) -->
        <h2>La structure d'une page HTML5</h2>
        <section>
            <!-- L'élément < section> représente un groupement thématique de contenu, généralement avec un en-tête. -->
            <h3>Le DOCTYPE</h3>
        </section>
        <section>
            <h3>HTML</h3>
        </section>
    </article>
    <footer>
       <!-- L'élément <footer> représente le pied de page de la section. -->
       <!-- Il contient habituellement des informations de copyright et/ou sur l'auteur de la section, -->
       <!-- ou les liens vers d'autres documents en relation. -->
       <p>Copyright 2015 | Michel Piallier | michelpiallier.info</p>
    </footer>
</body>
</html>

[print-me target="pre" alt="Cliquer pour imprimer"]


x


<!doctype html>
<html lang='fr'>
<head>
    <meta charset='utf-8'>
    <title>Modèle</title>
    <script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js'></script>
    <script  type='text/javascript' src='script.js'></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <!-- L'élément <header> contient des éléments introductifs (titre, logo, formulaire de recherche, etc) -->
        <h1>Bienvenu sur le site</h1>
        <h2>Structure de base d'une page HTML5</h2>
    </header>
        <aside>
        <!-- L'élément <aside> est une section dont le contenu est indirectement lié à ce qui l'entoure -->
        <!-- et qui pourrait être séparé de cet environnement. -->
        <!-- Ce peut être des colonnes annexes ou des encadrés qui contiennent un glossaire, des publicités, la biographie -->
        <!-- de l'auteur, etc -->
        <h3>Première balise aside</h3>
        <p>Contenu de la première balise</p>
    </aside>
    <aside>
        <h3>Deuxième balise aside</h3>
        <p>Contenu de la deuxième balise</p>
    </aside>
    <nav>
       <!-- L'élément <nav> (pour navigation) permet de naviguer dans un document avec des liens vers des pages -->
       <!-- ou des articles. -->
       <p>Nouveautés</p>
       <p>Qui sommes nous</p>
       <p>Nos produits</p>
       <p>Contact</p>
    </nav>
    <article>
        <!-- L'élément <article> représente du contenu autonome. Chaque  <article> doit être identifié avec un en-tête h1-h6) -->
        <h2>La structure d'une page HTML5</h2>
        <section>
            <!-- L'élément < section> représente un groupement thématique de contenu, généralement avec un en-tête. -->
            <h3>Le DOCTYPE</h3>
        </section>
        <section>
            <h3>HTML</h3>
        </section>
    </article>
    <footer>
       <!-- L'élément <footer> représente le pied de page de la section. -->
       <!-- Il contient habituellement des informations de copyright et/ou sur l'auteur de la section, -->
       <!-- ou les liens vers d'autres documents en relation. -->
       <p>Copyright 2015 | Michel Piallier | michelpiallier.info</p>
    </footer>
</body>
</html>


Publier par sm2017 dans HTML5 - Structure de base Commentaires fermés sur HTML5 – Document HTML5 de base