Trop de sémantique = prise de tete en css ?

Question

~~supprimé~~

3 Oct 2020 à 00:01

Bonsoir,

que pensez-vous de ce code HTML ? (projet dev challenge. Apercu ici).


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5"/>
    <link rel="icon" href="devchallenges.png" />
    <link rel="shortcut icon" type="image/x-icon" href="https://devchallenges.io/"/>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/style.css">
    <title>Devchallenges</title>
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> 
  </head>
  <body>
    <div class="container">
      <header id="header">
        <h1>404 not found</h1>
      </header>
      <main>
        <img src="../img/Scarecrow.png" alt="">
        <section>
          <header>
            <h2>I have bad news for you</h2>
          </header>
          <p>The page you are looking for might be removed or is temporarily unavailable</p>
          <footer>
            <div class="btn">
              <a href="#">back to homepage</a>
            </div>        
          </footer>
        </section>
      </main>
      <footer id="footer">
        <address>Djd @ Devchallenges.io</address>
      </footer>
    </div>
  </body>
</html>

Autant la version Mobile j'ai réussi (à peu près) à faire quelque chose de correct (lien vers le code pen) avec du flexbox column mais alors la version desktop est une prise de tete totale. Je commence meme à me demander si c'est réellement réalisable.

parsimonhi

Modérateur

3 Oct 2020 à 02:34

Bonjour,

Pourquoi faire 2 versions (mobile et desktop) ?

Et pourquoi toutes ces balises ?

Le code ci-dessous me semble largement suffire :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css">
<title>404 not found</title>
</head>
<body>
<h1>404 not found</h1>
<img src="../img/Scarecrow.png" alt="Scarecrow">
<strong>I have bad news for you</strong>
<p>The page you are looking for might be removed or is temporarily unavailable</p>
<a href="#">Back to homepage</a>
<address>Djd @ Devchallenges.io</address>
</body>
</html>

Amicalement,

~~supprimé~~

3 Oct 2020 à 09:41

Bonjour,

2 version en css via les media queries pour que cela puisse ressembler à la maquette.

J'ai mis toutes ces balises parce que c'est ce qui est recommandé par le w3c.
Modifié par regfish (03 Oct 2020 - 09:41)

parsimonhi

Modérateur

3 Oct 2020 à 09:49

regfish a écrit :

2 version en css via les media queries pour que cela puisse ressembler à la maquette.

OK pour les medias queries. Je pensais que tu évoquais 2 codes html. Mea culpa.

regfish a écrit :
J'ai mis toutes ces balises parce que c'est ce qui est recommandé par le w3c.

