HTML Flashcards
Pouvez-vous expliquer ce qu’est HTML et à quoi il sert dans le développement web ?
HTML signifie HyperText Markup Language. C’est un langage de balisage qui permet de structurer le contenu d’une page web (texte, images, liens…) à l’aide de balises. Il constitue la base structurelle de toute page web.
Quelle est la différence entre HTML et CSS ? Comment ces technologies travaillent-elles ensemble ?
HTML définit la structure et le contenu de la page, tandis que CSS (Cascading Style Sheets) gère l’apparence et la mise en forme. HTML est comme le squelette du site, et CSS est comme ses vêtements et son maquillage. Ils travaillent ensemble car CSS cible les éléments HTML pour leur appliquer des styles.
Expliquez la différence entre une balise en paire et une balise orpheline en HTML. Donnez des exemples.
Les balises en paires ont une balise ouvrante et une balise fermante (ex: <p></p>, <div></div>). Les balises orphelines sont autonomes et n’ont pas besoin de fermeture séparée (ex: <img></img>, <br></br>, <input></input>).
À quoi servent les attributs dans les balises HTML ?
Les attributs fournissent des informations supplémentaires aux balises. Ils définissent des propriétés pour les éléments HTML et leur associent des valeurs. Par exemple, l’attribut class permet d’identifier les éléments pour le CSS, href définit l’URL de destination pour un lien, src indique la source d’une image.
Pouvez-vous expliquer la structure de base d’un document HTML5 ?
Un document HTML5 commence par la déclaration <!DOCTYPE html>, suivie de la balise <html> qui englobe tout. À l’intérieur, on trouve la section <head> pour les métadonnées (titre, encodage, etc.) et la section <body> pour le contenu visible.
Pourquoi est-il important d’utiliser des balises sémantiques en HTML ?
Les balises sémantiques (<header>, <nav>, <section>, etc.) améliorent le référencement (SEO) car les moteurs de recherche comprennent mieux la structure de la page. Elles améliorent aussi l’accessibilité pour les personnes utilisant des lecteurs d’écran et rendent le code plus lisible et maintenable.
Comment structureriez-vous une page d’accueil simple avec les balises sémantiques HTML5 ?
Je commencerais par un <header> contenant le logo et la barre de navigation (<nav>). Ensuite, un <main> contiendrait plusieurs <section> ou <article> pour le contenu principal. Enfin, un <footer> contiendrait les informations de contact, liens légaux, etc.
Que mettriez-vous dans la section <head> d’une page HTML et pourquoi ?
Dans le <head>, je mettrais : le <title> pour le titre de la page, des balises <meta></meta> pour l'encodage (charset="utf-8"), la description pour le SEO, les viewports pour le responsive design, les liens vers les feuilles de style CSS et éventuellement des scripts JavaScript.</title>
Quelles sont les meilleures pratiques pour améliorer l’accessibilité d’une page web avec HTML ?
Utiliser des balises sémantiques, ajouter des attributs alt descriptifs aux images, maintenir une hiérarchie logique des titres (<h1> à <h6>), utiliser des attributs ARIA si nécessaire, créer des formulaires accessibles avec des labels, et assurer que le contenu reste accessible sans CSS.
Que signifie “responsive design” et comment HTML contribue-t-il à cela ?
Le responsive design est l’approche qui permet aux sites web de s’adapter à différentes tailles d’écran. HTML y contribue via la balise <meta></meta> qui configure l’affichage sur les appareils mobiles, et grâce à l’utilisation d’unités relatives et de balises qui s’adaptent naturellement (comme les tableaux modernes et les images flexibles).
Comment créeriez-vous un lien qui ouvre un nouvel onglet lorsqu’on clique dessus ?
<a>Lien</a>. L’attribut target=”_blank” fait ouvrir le lien dans un nouvel onglet.
Comment pourriez-vous créer une liste numérotée en HTML ?
html
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
Comment créer un tableau simple avec deux colonnes et trois lignes en HTML ?
html
<table>
<tr>
<td>Cellule 1,1</td>
<td>Cellule 1,2</td>
</tr>
<tr>
<td>Cellule 2,1</td>
<td>Cellule 2,2</td>
</tr>
<tr>
<td>Cellule 3,1</td>
<td>Cellule 3,2</td>
</tr>
</table>
Comment intégreriez-vous une image dans une page HTML, et comment la rendriez-vous accessible ?
<img></img>. L’attribut alt fournit une description textuelle de l’image pour les lecteurs d’écran et en cas de non-chargement de l’image.
Comment créeriez-vous un formulaire simple avec un champ email et un bouton d’envoi ?
html
<form>
<label>Email :</label>
<input></input>
<input></input>
</form>
Vous remarquez que votre page web ne s’affiche pas correctement sur les navigateurs mobiles. Quelles balises HTML pourriez-vous vérifier ou ajouter ?
Je vérifierais la présence et la configuration de la balise meta viewport : <meta></meta> pour assurer que la page s’adapte aux écrans mobiles.
Un client vous demande d’améliorer le référencement de sa page d’accueil. Quelles modifications HTML pourriez-vous suggérer ?
Je suggérerais d’utiliser des balises sémantiques appropriées, d’ajouter une meta description pertinente, d’assurer une structure hiérarchique logique des titres (h1, h2…), d’optimiser les attributs alt des images, et d’ajouter un sitemap XML.
Comment adapteriez-vous votre code HTML pour assurer l’accessibilité à des utilisateurs malvoyants ?
J’utiliserais des balises sémantiques appropriées, des attributs alt descriptifs pour les images, une hiérarchie claire des titres, des contrastes suffisants (via CSS), des formulaires avec labels explicites, et je testerais avec des lecteurs d’écran.
Un collègue junior vous montre son code HTML rempli de <div> sans classes ni identifiants spécifiques. Quels conseils lui donneriez-vous pour améliorer son code ?
Je lui conseillerais de remplacer les div génériques par des balises sémantiques appropriées (<header>, <nav>, <main>, <section>, etc.) quand c’est possible, d’ajouter des classes ou ID significatifs pour le ciblage CSS et JavaScript, et de maintenir une indentation cohérente pour améliorer la lisibilité.
Comment intégreriez-vous HTML avec d’autres technologies (CSS, JavaScript) dans un projet web réel ?
Pour le CSS, j’ajouterais soit des liens externes <link></link> dans le head, soit du CSS interne avec la balise <style>. Pour JavaScript, j'utiliserais des balises
soit en fin de body pour le code interne, soit avec un attribut src pour les fichiers externes. J'utiliserais des classes et ID HTML pour cibler les éléments depuis CSS et JavaScript.</style>
Quelles sont les nouveautés introduites dans HTML5 par rapport aux versions précédentes ?
HTML5 a introduit de nombreuses balises sémantiques (<header>, <nav>, <section>, etc.), de nouveaux types d’input pour les formulaires (email, date, etc.), le support natif de l’audio et de la vidéo (<audio>, <video>), l'élément <canvas> pour les graphiques, et des API JavaScript comme le stockage local, le glisser-déposer, et la géolocalisation.</canvas></video></audio>
Expliquez la différence entre les attributs id et class en HTML.
L’attribut id identifie un élément de manière unique dans la page (chaque valeur d’id ne devrait apparaître qu’une seule fois). En revanche, class peut être utilisé sur plusieurs éléments pour appliquer les mêmes styles ou comportements à un groupe d’éléments. En CSS, les id sont sélectionnés avec # et les classes avec ..
Qu’est-ce que le DOM (Document Object Model) et comment est-il lié au HTML ?
Le DOM est une représentation en mémoire de la structure d’un document HTML sous forme d’arborescence d’objets. Il est créé par le navigateur lors du chargement d’une page HTML et permet aux programmes (notamment JavaScript) d’accéder et de modifier dynamiquement le contenu, la structure et le style de la page.
Expliquez l’importance de l’attribut lang dans la balise <html>.
L’attribut lang (comme dans <html lang="fr">) indique la langue principale du document. C’est important pour l’accessibilité (les lecteurs d’écran prononcent correctement), le référencement (aide les moteurs de recherche à indexer correctement), la traduction automatique et l’application de règles typographiques spécifiques à la langue
Quelle est la différence entre les éléments <section>, <article> et <div> en HTML5 ?
<section> représente une section thématique du contenu. <article> représente un contenu autonome qui pourrait être distribué indépendamment (comme un article de blog). <div> est un conteneur générique sans valeur sémantique particulière, utilisé principalement pour le styling ou comme conteneur pour JavaScript.
</div></article></section>
Comment voyez-vous l’évolution de HTML dans les prochaines années ?
Je pense que HTML continuera d’évoluer avec davantage de fonctionnalités natives pour réduire la dépendance au JavaScript, plus d’éléments pour améliorer l’accessibilité, et une meilleure intégration avec les technologies émergentes comme la réalité augmentée/virtuelle. L’accent sera probablement mis sur la performance et l’expérience utilisateur mobile.
Selon vous, quelles sont les compétences les plus importantes pour un développeur front-end aujourd’hui ?
Au-delà de la maîtrise technique de HTML, CSS et JavaScript, je pense que les compétences essentielles sont la compréhension de l’expérience utilisateur, l’accessibilité, le responsive design, la performance web, et la capacité à rester à jour avec les évolutions rapides des technologies et frameworks.
Comment conciliez-vous le besoin de créer des sites visuellement attractifs avec les exigences d’accessibilité ?
Je ne vois pas ces objectifs comme contradictoires mais complémentaires. Un design accessible peut être très esthétique. J’applique les principes du design universel dès le début du projet, j’utilise des contrastes suffisants, je m’assure que les sites sont utilisables au clavier, et je teste régulièrement avec des outils d’accessibilité. La sémantique HTML appropriée est la fondation d’un site à la fois beau et accessible.
