中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
headとheaderの違いを正しく理解する
HTMLを学ぶときに最初に混乱しやすい言葉のひとつが「head」と「header」です。headは文書全体の情報の頭部を集める要素で、ブラウザに表示される内容ではありません。具体的には文字コードの指定、ページのタイトル、外部ファイルのリンク、メタデータを集める役割を持っています。headは<head></head>の中に配置され、ページをどのように解釈するかの情報を伝える役割です。通常、検索エンジンにも影響があり、適切なメタタグはSEOや表示速度にも影響します。たとえば、<title>タグで表示されるページの名前はこのheadの中にあります。本文の可視部分とは別の「裏側」の情報で、実際の画面にはそのまま出ません。
対してheaderはページ内のセクションを区切る見出しを意味します。ヘッダーはサイト全体を代表する大胆なタイトルではなく、ページ内の各セクションの先頭に配置される情報のまとまりを作る要素です。HTML5では<header>は文章の先頭近くに置かれ、ロゴ・ナビゲーション・検索ボックスなど、視覚的に表示される情報をまとめます。見た目としてはサイトの「頭」や「導入部」を作る役割で、読者が今どの話題を読んでいるかを把握しやすくします。
この二つの要素を混同しないことが大切です。headは文書の性質を決める裏方の情報を担い、headerは見せる情報のまとまりを作ります。実際のコード例としては、<head>の中にメタ情報、<header>の中にロゴやナビゲーションを配置する形です。必要な場合、同じページ内に複数のheaderを設置しても問題ありませんが、各headerはそのセクションの意味を明確にするよう心がけると読み手にも優しくなります。
| 用途 | 例 | |
|---|---|---|
| head | 文書全体の情報（メタ情報・外部ファイルの読み込み・タイトル等） | <head></head> |
| header | ページ内のセクションの導入部・見出しをまとめる | <header></header> |
実際の使い分けとよくある誤解
使い分けのポイントは「見せる部分と隠れる部分を分けること」です。headは検索エンジンの評価やブラウザ設定に影響するので、ここに不必要なスクリプトを入れすぎないようにします。headerは視覚的な部分なので、ロゴ、ナビゲーション、検索窓、あるいはそのセクションのタイトルなどをまとめるのが基本です。両方を正しく使い分けると、ページの構造が整理され、メンテナンスもしやすくなります。また、アクセシビリティの観点からも、headerを適切に使うことでスクリーンリーダー利用者が現在地を把握しやすくなります。
初心者のよくある誤解として「headとheaderは同じものだ」と思うケースがあります。実際にはheadは見えない情報を集める場所であり、headerは画面に表示される導入部です。具体的な書き方としては、<head>にはタイトルやスタイルシート、<header>にはページ内のロゴやナビゲーションを配置します。もし同じ機能を一つの要素でまとめてしまうと、意味づけが曖昧になり、後からの修正が難しくなることがあります。
このように、headとheaderはそれぞれ役割が異なる「部品」です。正しく使い分けるだけで、HTMLの読みやすさが向上し、ウェブサイト全体の品質も高まります。
友だちA: ヘッドとヘッダーの違いってどう覚えればいい？ 私: 実は頭と導入部の違いだよ。headは文書全体の裏方情報を集める箱で、サイトの名前、作成者、エンコーディング、外部ファイルのリンクを含む。ヘッダー(header)はページ内の見出しを並べる表側の部分で、ロゴやナビ、メニューが入ることが多い。だから headは表示されないけど重要、headerは表示される。コードではheadを<head>, headerを<header>と書く。実際に使い分けると、コードの意味がはっきりして、後で修正もしやすくなる。
ITの人気記事
