HTML: div タグ

概略

div タグは汎用の区画を表すタグで、ブロック要素 と呼ばれることもあります。 CSS の display の初期設定が display: block; になっています。
CSS display: inline, blockなど

下で紹介するサンプルは div タグのサンプルになっていますが、 h1, h2,... や p や ul, li や dl, dt, dd や main, header, footer など他のブロック要素のタグも div と同じように扱えます。 これらのタグは汎用の div に対して特定の目的で使うように意味 (セマンティック, Semantic) を持たせて用途を限定したタグです。
セマンティック HTML

div タグ         : 汎用のブロック要素

◎ 以下、用途を限定したブロック要素
h1, h2, ... タグ : 見出しを表す要素。
p タグ           : 文章の段落を表す要素。
ul, ol, li タグ  : 箇条書きのリストを表す要素。
dl, dt, dd タグ  : 用語と説明のリストを表す要素。
figure タグ     : 絵と説明を表す要素。
など

div の中のテキストの配置

テキストのセンタリングや右寄せなどの配置は CSS の text-align で設定できます。

• MDN: text-align
• 文章レイアウトとフォントのサンプル

div の大きさを指定する

CSS の width、height で div の大きさを指定することができます。
CSS: 要素の大きさの指定

width  :  div の幅を指定する。
height :  div の高さを指定する。

スクロールバーを付ける

div の高さ（height）を指定すると コンテンツが枠からあふれて表示されることがあるので CSS の overflow を設定してスクロールバーを付けます。

• CSS: スクロール

div の配置

div 内のテキストではなくて、 div 自体を親要素に対してどのように配置するか？の話です。

• CSS: 要素の配置: ブロック要素
  
• HTML: 要素の配置, 左右中央, 上下中央
  

div の装飾

div の表示・非表示

• CSS: 要素の表示・非表示

不要な div を入れない

CSS に不慣れで display やインライン要素、 ブロック要素の話がよく分からないと div を多用しがちになります。 div が何重にもネストした HTML になりやすいです。

関連

• CSS: 要素の表示・非表示
• CSS: 要素の配置: ブロック要素
• div タグ: JavaScript