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

HTMLドキュメントにセクションを含めるにはどうすればいい？
タグの使い方を解説

HTMLドキュメントにセクションを追加するには、<section>タグを使用します。<section>タグはHTML5で導入されたセマンティック（意味論的）要素のひとつで、見出しを伴う関連性のあるコンテンツをひとつのまとまりとしてグループ化するために使われます。

以下のサンプルコードを実行すると、HTMLドキュメント内にセクションを含める方法を確認できます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Section Tag</title>
   </head>
   <body>
      <section>
         <h1>Java</h1>
         <h3>継承（Inheritance）</h3>
         <p>継承とは、スーパークラスとサブクラスの関係を定義する仕組みです。</p>
      </section>
   </body>
</html>

コードの解説

このコードでは、<body>内に<section>タグを配置し、その中に見出し（<h1>、<h3>）と段落（<p>）を含めています。ブラウザで表示すると、「Java」というテーマに関するコンテンツがひとつのセクションとしてまとめられて表示されます。

<section>タグを使うポイント

<section>タグを効果的に使うためには、以下の点に注意しましょう。

・セクション内には通常、見出し（<h1>〜<h6>）を含めるのが推奨されています。
・単なるスタイリング目的のグループ化には<div>タグを使用し、意味のあるコンテンツの区切りには<section>タグを使い分けるとよいでしょう。
・記事全体には<article>タグ、ページの補足情報には<aside>タグなど、目的に応じたセマンティック要素の活用も検討してください。

  1. HTMLページにCSSを組み込む3つの方法｜インライン・内部参照・外部参照の違いと書き方

    CSSをHTMLページに組み込む方法は、大きく分けて次の3つがあります。 インライン（Inline）：要素のstyle属性に直接スタイルを指定する方法です。手軽に使えますが、コードの保守性や再利用性を考えると、内部参照または外部参照の利用が推奨されます。 内部参照（Internal）：HTMLドキュメントの<head>タグ内に配置した<style>タグの中に、CSSの定義をまとめて記述する方法です。 外部参照（External）：<link>タグを使って、ローカル環境やサーバー上に置かれた.cssファイルを読み込む方法です。CSSを外部ファイルとして切り出

  2. HTMLドキュメントの作成方法とは？基本構造をサンプルコード付きで解説

    HTMLドキュメントは、Webページの構造を定義するものです。大きく分けて「head（ヘッド）」と「body（ボディ）」という2つの部分で構成されており、headにはドキュメントに関する情報（メタデータなど）が、bodyには実際にブラウザ上に表示されるコンテンツが含まれます。head部分は<head>…</head>タグの中に記述し、body部分は<body>…</body>タグの中に記述します。また、HTMLドキュメントは必ず<!DOCTYPE html>という宣言から始まります。これはDTD（Document Type Defin