フロントエンド開発者向けの HTML 面接でよくある質問

フロントエンド愛好家の皆さん、こんにちは！ ?最初の面接に向けて準備をしている場合でも、次の大きなチャンスに向けてブラッシュアップしている場合でも、HTML をマスターすることは必須です。ここでは、最も一般的な HTML 面接の質問と実際の例を厳選したリストを示します。飛び込んでみましょう！ ?

---

1. セマンティック HTML タグとは何ですか?

セマンティック タグは、Web ページでの目的を明確に説明します。コードを読みやすくし、SEO を向上させます。 ?

例:

<!-- 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>

豆知識: void 要素に終了タグを追加するのは無効な HTML です!

---

4. HTML ドキュメントに JavaScript を組み込むにはどうすればよいですか?

JavaScript を組み込むには 3 つの方法があります:

1) インライン:

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

2) 内部:

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

3) 外部:

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

プロのヒント: 懸念事項をより適切に分離するには、外部スクリプトの使用が推奨されます。 ?️

---

5. 画像の alt 属性の目的は何ですか?

alt 属性は、画像が表示されていない場合やスクリーン リーダーに代替テキストを提供します。

例:

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

重要な理由: アクセシビリティを強化し、SEO ランキングを向上させます。

---

6. HTML の inline、block、および inline-block 要素の違いは何ですか?

• インライン: 新しい行で開始せず、必要な幅のみを占有します。
• ブロック: 新しい行で始まり、使用可能な全幅を占めます。
• Inline-block: インライン要素のように動作しますが、幅と高さを設定できます。

例:

<!-- 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>

便利な理由: ハードコーディングせずに JavaScript にデータを渡すのに最適です。

---

8. HTML 要素にアクセスできるようにするにはどうすればよいですか?

• 適切なセマンティックタグを使用してください。
• スクリーン リーダーのサポートを向上させるために、aria-* 属性を追加します。

例:

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

プロのヒント: 実際のアクセシビリティについてスクリーン リーダーを使用して Web サイトをテストします。 ?

---

9. と の違いは何ですか?そして<タグ?

• : ドキュメントと外部リソース (CSS など) との関係を定義します。
: ハイパーリンクを作成します。

例:


<!-- 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>

簡単なヒント: 2 つを混同しないでください。1 つはリソース用で、もう 1 つはナビゲーション用です。

---

10. Doctype 宣言とは何ですか?

宣言は、ドキュメントで使用される HTML バージョンを定義します。

例:


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

豆知識: 最近のブラウザでは、Doctype が欠落している場合でもデフォルトで HTML5 が使用されますが、これを含めることをお勧めします。

---

クイズタイム！ ?

あなたの知識をテストしてみましょう。以下のコメント欄で答えてください。 ?

1. ナビゲーション メニューを定義するにはどのタグを使用しますか?
• a)
• b)
• c)
1. DOM 内の要素を一意に識別する属性はどれですか?
• a) クラス
• b) ID
• c) スタイル
1. 正誤: タグはセマンティックな HTML タグです。

以下に回答を入力して、話し合いましょう! ?

以上がフロントエンド開発者向けの HTML 面接でよくある質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。