Mouais ! Deux headers deux footers, des sections et un titre h2 qui dit "I have bad news for you" (qui n'est clairement pas un titre) le tout encapsulé dans un div, dans une page qui fait à peine 30 mots, ça m'étonnerait que le w3c recommande ça. Smiley biggrin

Sinon, en ce qui concerne le design pour fenêtre large, je te conseille de suivre la piste de la grid css. Je peux te donner un exemple si tu veux. Mais ce serait mieux que tu cherches un peu d'abord (et vraiment, simplifie ton html aussi).

Amicalement,

~~supprimé~~

3 Oct 2020 à 14:01

parsimonhi a écrit :

Mouais ! Deux headers deux footers, des sections et un titre h2 qui dit "I have bad news for you" (qui n'est clairement pas un titre) le tout encapsulé dans un div, dans une page qui fait à peine 30 mots, ça m'étonnerait que le w3c recommande ça.
Amicalement,

Je suis assez d'accord que cela fait beaucoup de balises pour si peu de contenu. En fait j'ai décidé de les mettre quand j'ai fait mes recherches à ce sujet et que je suis tombé sur ça :

https://stackoverflow.com/questions/51020553/header-footer-tag-inside-section-tag

Finalement j'ai réussi à faire ce challenge à partir d'un HTML très similaire + flexbox, mais c'est vrai que toutes ces balises ont tendance à créer une certaine confusion chez moi. J'ai toujours peur d'en faire trop ou pas assez.

C'est surement un vrai faux problème que je rencontre puisqu'il ne semble pas avoir beaucoup de personnes se souciant d'une sémantique irréprochable (de toute facon quasi impossible avec les framework "à la mode" qui bombardent le HTML le rendant presque illisible).

Pour le grid c'est justement ce que j'apprends à faire en ce moment Smiley smile

. J'avais tenté rapidement de le faire via un grid-template-area et c'était une catastrophe Smiley lol

;
Modifié par regfish (03 Oct 2020 - 14:02)

parsimonhi

Modérateur

3 Oct 2020 à 18:27

Bonjour,

Pour la sémantique, il faut que ça serve. On ne rajoute pas des balises comme ça pour rien. Selon moi, on ne doit mettre que le nécessaire.

1) le conteneur global <div> est parfaitement inutile.
2) dans un <h2> on met un titre "secondaire". Ici, il n'y a pas de titre secondaire.
3) on ne met pas juste une section, ça ne sert à rien. Ici, rien ne la justifie.
4) les headers (et les footers), c'est plutôt (certes pas toujours) à utiliser pour les parties d'un site qui sont plus ou moins les mêmes de page en page. Ici, il n'y a pas de header (ni en ce qui concerne le contenu, ni en ce qui concerne la charte graphique). Il y a éventuellement un footer qui contiendrait juste la balise <address>. Les headers et les footers à l'intérieur du main (ou à l'intérieur d'une section), c'est plutôt à réserver pour les contenus vraiment "riches" (personnellement, même dans ce cas, j'évite). Ici, rien ne le justifie.
5) <main>, c'est pour le contenu spécifique à la page. Ici, on peut en mettre un qui engloberait tout sauf le <footer> qui contient <address>.

Amicalement,

