3/3 HTMLとは？初心者でもわかる書き方入門 [ホームページ作成] All About

最小限のHTMLテンプレート

最後に、HTMLソースを1から自力で記述する際のテンプレートを紹介しておきます。ウェブページの本文であるbody要素内は好きなように書けば良いですが、ウェブページの各種情報などを記述するhead要素内には「これくらいは書いておこう」という内容があります。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <meta name="description" content="このページの概要文">
   <meta name="viewport" content="initial-scale=1">
   <title>タイトル</title>
   <link type="text/css" rel="stylesheet" href="style.css">
   <link rel="shortcut icon" href="/favicon.ico">
</head>
<body>

   <h1>タイトル</h1>
   <p>
      本文
   </p>

   <script type="text/javascript" src="script.js"></script>
</body>
</html>

以下に、上記ソースに記述した各行の意味を簡単に解説しておきます。

1. DOCTYPE宣言 <!DOCTYPE html>
HTMLソースの1行目には、DOCTYPE宣言を書きます。HTML5未満までは「どのようなバージョンのHTMLを使って記述しているのか」を示す役割がありましたが、HTML5では特にバージョン番号を明示しない仕様になりました。上記の通りに書けば「標準仕様のHTMLで記述している」ことを示せます。

2. html要素(lang属性) <html lang="ja">
HTMLソースには、最も外側の要素としてhtml要素を記述します。その開始タグ<html>には、lang属性を使って言語の種類を指定できます。日本語の場合は「ja」と記述します。

3. head要素 <head>～</head>
このhead要素の中に、そのウェブページに関する各種情報を記述します。例えば、以下の4以降に挙げる内容を書きます。

4. meta要素(文字コードの指定) <meta charset="utf-8">
HTMLソースの文字コードを指定します。もし、UTF-8ではなくSHIFT-JISを使って書かれているなら「charset="shift-jis"」と書きます。文字コード名は大文字・小文字を区別しないので、大文字で書いても構いません。この記述を省略しても表示はされますが、文字化けの可能性をなくすためにも書いておきましょう。meta要素は空要素なので終了タグはありません。

5. meta要素(概要文の指定) <meta name="description" content="…概要文…">
このウェブページの概要を文章で記述します。実際のウェブページの表示には影響しませんが、検索サイトでの検索結果に表示される概要文として採用される可能性があります。だいたい110文字前後で書いておくと良いでしょう。なお、検索サイトではなくSNSに概要を表示させたい場合は、下記の関連記事をご参照下さい。

SNSでの言及時に望みの情報や画像を出すOGPの記述方法

6. meta要素(viewportの指定) <meta name="viewport" content="initial-scale=1">
ウェブサイトをモバイル端末でも閲覧しやすいようにする際にこの記述を使います。詳しくは、以下の関連記事をご参照下さい。

7. title要素 <title>タイトル</title>
ウェブページのタイトルを記述します。ブラウザのタイトル領域(タブやウインドウのタイトル)に表示されるほか、検索サイトの検索結果にも表示されます。

8. link要素(CSSの読み込み) <link type="text/css" rel="stylesheet" href="…">
CSS(スタイルシート)を別途用意している場合は、ここで読み込んでおきます。詳しくは、以下の関連記事をご参照下さい。

9. link要素(faviconの指定) <link rel="shortcut icon" href="…">
もし、ファビコン(favicon)を用意している場合は、ここで指定しておきます。詳しくは、以下の関連記事をご参照下さい。

10. body要素 <body>～</body>
ここに本文を記述します。本文には何でも自由に書けますから、テンプレートとして示すことは特にありません。ここでは、例として見出しを作るh1要素と段落を作るp要素だけを書いています。

11. script要素 <script type="text/javascript" src="…"></script>
スクリプトを読み込むscript要素は、head要素内だけでなくbody要素内にも書けます。外部ファイルの読み込みには多少の時間が必要ですから、ウェブページを早く表示させるためには「読み込みを後回しにしても問題ないスクリプト」は最後に(＝</body>タグの直前で)読み込むように書く方が良いでしょう。そうすれば、スクリプトの読み込み待ちが原因でウェブページの描画開始が遅れてしまうのを防げます。下記の関連記事もご参照下さい。

外部CSSと外部JavaScriptで表示速度の低下を防ぐには

HTMLの書き方を覚えよう

ホームページ作成ソフトを使えば、HTMLソースを直接書かなくても様々なウェブページを作成できます。しかし、HTMLソースを自力で記述できれば、もっと自由自在にウェブページを作れるようになります。ぜひ、HTMLソースを直接編集できる環境を整えて、たくさんのテクニックを試してみて下さい。

【関連記事】