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

Invité · 03/10/2018, 11h59

Bonjour,

c'est vrai qu'il est un peu difficile d’appréhender les balises <article>, section>, <aside>.

Le code que tu montres (le contenu des balises) ne permet pas de savoir précisément QUELLE est leur fonction, ni importance que TU veux leur donner.

<section> permet de regrouper des informations/données de même type : des articles sur tel catégorie,...
<article> se suffit à lui-même pour décrire un sujet en particulier
<aside> est à utiliser pour des données "annexes" : qui peuvent être enlevées sans changer trop le sens de la page (des pub, des liens vers d'autres pages internes autres que le menu principal,...).

Une <section> contiendra plusieurs <article>. Mais généralement pas d'autres <section>.
Un <article> ne contiendra pas de <section> ni autre <article>, mais peut contenir un <aside> (pour mettre des icones de réseaux sociaux par exemple).
Si la page contient plusieurs colonnes, ET que ces colonnes sont d'égale importance (dans ton cas, tu mets des "actualités"), alors on ne l'appellera pas forcément <aside>, mais <section>
Par contre, si par "actualités" tu entends "résumé + lien vers l'article complet", là ça peut être un <aside>, voire un <nav>*

* J'ajoute qu'en plus de la balises <nav> qui décrit le menu principal, on peut avoir d'autres balises <nav> pour tout autre type de "navigation" : menus secondaires (liens vers d'autres pages du site ou des ancres dans la page),...

Quant à <main>, comme Highlander**, il ne peut y en avoir qu'UN SEUL.

DONC : dans ton dernier code (outre le fait que tu as 2 balises <body> et </body> !), il faut que tu revois l'imbrication des balises en fonction de leur SENS (sémantique), et de leur importance dans la page.

**Highlander, 1986... Ça fout un sacré coup de vieux !...

**EricRG** · 03/10/2018, 18h22

Oups, pour les balises <body> : c'est une erreur en faisant le copier coller du code plusieurs fois de suite !!!

La page correspondante dont je souhaite changer la sémantique est la page d'accueil de mon site (je changerai aussi les autres après).

Mon site : http://ericrogergarcia.legtux.org

Je vais tenir compte de ce que tu me dis et remodifier le code

merci

**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

Discussions similaires

Partager

Partager