Est-ce bien nécessaire ?

Version imprimable

Bonjour à vous tous les développeurs,

Je suis nouveau dans ce forum et je suis actuellement une formation d'intégrateur web.
J'aurais besoin de vos lumières en codage HTML5 parce que le formateur n'a pas été claire sur un point précis.

Le formateur nous à appris les principales balises à utiliser lorsqu'on structure une page HTML. Par exemple, il nous à appris la structure suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mon premier cours de HTML5</title> </head> <body> <div id="entetePrincipal"> <header> <img src="chemin et nom de l'image à placer" alt="Texte alternatif" title="Titre de l'image au survol du pointeur"/> <ul> <a href="chemin du lien et non du fichier"><li>1er élément de la liste</li></a> <a href="chemin du lien et non du fichier"><li>2nd élément de la liste</li></a> <a href="chemin du lien et non du fichier"><li>3ème élément de la liste</li></a> </ul> </header> </div> </body> </html>
La question que je me pose est la suivant : est-il nécessaire de créer une balise <div>, placée avant le <header>, dans laquelle on place la propriété id="entetePrincipal" ? Ne peut-on pas directement placer cette propriété dans la balise <header> ?

Je me pose cette question car je cherche à simplifier le code. Mais le formateur m'a dit qu'il est plus facile de manipuler la <div>, au moyen des attributs CSS dans la propriété id="entetePrincipal", alors que si on la place dans le <header> c'est plus compliqué. Mais la balise <header> est bien de type bloc ? On peut lui attribuer des attributs de dimensions, placement, couleur, etc. ?

Qu'en dites-vous ?

Cordialement

11/01/2017, 12h20
Bisûnûrs

Citation:

Envoyé par Obi Juan Kenobi

La question que je me pose est la suivant : est-il nécessaire de créer une balise <div>, placée avant le <header>, dans laquelle on place la propriété id="entetePrincipal" ?

Non.

Citation:

Envoyé par Obi Juan Kenobi

Ne peut-on pas directement placer cette propriété dans la balise <header> ?

Si.

Citation:

Envoyé par Obi Juan Kenobi

Mais le formateur m'a dit qu'il est plus facile de manipuler la <div>, au moyen des attributs CSS dans la propriété id="entetePrincipal", alors que si on la place dans le <header> c'est plus compliqué

Heu...

Citation:

Envoyé par Obi Juan Kenobi

Mais la balise <header> est bien de type bloc ? On peut lui attribuer des attributs de dimensions, placement, couleur, etc. ?

Dans mes souvenirs, ça dépend des navigateurs, il vaut quand même mieux le préciser dans le CSS que les header doivent être de type block.

Sinon, gros problème de syntaxe dans ton HTML, un <ul> ne peut avoir pour enfants que des <li>, alors que toi tu lui mets des <a> qui entourent les <li>.
11/01/2017, 13h58
Garvelienn

Citation:

Envoyé par Bisûnûrs

Sinon, gros problème de syntaxe dans ton HTML, un <ul> ne peut avoir pour enfants que des <li>, alors que toi tu lui mets des <a> qui entourent les <li>.

Est-ce un gros problème ? Par exemple, des fois, c'est utile pour que la zone cliquable du lien s'étende bien sur toute la balise. (pour éviter un ou deux pixels non-cliquables). Bien que généralement, on peut faire autrement. Et l'HTML c'est du "XML amélioré" donc en soit, cela reste cohérent, non ?
N'étant pas un pro du Web, c'est plus une question qu'une affirmation.
11/01/2017, 14h13
Bisûnûrs

Oui, c'est un gros problème. De syntaxe. Parce que le W3C définit une syntaxe HTML (notamment qui est enfant de qui et qui peut contenir quels enfants) et que les navigateurs se basent (ou essaient) sur ces spécifications (HTML et CSS) pour avoir un rendu (qu'on espère, nous, développeur web, sera identique sur tous).
Ne pas respecter la syntaxe HTML c'est prendre le risque d'avoir un rendu aléatoire en fonction de la manière dont tel ou tel navigateur va réinterpréter une mauvaise syntaxe.

Et pour que le lien s'étende à toute la balise, on peut simplement faire ça :

Code:

<li><a href="/lien">Texte du lien</a></li>

Et faire en sorte en CSS que le lien prenne toute la largeur et hauteur de son parent.
11/01/2017, 14h18
Obi Juan Kenobi

Merci pour toutes vos réponses.
Donc j'avais bien raison, ce n'est pas nécessaire !
Et pour les <a> qui entourent les <li>, je me suis trompé, c'est bien dans les <li> qu'il faut les placer.
Je reviendrai vers vous si d'autres soucis me chiffonnent.

That's all folk's!
11/01/2017, 15h24
Garvelienn

Merci pour l'éclaircissement Bisûnûrs :zoubi: