初心者必見！HTMLの<div>タグとは？基本と使い方を解説

HTMLを学び始めると必ず出会うタグのひとつが<div>タグです。「これって何に使うの？」と思う方も多いはず。
でも、実はこのタグはWebページのレイアウトを作る上で欠かせない重要な要素なんです！
この記事では、divタグの基本的な使い方から活用例までをわかりやすく解説します。

結論から言うと初心者はとりあえず<div>タグを使えばよい!

意味のないdivの乱用を避ける: どこにでも<div>タグを使うと、コードが読みにくくなる原因になります。必要な場面でのみ使用しましょう。
意味を持つタグを優先する: 見出しにはh2やh3、リストにはulやliを使うなど、適切なHTMLタグを優先しましょう。
基本これが大切ですが、最初はなにもわかりませんよね。最初から完璧なコードは描けないのです。SEOなど聞きなれない単語など色々あるでしょう
とりあえずコンテンツをdivで括ればそれなりの見栄えになりますし、理想的な見た目になります。
以下divの解説になります。

<div>タグって何？

<div>タグは、HTMLの中でコンテンツを「区分け」するためのタグです。
正式名称は「division」（区分）を意味します。
このタグを使うことで、Webページを論理的に整理し、各部分ごとにスタイルを適用したり、JavaScriptで操作することができます。

基本構文:

<div>
  <!-- ここにコンテンツを入れる -->
</div>

<div>タグはそれ自体に特別な意味やデザインを持っていません。ただの「箱」のようなものです。
この「箱」にCSSやJavaScriptを使ってスタイルや動きを加えることで、ページをより魅力的に仕上げられます。

<div>タグの主な用途

1. コンテンツのグループ化 <div>タグは、関連する要素をまとめるために使用します。
   例:
   

   <div>
       <h1>タイトル</h1>
       <p>このセクションの説明文です。</p>
   </div>
   

2. レイアウトの作成 CSSと組み合わせることで、Webページ全体の構造を作る際に活用されます。
   例:
   

   <div class="header">
       <h1>ヘッダー</h1>
   </div>
   <div class="content">
       <p>メインコンテンツ</p>
   </div>
   <div class="footer">
       <p>フッター</p>
   </div>
   

3. スタイルの適用 CSSで特定のスタイルを適用するために<div>タグを利用します。
   例:
   

   <div class="highlight">
       <p>この部分は強調されています。</p>
   </div>
   

   .highlight {
       background-color: yellow;
       padding: 10px;
   }
   

まとめ: <div>タグを使いこなそう！

divタグは、HTMLの基礎を固める上でとても重要な要素です。特に、CSSやJavaScriptと組み合わせることで、その真価を発揮します。
これからHTMLを学ぶ中で、<div>タグを効果的に使いこなすことが、きれいで機能的なWebページを作る第一歩です。ぜひ、この記事で学んだことを活用してみてください！

次のステップとしてHTML見出しタグについてを学びましょう。