5545 sujets
Sémantique web et HTML
Salut
Au niveau de l'ordre de déclaration des attributs, je ne crois pas qu'il y ait une règle précise, mais pour faciliter la maintenance il est important d'adopter un choix. Je place toujours l'ID en tête, puis l'attribut "class", ensuite un "name" éventuel, puis le reste en terminant la série par les attributs "datasets". Voir dans l'exemple ci-dessous.
Il y a déjà bien des années que l'on sépare le CSS et le JS du HTML ! Les attributs "style" et "onclick" n'ont rien à faire ici. Normalement le CSS et le JS doivent être dans des fichiers séparés, mais pour une page de test on peut tolérer trouver le tout ensemble.
Voici un exemple :
Au niveau de l'ordre de déclaration des attributs, je ne crois pas qu'il y ait une règle précise, mais pour faciliter la maintenance il est important d'adopter un choix. Je place toujours l'ID en tête, puis l'attribut "class", ensuite un "name" éventuel, puis le reste en terminant la série par les attributs "datasets". Voir dans l'exemple ci-dessous.
Il y a déjà bien des années que l'on sépare le CSS et le JS du HTML ! Les attributs "style" et "onclick" n'ont rien à faire ici. Normalement le CSS et le JS doivent être dans des fichiers séparés, mais pour une page de test on peut tolérer trouver le tout ensemble.
Voici un exemple :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="author" content="Daniel Hagnoul">
<title>Exemple</title>
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
display: grid;
grid-template-columns: minmax(20rem, 60rem) 20rem;
grid-template-rows: repeat(min-content, 4);
grid-column-gap: 0.6rem;
grid-row-gap: 0.6rem;
}
header {
grid-column: 1 / span 2;
grid-row: 1;
text-align: center;
}
main {
grid-column: 1;
grid-row: 2;
}
aside {
grid-column: 2;
grid-row: 2;
}
aside>h3 {
text-align: center;
}
footer {
grid-column: 1 / span 2;
grid-row: 3;
text-align: center;
}
footer>* {
margin-left: 2rem;
}
.exemple1 {
color: coral;
}
.exemple2 {
background-color: cyan;
}
</style>
<script defer>
document.addEventListener('DOMContentLoaded', ev => {
// le DOM est construit, la page web n'est pas visible
// début code du test
// on construit une référence vers notre photo
const elemPhoto = document.querySelector('#Photo5');
// on ajoute une marge autour et on change sa taille
elemPhoto.style.margin = '1.5rem',
elemPhoto.style.width = '25vh';
/*
Bien entendu, cela doit normalement être fait dans le CSS.
C'est seulement pour montrer ce qui peut être fait avant
l'affichage de la page web.
*/
// fin code du test
}, {
capture: false,
passive: true,
once: false
});
window.addEventListener('load', ev => {
// le DOM est construit et la page web est visible
// début code du test
// on construit une référence vers notre photo
// la référence précédente est inacessible car dans un autre bloc de code
// En ES2015, avec const ou let, la portée est le bloc de code.
const elemPhoto = document.querySelector('#Photo5');
// ajout d'un cadre autour de la photo, le parentNode de la photo est la div
document.querySelector('#Photo5').parentNode.style.border = '2pt solid yellow';
// on ajoute un gestionnaire d'événement
elemPhoto.addEventListener('click', ev => {
window.open(ev.target.dataset.url);
}, {
capture: false,
passive: true,
once: false
});
// fin code du test
}, {
capture: false,
passive: true,
once: false
});
</script>
</head>
<body>
<header>
<h1>Exemple</h1>
</header>
<aside>
<h3>Commentaires</h3>
<p>Salut !</p>
<br>
<p>J'utilise uniquement le JS d'aujourd'hui, ES2015+.</p>
</aside>
<main>
<!-- code du test -->
<div>
<img id="Photo5" class="mainImage" data-url="https://www.alsacreations.com/" src="https://danielhagnoul.developpez.com/images/boule1.png">
</div>
<!-- fin code du test -->
</main>
<footer class="h-entry">
<time class="dt-published" datetime="2018-08-15">2018-08-15</time>
<a rel="license" href="http://creativecommons.org/licenses/by/2.0/be/">
<img alt="Licence Creative Commons" src="https://i.creativecommons.org/l/by/2.0/be/80x15.png">
</a>
<a rel="license" href="http://creativecommons.org/licenses/by/2.0/be/">Licence Creative Commons Attribution 2.0 Belgique</a>.
</footer>
</body>
</html>Si on supprime l'attribut style de la balise pour le remplacer par du javascript "elemPhoto.style.margin", je ne vois trop où est le progrès et comment on sépare le fond de la forme.
Dans la feuille de style CSS, si on veut appliquer un aspect visuel particulier à un élément, on peut utiliser son id.
Quand une balise a un id, on peut le retrouver très rapidement en javascript avec cette vieille fonction document.getElementById(..). Elle est toujours en vigueur.
Quand on insère du code JS dans une page HTML, ce qui se justifie s'il est simple, on préconise de le déclarer juste avant la balise fermante </body>.
Modifié par bazooka07 (15 Aug 2018 - 21:20)
Dans la feuille de style CSS, si on veut appliquer un aspect visuel particulier à un élément, on peut utiliser son id.
Quand une balise a un id, on peut le retrouver très rapidement en javascript avec cette vieille fonction document.getElementById(..). Elle est toujours en vigueur.
Quand on insère du code JS dans une page HTML, ce qui se justifie s'il est simple, on préconise de le déclarer juste avant la balise fermante </body>.
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Exemple</title><
<style>
#Photo5 { border: 2px solid transparent; }
#Photo5:hover { border-color: red; }
</style>
</head><body>
<div>
<img id="Photo5" class="mainImage" src="img.jpg">
</div>
<script type="text/javascript">
(function() (
'use strict';
document.getElementById('Photo5').addEventListener('click', function (event) {
event.preventDefault() // pour éviter que event ne se propage aux parents
alert('Tu m\'as cliqué dessus !');
});
)();
</script>
</body></html>Modifié par bazooka07 (15 Aug 2018 - 21:20)