基本HTMLページ
HTMLでウェブページを作るためには、いくつかのHTMLタグが必要になります。
最低限必要なHTMLタグを含むページは、以下のようになります。
サンプルページ
- index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ページのタイトルをここに記入します</title> </head> <body> <!-- 本文ここから --> <h1>見出し1</h1> これはページの本文です。<br> サンプルテキスト <!-- 本文ここまで --> </body> </html>
コピー、貼り付け したりして新しいページを作る際に活用してください。
この部分をクリックして全体をダウンロードすることもできます。
ページのコンテンツを記入する場合は <body> から </body> までの範囲内に記入してください。
内容解説
上に書かれているHTMLの内容を詳しく解説します。
HTMLの仕組みを知りたい場合は参考にしてください。サンプルを見ながら以下の説明を読むと分かりやすいでしょう。
DOCTYPE宣言（1行目）
<!DOCTYPE html>
この記述は 文書型宣言 もしくは DOCTYPE（ドックタイプ）宣言 といって、この文章がどんな種類の文章であるかを示すおまじないです。
必ず先頭行に記述します。
上の例では、最新の HTML5 形式の文章であることを示します。
htmlタグ
<html lang="ja"> </html>
HTML 文章全体を囲うタグです。
DOCTYPE宣言 以外の全てのものは <html> ～ </html> の範囲内に収まるように書きます。
この例では「lang="ja"」という属性が追加されていますが、「日本語」のページである事を意味します。
headタグ
metaタグ
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width">
ページに関する様々な補足情報を記入するのが <meta> タグです。
<meta> タグは、<head> ～ </head> の範囲内に書きます。
上記の記述は、<meta charset="UTF-8"> は、ページ内で使う「文字コード」を表していて、日本語の文字化けを防ぐ効果があります。
<meta name="viewport" content="width=device-width"> は、このページをスマホなどモバイル端末で見たときに、ページの横幅が画面からはみ出さないようにするためのおまじないです。
そのほか <meta> タグは様々な用途で使用されます。くわしくはこちら。
titleタグ
<title> </title>
ページのタイトルを記入するためのタグが <title> タグです。
<title> タグは、<head> ～ </head> の範囲内に書きます。
ページタイトルは、画面上部に表示されるほか、このページを「お気に入り」（ブックマーク）などに登録する際の「初期ページ名」として採用されます。
Googleなどにサイトが掲載される場合も、ページタイトルが表題となります。
ページタイトルにはページの内容を的確に表すような言葉を記入するようにしましょう。
ページタイトルの記入例
ページタイトルの表示例
ページタイトルが、ブラウザの上部に表示されている様子が分かります。
お気に入り登録例
ページタイトルが、お気に入りに登録するときの最初の名前になる様子が分かります。
bodyタグ
<body> </body>
本文を記入するためのタグが <body> タグです。
<body> タグは、<html> ～ </html> の範囲内に書きます。通常は <head> ～ </head> の次に書くことになるでしょう。
<body> ～ </body> は１ページ内に１回だけ記入します。
ページのコンテンツは、すべてこの <body> ～ </body> の範囲内に記入します。
コメント
<!-- コメント -->
画面に表示したくないものを <!-- と --> の範囲内に書くことで、ページ閲覧者に見せないようにすることができます。
HTML 編集をする際の目印やちょっとしたメモ、一時的に見せたくないが削除すべきではないもの などをコメントにすると良いでしょう。
- ただしページ閲覧者は、ブラウザの「ページのソースを表示させる機能」を使うなどしてコメントの内容を確認する方法があるので、「パスワード」や「個人情報」のように公開してはいけないものをコメントに記入するのは避けましょう。
コメントの例
