Principales questions d'entretien HTML pour les développeurs frontend

Salut, passionnés du frontend ! ? Que vous vous prépariez pour votre premier entretien ou que vous prépariez votre prochaine grande opportunité, la maîtrise du HTML est indispensable. Voici une liste organisée des questions d'entretien HTML les plus courantes avec des exemples pratiques. Allons-y ! ?

---

1. Que sont les balises HTML sémantiques ?

Les balises sémantiques décrivent clairement leur objectif dans une page Web. Ils rendent votre code plus lisible et améliorent le référencement. ?

Exemple :

<!-- Semantic -->
<header>
  <h1>Welcome to My Blog</h1>
</header>
<article>
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</article>

<!-- Non-semantic -->
<div>



<p><strong>Why it matters:</strong> Semantic tags improve accessibility and help search engines understand your content better.</p>


<hr>

<h3>
  
  
  2. <strong>What is the difference between id and class attributes?</strong>
</h3>

<ul>
<li>
id: Unique identifier, used once per page.</li>
<li>
class: Can be reused multiple times for styling or grouping elements.</li>
</ul>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><!-- Using id -->
<div>



<p><strong>Pro Tip:</strong> Use id for unique elements like headers or footers, and class for reusable components.</p>


<hr>

<h3>
  
  
  3. <strong>What are void elements in HTML?</strong>
</h3>

<p>Void elements are self-closing and don’t have a closing tag.</p>

<p><strong>Examples:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><img src="image.jpg" alt="A beautiful view">
<input type="text" placeholder="Enter your name">
<hr>

Fait amusant : L'ajout d'une balise de fermeture aux éléments void n'est pas du HTML valide !

---

4. Comment inclure du JavaScript dans un document HTML ?

Il existe trois façons d'inclure JavaScript :

1) En ligne :

   <button onclick="alert('Hello!')">Click Me</button>

2) Interne :

   <script>
     console.log('Hello from internal script!');
   </script>

3) Externe :

   <script src="script.js"></script>

Conseil de pro : Les scripts externes sont préférés pour une meilleure séparation des préoccupations. ?️

---

5. À quoi sert l'attribut alt dans les images ?

L'attribut alt fournit un texte alternatif pour une image lorsqu'elle n'est pas affichée ou pour les lecteurs d'écran.

Exemple :

<img src="logo.png" alt="Company Logo">

Pourquoi c'est important : Améliore l'accessibilité et améliore le classement SEO.

---

6. Quelles sont les différences entre les éléments inline, block et inline-block en HTML ?

• En ligne : Ne démarre pas sur une nouvelle ligne et ne prend que la largeur nécessaire.
• Bloquer : Commence sur une nouvelle ligne et occupe toute la largeur disponible.
• Inline-block : Se comporte comme un élément en ligne mais permet de définir la largeur et la hauteur.

Exemple :

<!-- Inline -->
<span>This is inline</span>
<span>Another inline</span>

<!-- Block -->
<div>This is block</div>
<div>Another block</div>

<!-- Inline-block -->
<div>



<p><strong>Pro Tip:</strong> Use inline-block for layouts where you need elements side-by-side with specific dimensions.</p>


<hr>

<h3>
  
  
  7. <strong>What are data attributes in HTML?</strong>
</h3>

<p>Custom attributes to store extra data without cluttering your DOM.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><button data-user-id="123" onclick="handleClick(this)">Click Me</button>
<script>
  function handleClick(button) {
    alert(`User ID: ${button.dataset.userId}`);
  }
</script>

Pourquoi ils sont pratiques : Idéal pour transmettre des données à JavaScript sans codage en dur.

---

8. Comment rendre accessible un élément HTML ?

• Utilisez des balises sémantiques appropriées.
• Ajoutez des attributs aria-* pour une meilleure prise en charge des lecteurs d'écran.

Exemple :

<button aria-label="Submit Form">Submit</button>

Conseil de pro : Testez votre site Web avec des lecteurs d'écran pour une accessibilité réelle. ?

---

9. Quelle est la différence entre et des balises ?

•  : Définit une relation entre le document et une ressource externe (comme CSS).
•  : crée un lien hypertexte.

Exemple :

<!-- Semantic -->
<header>
  <h1>Welcome to My Blog</h1>
</header>
<article>
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</article>

<!-- Non-semantic -->
<div>



<p><strong>Why it matters:</strong> Semantic tags improve accessibility and help search engines understand your content better.</p>


<hr>

<h3>
  
  
  2. <strong>What is the difference between id and class attributes?</strong>
</h3>

<ul>
<li>
id: Unique identifier, used once per page.</li>
<li>
class: Can be reused multiple times for styling or grouping elements.</li>
</ul>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><!-- Using id -->
<div>



<p><strong>Pro Tip:</strong> Use id for unique elements like headers or footers, and class for reusable components.</p>


<hr>

<h3>
  
  
  3. <strong>What are void elements in HTML?</strong>
</h3>

<p>Void elements are self-closing and don’t have a closing tag.</p>

<p><strong>Examples:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><img src="image.jpg" alt="A beautiful view">
<input type="text" placeholder="Enter your name">
<hr>

Conseil : Ne confondez pas les deux : l'un est destiné aux ressources, l'autre à la navigation !

---

10. Qu'est-ce que la déclaration doctype ?

Le La déclaration définit la version HTML utilisée dans le document.

Exemple :

   <button onclick="alert('Hello!')">Click Me</button>

Fait amusant : Les navigateurs modernes utilisent par défaut HTML5 même si le doctype est manquant, mais il est préférable de l'inclure.

---

C'est l'heure du quiz ! ?

Testons vos connaissances. Répondez-y dans les commentaires ci-dessous ! ?

1. Quelle balise utiliseriez-vous pour définir un menu de navigation ?

• a)
• b)
• c)

1. Quel attribut identifie de manière unique un élément dans le DOM ?

• a) cours
• b) identifiant
• c) le style

1. Vrai ou Faux : L'option La balise est une balise HTML sémantique.

Déposez vos réponses ci-dessous et discutons-en ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!