月影

日々の雑感

ブログ執筆のためのHTML完全ガイド：その３　すべてのページの土台 - HTML文書の基本構造

ブログ改良

第2章：すべてのページの土台 - HTML文書の基本構造

記事を書くたびに、毎回ゼロからHTMLを組む必要はありません。実は、どんなWebページにも共通する「お決まりの型」が存在します。

これをHTMLの「設計図」あるいは「ボイラープレート」と呼びます。

料理でいう「基本のレシピ」、手紙でいう「拝啓…敬具」の型のようなものです。この設計図から始めることで、時間を節約できるだけでなく、「文字化け」や「スマホ表示の崩れ」といった初心者が陥りがちな失敗を未然に防ぐことができます。

www.namuamidabu.com

すべてのHTMLに共通する4つの登場人物

この設計図は、主に4つのパーツで構成されています。それぞれが重要な役割を持っているので、一つずつ見ていきましょう。

① <!DOCTYPE html>

  • 役割: 「この書類は、最新ルールのHTMLですよ！」という宣言です。
  • HTML文書の一番最初に必ず書きます。これがないとブラウザが混乱して、表示が崩れる原因になることがあります。深く考えず、「HTMLを書くときのおまじない」と覚えておけば大丈夫です。

② <html>

  • 役割: <!DOCTYPE>宣言を除く、すべての内容を包む「封筒」のようなものです。
  • 通常、<html lang="ja"> のように lang="ja" という属性を付けます。これは「この封筒の中身は、主に日本語で書かれていますよ」と示すための、親切なラベルです。

③ <head>

  • 役割: ページに関する「裏方の設定情報」を格納する場所です。
  • ここに書かれた内容は、読者が直接見る画面には表示されません。しかし、ブラウザ、検索エンジン、SNSといった「機械」たちがページを正しく理解するために、非常に重要な情報が含まれています。

④ <body>

  • 役割: 読者が実際に目にするすべての内容が入る場所です。
  • ブログの文章、見出し、画像、リンクなど、記事のコンテンツはすべてこの <body> タグの中に書いていきます。

【最重要】2種類の「読者」を意識しよう

head と body の役割分担は、HTMLの最も大切な考え方です。

  • <head> → 機械（ロボット 🤖） が読む、裏方の設定情報
  • <body> → 人間（あなたの読者 🧑‍💻） が読む、表舞台のコンテンツ

優れたブロガーは、この2種類の「読者」を常に満足させる必要があります。<body> には人間が読みたくなる魅力的な文章を書き、<head> には機械が理解しやすい正確な情報を記述する。この両立が、多くの人に読まれるブログの秘訣です。

<head> に入る重要な設定たち

head の中でも、特にブログ運営で重要になる3つの要素を紹介します。

  1. <meta charset="UTF-8">
    • 役割: 文字化けを防ぐおまじないです。これを書いておけば、日本語はもちろん、世界中のほとんどの言語が正しく表示されます。
  2. <meta name="viewport" ...>
    • 役割: スマホ表示を最適化するための命令です。これを書くことで、スマホやタブレットで見たときに、文字や画像が小さくなりすぎず、端末の画面幅にピッタリ合った見やすいレイアウトになります。
  3. <title>
    • 役割: ページの「顔」となるタイトルを設定します。このタイトルは3つの重要な場所に表示されます。
      • ① ブラウザのタブ
      • ② Googleなどの検索結果
      • ③ ブックマークしたときの名前
    • 読者の興味を引き、検索エンジンに内容を伝える、SEOの観点からも極めて重要です。

コピーして使おう！ブログ用HTMLテンプレート

これまでの内容をすべて含んだ、ブログ記事用の「設計図」がこちらです。 新しい記事をHTMLで書くときは、まずこれをコピー＆ペーストして、そこから <body> の中に文章を書き始めてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ここにページのタイトルを記入</title>
</head>
<body>
    
</body>
</html>