Différencier le nom du site du titre de la page

**EricRG** · 02/10/2018, 14h16

Bonjour,

Je prévoie l'organisation suivante dans mes pages (ci-dessous exemple de la page d'accueil).

Je me demande si c'est correct et en particulier si les moteurs de recherches vont bien faire la différence entre le titre du site et celui des pages !!! Est-ce que c'est bon avec l'emploi de <main> ?
Sinon, faut-il que j'utilise des <section> à la place des <article> ( j'ai du mal à comprendre la différence entre les balises article et section).
Pour la partie Actualités (news si vous préférez) faut-il utiliser <section> ou <aside> ?

merci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<body>
   <header>
      <h1>nom du site</h1>
      <nav>
          [menu du site]
      </nav>
   </header>
 
   <main>
       <h2>Titre de la page</h2>
 
      <section>   <!-- choix principaux -->
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix1</a></header>
         </article>
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix2</a></header>
         </article>
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix3</a></header>
         </article>
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix4</a></header>
         </article>
      </section>
 
      <section>
         <header><h3>Actualités</h3></header>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
        ....
   </section>
 
</main>
 
<footer>
   Ici le pied de page général de la page
</footer>
 
</body>

Invité · 02/10/2018, 14h56

Bonjour,

La structure HTML minimale d'une page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

**EricRG** · 02/10/2018, 17h45

Je suis au courant

mais les questions que je me pose concernent ce qui est à l’intérieur de la balise <body>
Code complet de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Accueil</title>
</head>
<body>
<body>
   <header>
      <h1>nom du site</h1>
      <nav>
          [menu du site]
      </nav>
   </header>
 
   <main>
       <h2>Titre de la page</h2>
 
      <section>   <!-- choix principaux -->
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix1</a></header>
         </article>
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix2</a></header>
         </article>
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix3</a></header>
         </article>
         <article>
            <a ...><img ....></a><br>
             <header> <a ...>choix4</a></header>
         </article>
      </section>
 
      <section>
         <header><h3>Actualités</h3></header>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
        ....
   </section>
 
</main>
 
<footer>
   Ici le pied de page général de la page
</footer>
 
</body>
</body>
</html>

Invité · 02/10/2018, 18h17

Si je mets des liens, ce n'est pas pour rien.

**EricRG** · 03/10/2018, 09h19

Merci, je vais aller regarder ça avec attention !

**EricRG** · 03/10/2018, 09h44

Grâce aux liens indiqués (merci merci

)
je réponds à ma question.

J'ai changé le code en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Accueil</title>
</head>
<body>
<body>
   <header>
      <h1>nom du site</h1>
      <nav>
          [menu du site]
      </nav>
   </header>
 
   <main>
       <h2>Titre de la page</h2>
 
      <section>   <!-- choix principaux -->
         <section>
            <a ...><img ....></a><br>
             <header> <a ...>choix1</a></header>
         </section>
         <section>
            <a ...><img ....></a><br>
             <header> <a ...>choix2</a></header>
         </section>
         <section>
            <a ...><img ....></a><br>
             <header> <a ...>choix3</a></header>
         </section>
         <section>
            <a ...><img ....></a><br>
             <header> <a ...>choix4</a></header>
         </section>
      </section>
   </main>
 
      <aside>
         <header><h3>Actualités</h3></header>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
         <article>
            <header><h4>Titre élément</h4></header>
           <p>Ici le texte</p>
         </article>
        ....
   </aside>
 
 
 
<footer>
   Ici le pied de page général de la page
</footer>
 
</body>
</body>
</html>

Etant donné que <article> est pout les informations indépendantes, je la garde dans la parties Actualités mais je la remplace par <section> dans les liens principaux du site.
Je mets <aside> pour entourer la partie Actualités et je déplace </main> puisque ce n'est pas le principal pour la page d'Accueil.

.... et ça devrait être ok si j'ai bien compris

P.S. <section> pourrait être employé à la place de <main> mais ça me parait encore plus clair avec.

... Je ne clos pas le fil pour pouvoir avoir des remarques éventuellement

**NoSmoking** · 04/10/2018, 09h44

Bonjour,

Envoyé par EricRG

Sinon, faut-il que j'utilise des <section> à la place des <article> ( j'ai du mal à comprendre la différence entre les balises article et section).

