HTML5 OU LA SÉMANTIQUE DES BALISES
la sémantique apporte une description, une valeur modale à la
HTML5 et SÉMANTIQUE
Pour faire court HTML5 introduit dans de nouvelles balises et attributs(cf 'attributs utiles') qui ont des valeurs sémantiques bien plus fortes et donc apporte une meilleures accessibilité au développeur/intégrateur. Ce confort est un rééel plus.
Là où nous faisions des forêts de <div> avec des class="" nous avons maintenant peut être une balise approprié.
| Balises | Header Two |
|---|---|
| h1, h2 , h3 | Titres et on s'arrête à h3 car il n'est pas évalué par Google |
| p | paragraphe |
| ul / ol | liste non-ordonné et liste ordonnée |
| sub / sup | les exposants |
| br | "breack line" ne doit être utilisé |
| img | import d'image, balise inline > pour la performance de chargement on lui donne une width/height |
| la structure général du fichier | usage |
|---|---|
| body | container principale corps |
| header | contient les éléments d'entête(menu, logo etc...) |
| nav | pour la navigation (liste, burger, bloque) |
| aside | élement qui se trouve sur le coté, elements cliquable (archive, date, panier etc... -> WP) |
| section | est un block contenant "plusieurs articles" peut être unique ou multiples (catégorie, etc) |
| article | un souvent un élément récurrents (article, produits) |
| footer | est ce qui contient les élements en bas de page (map de navigation, contact, cgu etc...) |
ce qui donne:
<body>
<!-- header contient des éléments récurrents sur toutes mes pages-->
<header>
<img scr="./lien/monimage.jpg">
<h1>Nom de mon site </h1>
<nav>
Ici se trouve mon menu principale
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
</ul>
</nav>
</header>
<aside>
<div>
<h4> Mon texte </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna est laborum.</p>
</div>
<nav id="archive">
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
<li><a>item 3</a></li>
</ul>
</nav>
</aside>
<section>
<article>
<figure>
<img src="" alt="" />
<figcaption>
<p>Lorem ipsum dolor deserunt mollit anim id est laborum.</p>
</figcaption>
</figure>
</article>
<article>
<div class="">
<form class="" action="index.html" method="post">
<input type="button" name="name" value="">
<button type="button" name="button"></button>
</form>
</div>
</article>
</section>
<!-- footer contient des éléments récurrents sur toutes mes pages-->
<footer></footer>
</body>
si l'on test ce code on ne constatera pas grand chose de différent par rapport à l'emploi des div la différence est dans la re-lecture du code il sera plus simple de reprendre et comprendre ce code que s'il y avait des div de partout c'est ce que l'on appel la valeur "sémantique".
C'est pareil que lorsque l'on donne un nom à une id ou class, si vous les appelé <div class="div1"> puis <div class="div2"> ou à une variable en js var variable = "ma variable"; il n'y a aucun intérêt dans le nommage.
C'est là le principal atout du HTML5 mais pas que.
LES ATTRIBUT D'input
Je crois que c'est ma partie préférée, ça simplifie foncièrement l'emploi de formulaire pour l'intégrateur et ça prépare le terrain pour le développeur sans que le développeur ne se prenne la tête avec les spécfications "bizarres du webdesigner". C'est un gain de temps phénoménale.
| Type=" " | Attribut=" " |
|---|---|
|
|
par exemple on veut l'email d'un utilisateur et qu'il est obligatoire, on va simplement indiquer que le input est de type="email" et qu'il requis required. Si l'utilisateur renseigne mal le mail (@ .) il a message d'erreur, si il est vide il renvois 'require'.
<form class="" action="submit.html" method="post">
<input type="email" name="email" value="votre email" required>
<input type="submit" name="submit" value="envoyer">
</form>
id & class
html
<article id="post-1" class="meat"> <p> lordjkgfjkdgjkksjeghkls sldghklsghdk sdfg </p> </article>css cascade stylesheet permet d'appliquer une
#pos-1{ } .meat{ }
balise en INLINE et en BLOCK
| Block | inline |
|---|---|
| header | a |
| body | span |
| main | audio |
| header | video |
| footer | |
| section | |
| article | |
| nav | |
| div | |
| ul / li | |
| p | |