HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのsectionタグとは？基本的な使い方と実装例をわかりやすく解説

HTMLの<section>タグは、HTML文書の中でヘッダー、フッター、章立てなどの意味的なまとまり（セクション）を定義するために使用される要素です。関連性のあるコンテンツをグループ化することで、文書全体の構造が明確になり、検索エンジン最適化（SEO）やアクセシビリティの面でも大きなメリットがあります。

<section>タグには見出し（<h1>〜<h6>）を含めるのが一般的で、テーマごとに独立したコンテンツブロックを作成できます。

それでは、実際に<section>タグを実装した例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h1>Profile</h1>
<h2>Educational Qualification</h2>
<section>
<h2>Graduation</h2>
<select>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h2>Postgraduation</h2>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>
<section>
<p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>
</body>
</html>

出力結果

上記のコードでは、<select>タグと組み合わせて複数のセクションを作成しています。まず最初のセクションから確認していきましょう。

<section>
<h2>Graduation</h2>
<select>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>

続く2つのセクションは以下の通りです。大学院（修士課程）に関する選択肢を持つセクションと、職歴を記述したセクションがそれぞれ独立した<section>要素として定義されています。

<section>
<h2>Postgraduation</h2>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>
<section>
<p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>

このように<section>タグを使うことで、「学歴」「職歴」といったテーマ別にコンテンツを整理でき、人間にも検索エンジンにも理解しやすい文書構造を実現できます。

  1. HTMLのdataタグとは？機械可読なデータを紐付ける使い方を解説

    HTMLの<data>タグは、表示するコンテンツに機械が読み取り可能な形式の値（machine-readable value）を関連付けるために使用される要素です。人間には見やすいテキストを表示しながら、ブラウザやスクリプト、検索エンジンなどに対しては数値やコードといった処理しやすいデータを提供できます。基本構文<data>タグの基本的な書き方は以下の通りです。<data value="">表示するテキスト</data>value属性には、コンテンツの内容に対応する機械可読な値を指定します。この属性は必須であり、省略した場合に

  2. HTMLのtextarea disabled（無効）属性の使い方

    <textarea>要素のdisabled（無効）属性は、テキストエリアを操作できない状態にするために使用します。この属性を指定すると、ユーザーは<textarea>内のテキストを編集することはもちろん、テキストを選択することすらできなくなります。 構文 disabled属性の基本的な構文は以下のとおりです。 <textarea disabled> 使用例 それでは、<textarea>要素のdisabled属性を実装した具体例を見ていきましょう。以下のコードでは、学生情報フォームの中で「Info」欄のテキストエリアを無効化しています。 <