Si cela peut te rassurer c'est souvent au feeling que cela va se jouer suivant ton contexte.

Envoyé par jreaux62

Une <section> contiendra plusieurs <article>. Mais généralement pas d'autres <section>.

heureusement que tu as stipulé « généralement » car quid du code (incomplet) suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Sport</title>
</head>
<body>
    <section>
        <h2>Sport mécanique</h2>
        <section>
            <h2>Moto</h2>
            <article>
                <h3>titre</h3>
                <p></p>
            </article>
            <article>
                <h3>titre</h3>
                <p></p>
            </article>
        </section>
        <section>
            <h2>Auto</h2>
            <article>
                <h3>titre</h3>
                <p></p>
            </article>
            <article>
                <h3>titre</h3>
                <p></p>
            </article>
        </section>
    </section>
</body>
</html>

Envoyé par jreaux62

Un <article> ne contiendra pas de <section> ni autre <article>,

il suffit de regarder le 2^éme exemple fournit sur HTML: The Living Standard pour se convaincre que cela n'est pas forcément gagné.

Invité · 04/10/2018, 10h32

@NoSmoking
Tu as raison, mais je doute que ça clarifie la réponse !

Pour (essayer d')être plus précis, et pour faire SIMPLE (?) :

un <article> parle d'un "sujet" précis.
une <section> englobe plusieurs <article>, d'une "même catégorie de sujets".
il peut y avoir plusieurs "catégories".
Auquel cas, une <section> peut englober plusieurs "catégories" donc plusieurs <section>. *

* C'est exactement l'exemple que NoSmoking donne !
Une section "Sport mécanique", contenant :

une section (catégorie) "Moto"
une section (catégorie) "Auto"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<main>
  <section>
    <h2>Titre de la section, regroupant plusieurs catégories d'articles</h2>
 
    <section>
      <h3>Titre de la catégorie 1</h3>
 
       <article>article 1-1</article>
       <article>article 1-2</article>
       <article>article 1-3</article>
 
    </section>
    <section>
      <h3>Titre de la catégorie 2</h3>
 
       <article>article 2-1</article>
       <article>article 2-2</article>
       <article>article 2-3</article>
 
    </section>
 
  </section>
<main>

C'est vrai qu'un "article long" pourra être subdivisé en plusieurs "sections" (ou chapitres), tout en traitant du même "sujet"...
Mais là, ça commence à devenir "prise de tête"...

@NoSmoking (toujours)
Dans le lien que tu montres, on trouve aussi la balise <hgroup> dans certains exemples (comme ici).
Or, cette balise a été retirée de la spécification HTML5 (W3C) !

De quoi encore nous embrouiller l'esprit...

**NoSmoking** · 04/10/2018, 17h18

@NoSmoking (toujours)
Dans le lien que tu montres, on trouve aussi la balise <hgroup> dans certains exemples (comme ici).
Or, cette balise a été retirée de la spécification HTML5 (W3C) !

c'est vrai qu'il sont deux et qu'il ne sont pas forcément synchro.

Concernant WHATWG ils ont effectivement décidé de laisser cette balise attendu que les navigateurs l'ont implémenté et que pas mal de sites l'ont utilisé, enfin je présumes! Ils auraient effectivement pu mettre un nota ce qui aurait été appréciable et apprécié.

Peut être que dans un version majeure de HTMLx cette balise sera déclarée comme « Obsolete » mais à l'instar, dans l'autre sens , de la balise <marquee> elle devrait avoir la vie longue.

De quoi encore nous embrouiller l'esprit...

Pas sûr qu'il y ait besoin de cela

Invité · 04/10/2018, 17h34

@EricRG

Je viens (seulement ) de cliquer sur le lien de ton site :
bravo, il est clair et aéré, c'est agréable.
J'aime bien aussi les icônes.

Et les jeux vidéos (en JAVA) semblent bien sympathiques !

N.B. Je viens de terminer la programmation d'un petit jeu (tout en JavaScript/CSS), avec un autre intervenant du forum ! (version démo).
On s'amuse bien sur DVP, et on y fait de belles rencontres !

Différencier le nom du site du titre de la page

HTML

Vue hybride

Discussions similaires

Partager

Partager