PS: un exemple de grid pour le challenge (avec le html que j'ai proposé) :

body
{
	box-sizing:border-box;
	color:#333;
	font-family:monospace;
	display:grid;
	gap:1rem;
	margin:0;
	padding:1rem 2rem;
	width:100vw;
	min-width:15rem;
	height:100vh;
	grid-template-columns:1fr 1fr;
	grid-template-rows:1fr 1fr 1fr 3rem 1fr;
}
h1
{
	grid-column:1 / 3;
	grid-row:1;
	text-transform:uppercase;
	margin:0;
}
img
{
	grid-column:1;
	grid-row:2 / 5;
	min-height:100%;
	margin:0 auto;
}
strong
{
	grid-column:2;
	grid-row:2;
	font-size:3rem;
	max-width:30rem;
}
p
{
	grid-column:2;
	grid-row:3;
	font-size:1.5em;
	max-width:20rem;
}
a
{
	grid-column:2;
	grid-row:4;
	color:#fff;
	background:#333;
	text-decoration:none;
	text-transform:uppercase;
	max-width:10rem;
	height:3rem;
	line-height:3rem;
	text-align:center;
}
address
{
	grid-column:1 / 3;
	grid-row:5;
	margin:1rem auto;
	align-self:end;
}
@media (max-width:50rem)
{
	body
	{
		display:flex;
		flex-direction:column;
		justify-content:space-between;
	}
	img
	{
		max-width:80%;
		min-width:60vw;
		min-height:auto;
		flex:0;
	}
}

Amicalement,

~~supprimé~~

5 Oct 2020 à 20:18

Bonjour,

Merci pour ce retour j'en tiendrais compte la prochaine fois que je ferais un challenge.

Pour le css que je vais essayer de suite merci Smiley smile

Yordi

Modérateur

6 Oct 2020 à 08:22

Intéressant pour la balise <address>, je m'étais toujours arreté à une adresse postale et pas à un contact comme expliqué dans la doc.

Dans la CSS de ton codepen, tu peux vraiment simplifier. Par exemple, si tu appliques un margin-left de 24px à tout tes éléments, appliques le simplement à ton container parent une seule fois.

Aussi, fais attention, tu vas chercher 4 fonts différentes pour ta page de 3 lignes Smiley smile

Yordi

Modérateur

6 Oct 2020 à 15:25

Et pour le coup, j'utilise toujours une balise <strong> dans un <p> / <h…> / <blockquote> ou autre mais jamais seule… Un avis la dessus ?

parsimonhi

Modérateur

6 Oct 2020 à 16:16

Bonjour,

Yordi a écrit :
Et pour le coup, j'utilise toujours une balise <strong> dans un <p> / <h…> / <blockquote> ou autre mais jamais seule… Un avis la dessus ?

Ça gaspille des octets et du temps machine, ça augmente l'usure des touches du clavier, ça augmente la taille nécessaire en stockage, ça accélère le réchauffement climatique, etc. On voit bien que tu n'as pas connu l'époque où on codait en faisant des trous dans du carton ! Smiley cligne

Plus sérieusement, cette question peut se poser pour tous les éléments de type "inline" (ou plutôt en termes modernes "éléments de contenu phrasé" même si ces deux notions ne coïncident pas tout à fait).

D'un point de vue purement technique, <strong> est un enfant autorisé de <body>. Mais d'un autre côté, dès qu'on a une page contenant quelques éléments structurants comme <header>, <main>, <footer>, mettre un <strong> directement enfant de <body>, ça fait désordre.

Ma position est qu'un élément de ce type n'est en fait jamais "seul" puisqu'il est enfant de <body>. Pourquoi faudrait-il absolument qu'il y ait un contenant intermédiaire, surtout s'il n'y a presque rien dans la page ? Par contre s'il y a un contenu significatif dans la page, c'est sans doute une faute de laisser un <strong> directement enfant de <body>. On a surement raté quelque chose dans un tel cas.

Amicalement,

Yordi

Modérateur

12 Oct 2020 à 12:22

parsimonhi a écrit :
…
Ma position est qu'un élément de ce type n'est en fait jamais "seul" puisqu'il est enfant de <body>. Pourquoi faudrait-il absolument qu'il y ait un contenant intermédiaire, surtout s'il n'y a presque rien dans la page ? Par contre s'il y a un contenu significatif dans la page, c'est sans doute une faute de laisser un <strong> directement enfant de <body>. On a surement raté quelque chose dans un tel cas.

Je vois ce que tu veux dire mais je ne sais pas si je l'utiliserais comme ça quand même… J'ai toujours pu raccrocher cet highlighting dans un contexte. Je veux dire par là :
- une simple mise en valeur dans un texte (l'exemple simple)
- une partielle mise en valeur dans un titre
- ou encore une mise en valeur complète de mon élément (titre, paragraphe, ou autre)

Et du coup mon point de vue est plutôt de garder un contexte dans lequel l'appliquer (partiellement ou entièrement). En plus de ça, je peux profiter de la cascade qui fait que mes styles hériteront directement de la même chose que les autres. A moi par la suite de voir comment je veux styliser cet highlighting dans ce contexte.

Je ne dis pas que c'est la bonne manière de faire, je ne sais pas si il y en a une mieux que l'autre, je partage juste ma manière Smiley smile

Est-ce que d'autres ont aussi un avis ?

parsimonhi

Modérateur

12 Oct 2020 à 13:43

Bonjour,

Yordi a écrit :
… J'ai toujours pu raccrocher cet highlighting dans un contexte. Je veux dire par là :
- une simple mise en valeur dans un texte (l'exemple simple)
- une partielle mise en valeur dans un titre
- ou encore une mise en valeur complète de mon élément (titre, paragraphe, ou autre)

Je suis d'accord avec toi en fait. Je crois que c'est la première en répondant au post initial de ce sujet, que je mettais une balise <strong> directement enfant de <body>. Smiley cligne

Amicalement,

Sujet clos

Web Mobile et responsive web design

Trop de sémantique = prise de tete en css ?