HTMLの基本構造について

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
  • html 要素（HTML の文書）
  • head 要素（文書情報）
  • body 要素（文書本文）

文書情報について

  • title 要素（ページタイトル）
  • meta 要素（文字コード指定/charset）
  • meta 要素（ページの説明文/description）
  • meta 要素（ページのキーワード/keywords）
  • meta 要素（ページの作者情報/author）
  • meta 要素（ビューポート/viewport）
  • link要素（外部 CSS ファイルの紐付け）
  • link要素（ファビコンファイルの紐付け）

文書本文について

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

参考サイト

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

セクション分類タグについて

  • h1～h6 要素（見出し）
  • article 要素（アーティクル）
  • section 要素（セクション）
  • header 要素（ヘッダー）
  • footer 要素（フッター）
  • nav 要素（ナビ）
  • aside 要素（アサイド）

参考サイト

ワンポイントアドバイス

見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。

参考サイト

コンテンツ分類タグについて

  • p 要素（段落（パラグラフ））
  • hr 要素（区切り）
  • ul/li 要素（順序のないリスト）
  • ol/li 要素（順序のあるリスト）
  • dl/dt/dd 要素（定義・説明リスト）
  • div 要素（ひとつのかたまりの範囲）
  • main 要素（メインコンテンツ）

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。