Information balises HTML 5

Bonjour a tous,

Je suis entrain de me mettre à l'HTML5 et il y a des balises comme <figure>, <section> ou <article> et je me posais la question, est il possible de leur appliquer des class ou des id ? J'imagine que oui logiquement car quand on a plusieurs page et pour attribuer des styles différent nous sommes bien obliger de passer par la, donc j'aimerais savoir si ma déduction est bonne ou pas du tous car je n'ai vue nulle part dans les exemples que j'ai pu lire, ses balises avec des attributs

Je vous remercie pour vos informations d'avance
Modifié par Vipear (01 Jun 2012 - 16:44)

Hello,

Pas de souci pour appliquer à ces éléments les attributs génériques tels que class, id, ou encore style.

La seule limite avec ces éléments, qui concerne essentiellement IE7 et IE8, c'est que ces navigateurs ne permettent pas d'appliquer des styles CSS à ces éléments, à moins qu'ils n'aient été au préalable «déclarés» en JavaScript. Il y a donc un petit script JS simple qui s'occupe de régler ce problème. (Certains estiment que cette dépendance à JavaScript pour IE8 est un problème, et qu'il vaut mieux éviter d'utiliser les nouveaux éléments HTML5 tels que <section> tant qu'IE 7-8 reste largement utilisé. À chacun de voir.)

Vipear a écrit :
Car j'ai surtout des doutes sur mon figure/figcaption et mon nav qui intègre le logo

Pour FIGURE: l'image présentée est purement décorative, et à ce titre l'utilisation de FIGURE n'est pas indiquée. Un simple <img alt=""> suffira, ou bien une image de fond en CSS. Quant à la citation, elle n'est de toute façon pas indiquée dans un FIGCAPTION (elle n'a pas de rapport avec l'image), et ça peut être pas mal d'utiliser l'élément BLOCKQUOTE ou Q.

Pour le logo, il n'a effectivement pas sa place dans un élément NAV. À la rigueur dans un HEADER. Tu peux aussi l'englober dans un H1, ce serait plutôt pertinent. Et bien sûr, le texte alternatif de l'image doit reprendre le texte inscrit dans l'image (et pas "Logo", quelle idée...).
En passant, les titres dans ton contenu principal devraient être des H2 plutôt que des H3.

Pour finir, et même si ça n'a pas de rapport avec HTML: est-ce que le texte en Arial 12px c'est fait exprès pour dissuader les visiteurs de lire quoi que ce soit?
Un article à lire sur le sujet (en anglais).

Donc en gros ma 1er solution qui était :

<div id="banner">
<p><span>"La vocation c'est avoir pour métier sa passion." Stendhal</span></p>
</div>

était plus approprié, c'est cela ? Mais j'ai un petit doute sur l'utilisation de la balise <blockquote> ou <q>

Après le logo étant lui même un lien de navigation sur le site, ne peut il pas faire
parti des liens de navigation et avoir sa place dans <nav> ? (logique déroutante)

Sinon pour les titres, je dois t'avouer que je ne suis pas convaincu, pareil pour la taille de la police, au dessus sa rend pas spécialement bien et le 12px c'est tous simplement parce que c'est la taille standard pour rédiger un document , puis surtout je remarque également que c'est la taille standard sur les sites web, même sur alsacréation, les tutorials les messages sur forum ou commentaire sont de cette taille ou très proche et je me vois pas faire des titres sur-dimensionné par rapport au contenu, l'équilibre serait totalement chambouler entres les éléments qui compose ma page je trouve

Enfin après j'ai fait aucune études sur le design, je m'inspire seulement de ce que je peux voir sur la toile principalement
Modifié par Vipear (02 Jun 2012 - 02:34)

Vipear a écrit :
le 12px c'est tous simplement parce que c'est la taille standard pour rédiger un document

C'est 12pt, pas 12px et c'est pour les documents papier. Le standard actuel pour le web sur desktop c'est 13px (la taille utilisée par défaut par tous les navigateurs), mais après ça peut varier selon les configurations et réglages des utilisateurs.
Modifié par jb_gfx (02 Jun 2012 - 02:43)

jb_gfx a écrit :


C'est 12pt, pas 12px et c'est pour les documents papier. Le standard actuel pour le web sur desktop c'est 13px (la taille utilisée par défaut par tous les navigateurs), mais après ça peut varier selon les configurations et réglages des utilisateurs.

Ah ! Comme quoi je me trompais je passe la police en 13px alors

J'ai regardé ton code : je suis désolé mais il n'est pas bien structuré, tant au niveau de l'utilisation correcte des éléments html5, que de la hiérarchie des titres (h1, h2, etc) que de l'utilisation de l'attribut alt.

Voici un code (simplifié) plus correct :

<!DOCTYPE html>
<html  lang="fr">
<head>
	<meta charset="utf-8" />

	<title>e-Portfolio de Eric MERTEN</title>
	
</head>

<body>
	<header role="banner">
		<h1 id=""><a href="./"><img src="images/logo.png" alt="e-Portfolio de Eric MERTEN"></a></h1>
		<blockquote>
			«La vocation c'est avoir pour métier sa passion.» Stendhal
		</blockquote>
		<nav>Accueil CV</nav>
	</header>
	<div id="content" role="main">
		<h2>Car il faut bien commencer par quelque chose</h2>
		<p>…</p>	
		<h2>L'informatique ? Ma passion ! Mes débuts ...</h2>
		<p>…</p>	
	</div>
	<aside role="complementary">
		<!--positionnement absolu en css pour les boutons-->
		<p class="social-networks">Facebook etc…</p>
		<h2>hébergeur</h2>
		<p>…</p>
		<h2>Pub</h2>
		<p>…</p>
		<h2>Plan</h2>
		<p>…</p>
	</aside>
	<footer role="contentinfo">
		copyright, etc
	</footer>
</body>
</html>

P.S. : c'est vrai que la taille des caractères est petite, moi j'utilise 1em (voir l'article donné par Florent).
Modifié par Patidou (02 Jun 2012 - 14:58)