HTML講座 / HTML文書の基本構造

HTML文書は、先頭の<!doctype html>と、head・bodyを含むhtml要素を基本に構成します。headには文書の情報、bodyには見出しや段落などの主要な内容を書きます。

文書全体の形を確認する

次のコードを丸ごと保存すると、単独のHTMLファイルとして開けます。外側のhtmlの中にheadとbodyが並ぶ関係に注目してください。インデントは人が構造を読み取るための整理であり、画面上の字下げを指定するものではありません。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First HTML Document</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>This is the document body.</p>
  </body>
</html>

この例ではタブに「My First HTML Document」、ページ内に「Hello」と段落が表示されます。タブの題名と本文の見出しが別の要素であることを確認できます。

doctype・html・head・bodyの役割

例文が英語なのでlang="en"です。日本語の文書ならlang="ja"を指定します。これは翻訳命令ではなく、読み上げなどが文章の言語を判断する手掛かりです。一部のタグを省略できる場合もありますが、学習中は明示すると構造を確認しやすくなります。詳しい定義はHTML標準の文書要素を参照してください。

headに入れる三つの設定

meta charset="utf-8"は文字コードを宣言します。ファイル自体もUTF-8で保存し、宣言を文書の先頭近くに置きます。宣言だけ変えても、別の文字コードで保存したファイルを変換したことにはなりません。

meta name="viewport"は、モバイル端末のレイアウトに使う表示幅などを指定します。このタグだけで画像や表が自動的にレスポンシブになるわけではありません。titleはタブなどで使う文書タイトルで、本文のh1とは別です。各項目の置き場所と確認方法はタイトル・説明・言語・文字コードの設定でも扱います。

保存してブラウザーで開く

作業フォルダーを作り、エディターの新規ファイルに最初のコード全体を貼り付けます。ファイル名をindex.html、文字コードをUTF-8として保存してください。保存画面が自動で.txtを付ける場合は、ファイルの種類を「すべてのファイル」などに切り替えます。

ファイルをダブルクリックするか、ブラウザーを指定して開きます。タブの題名と本文を確認したら、titleの内容だけを変更し、保存後に再読み込みします。次にh1も変えて比較してください。ローカルファイルのfile://アドレスを他人に送っても、その人が自分のPC上のファイルを読めるようにはなりません。公開にはサーバーやホスティングへの配置が必要です。

意図した表示にならない場合

タグがそのまま表示されたら、実際のファイル名がindex.html.txtになっていないか確認します。変更が見えなければ、保存、再読み込み、編集したファイルと開いたファイルの場所を順に調べます。文字化けする場合はUTF-8での保存とcharsetの両方を確認してください。

白い画面だけになる場合は、開いているファイルを再確認し、body内に見出しと段落があるかを見ます。ローカルファイルの整理方法はMDNのファイルの扱い方、要素と属性の書き方はHTMLの文法が参考になります。