htmlページの基礎

DOCTYPE宣言

<!DOCTYPE html>
どのバージョンのhtmlを使用しているかを宣言。
上の場合はhtml5の使用を宣言している。

ページ基盤

html要素

<html></html>
文書最上位の要素。head要素とbody要素を1つずつ配置できる。

head要素

<head></head>
基本的にブラウザ上には表示されないデータの場所。

body要素

<body></body>
ブラウザ上に表示される部分。

配置の順番

<html>
  <head>
    データの場所。表示されない。
  </head>
  <body>
    画面に表示される場所。
  </body>
</html>

head要素内 (meta要素など表示系)

文字コード

<meta charset="utf-8">
文字コードを指定するタグ。ファイルの先頭から1024バイト以内に記述。
【shift_jis】や【euc-jp】を指定する場合は【utf-8】の部分を置き換える。(utf-8推奨)

タイトル

<title>タイトル</title>
ページのタイトル。ブラウザのツールバー、検索エンジン結果などに表示される。

紹介文

<meta name="description" content="紹介文">
サイトの紹介文。検索エンジン結果に表示される(されない場合もある)

キーワード

<meta name="keyword" content="キーワード1,キーワード2">
サイトのキーワード。複数記入する場合は【,】で区切る。

スマホ表示

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
スマホでの表示設定。

head要素内(link要素など読み込み系)

スタイルシート

<link rel="stylesheet" href="ファイル名.css">
外部CSSファイルの読み込み。

スクリプト

<script src="ファイルURL.js"></script>
外部スクリプトファイルの読み込み。

ファビコン

<link rel="icon" href="画像URL.ico">
ページアイコン。拡張子は【ico】大きさは16px × 16px、32px × 32px など。

【gif】や【png】を使う場合は【type="image/拡張子"】を追加。
gifの場合:<link rel="icon" type="image/gif" href="画像URL.gif">

ショートカットアイコン

<link rel="apple-touch-icon" href="画像URL">
スマホ用ショートカットアイコン。

URL

<link rel="canonical" href="URL">
URLの正規化、統一。
【index.html】や【www.】の有無で重複した別のページとみなされないように本当のURLの指定。

コメントアウト

<!-- コメント -->
ブラウザ上に表示されないメモ。
<!-- ===========================▼ コメント ▼ -->
こういうのだと見つけやすくて編集しやすい。
<!-- ===========================▲ コメント ▲ -->

自分用にまとめてみた。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="description" content="紹介文">
<meta name="keyword" content="キーワード">
<title>タイトル</title>
</head>
<body>
</body>
</html>