HTML入門｜初心者が１つのファイルでWebページを作る手順と確認方法
Webページを作ってみたいけれど、何をインストールし、どこにコードを書けばよいのか分からない。最初は、完成したサイトの仕組みをすべて理解しようとせず、短い文章を自分のパソコンのブラウザに表示するところから始めましょう。
この記事の目標は、HTMLファイルを１つ作り、見出し・文章・箇条書きを表示し、自分で変更できるようになることです。文章を書く、保存する、ブラウザで確認するという流れを、小さなページで体験します。
ここでは、パソコン上で独立したHTMLファイルを作成する方法を紹介します。WordPressの記事編集画面に、以下のサンプルのhtml要素やhead要素をそのまま追加する手順ではありません。
目次
１．HTMLは、文章や画像に構造を与える言語
HTMLは、Webページの内容と構造を表すマークアップ言語です。「ここは見出し」「ここは段落」「ここはリンク」といった意味を、要素を使って記述します。
例えば、文章を大きく見せたいという理由だけで見出しを使うのではなく、その文章が内容のまとまりを表す見出しかどうかを考えます。文字の大きさや色などの見た目は、主にCSSで調整します。
| 技術 | 主な役割 | 例 |
|---|---|---|
| HTML | 内容と構造を表す | 見出し、段落、箇条書き、リンク |
| CSS | 見た目を整える | 文字色、余白、配置 |
| JavaScript | 操作に応じた処理などを行う | 回答の判定、表示内容の切り替え |
今回のページには、CSSやJavaScriptを追加しません。HTMLだけで内容を表示し、それぞれの要素を変更すると何が変わるかを確かめます。
２．テキストエディタとブラウザを用意する
今回必要なのは、文字をプレーンテキストとして保存できるエディタと、Webブラウザです。このサンプルを手元で表示するだけなら、サーバー契約やデータベースの準備は必要ありません。
コードエディタを使うと、タグの色分けや入力補助を利用できます。ただし、特定のエディタやブラウザが必須というわけではありません。まずは、利用できる環境で編集と保存の方法を確認してください。
- 作業用のフォルダを作り、名前を「first-page」にする。
- テキストエディタで新しいファイルを作る。
- 次のサンプルを入力またはコピーする。
- first-pageの中に「index.html」という名前で、UTF-8のプレーンテキストとして保存する。
ファイル名は、末尾まで確認してください。index.html.txtになっている場合は、意図したHTMLファイルとして保存できていません。必要に応じて、パソコンの設定で拡張子を表示します。
また、文字の色や書体を含むリッチテキスト形式で保存しないように注意してください。ワープロ文書のファイル名だけを.htmlに変更しても、HTML文書へ変換されるわけではありません。
３．最初のHTMLページを作る
次のサンプル全体を、index.htmlに保存します。画像や外部ファイルを読み込まない構成なので、最初はこの１ファイルだけで確認できます。
保存したら、ブラウザの「ファイルを開く」などの操作でindex.htmlを開きます。ファイルをダブルクリックしたときにエディタが起動する場合は、「プログラムから開く」などでブラウザを選んでください。
表示されたページでは、主に次の３点を確認します。見た目を整える前に、書いた内容が意図した場所に出ているかを確かめましょう。
- ブラウザのタブに「私の学習ノート」と表示される。
- ページ内に大きな見出しと、２つの小見出しが表示される。
- 「今日取り組むこと」の下に、３項目の箇条書きが表示される。
サンプルの各部分は、何を指定している？
| 記述 | 役割 |
|---|---|
| <!doctype html> | 現代のHTML文書で使う宣言。ブラウザが標準モードで扱うために記述する。 |
| <html lang=”ja”> | 文書の主要な言語が日本語であることを示す。 |
| <head> | タイトルや文字コードなど、文書に関する情報をまとめる。 |
| <meta charset=”utf-8″> | 文書の文字コードをUTF-8として宣言する。 |
| <title> | タブなどに表示される文書のタイトルを指定する。 |
| <body> | ページの本文となる内容を記述する。 |
| <main> | そのページの主要な内容を表す。 |
viewportの指定は、モバイルブラウザで表示領域の幅を扱うための設定です。ただし、この１行を書くだけで、あらゆるページのレイアウトが自動的にスマートフォンへ最適化されるわけではありません。
４．文章を書き換え、変更と表示の関係を確認する
最初のページが表示されたら、サンプルの文章を自分の言葉へ変更します。一度にすべてを書き換えるより、変更する場所を絞ると、コードと表示の関係を確認しやすくなります。
| 変更する場所 | 試す内容 | 確認する結果 |
|---|---|---|
| title要素 | 「HTML練習ページ」に変更する | ブラウザのタブの名前が変わる |
| h1要素 | 「今日の学習記録」に変更する | ページ内の主見出しが変わる |
| li要素 | 項目を１つ追加する | 箇条書きが４項目になる |
| 最後のp要素 | 分かったことを書く | 振り返りの文章が表示される |
変更したら「保存→ブラウザを再読み込み」の順で確認します。今回のようにファイルを直接開く方法では、エディタで文字を書き換えただけで、ブラウザの表示も自動更新されるとは限りません。
見出しは、文字サイズではなく内容の階層で選ぶ
今回のサンプルでは、ページ全体の主題をh1、その中の項目をh2で表しています。項目をさらに分ける場合は、その下にh3を使うなど、内容の親子関係が伝わるようにします。
文字を小さくしたいという理由だけで、h2からh5へ飛ばすことは避けましょう。見出しの構造を保ち、文字サイズはCSSで調整すると、読み手にも内容のまとまりが伝わりやすくなります。
文章のまとまりには段落を使う
HTMLのソースコード内で改行しても、通常、その改行がそのまま画面へ反映されるわけではありません。文章を別の段落にしたい場合は、p要素を分けて記述します。
br要素は、文章の途中などで意味のある改行を入れるために使います。ページの余白を広げる目的でbrを何個も並べるより、段落を分け、余白はCSSで調整する方法を学んでいきましょう。
５．リンクと画像を追加する
基本の表示を確認できたら、別のページへのリンクや画像を追加してみましょう。ここからは、要素の役割に加えて、読み込み先を指定する「属性」も確認します。
リンクは、移動先とリンクの文章を指定する
次の記述を、サンプルのmain要素の中に追加します。href属性が移動先、開始タグと終了タグの間の文章が、画面に表示するリンクの内容です。
保存して再読み込みしたら、リンクを押して移動先を確認します。このリンク先を開くには、インターネット接続が必要です。「こちら」だけでなく、移動先が分かる文章にすることも意識してください。
画像は、ファイルの場所と代替テキストを指定する
自分で撮影した写真など、使用できる画像を用意し、index.htmlと同じフォルダに置きます。画像の実際のファイル名がstudy-photo.jpgの場合は、次のように指定できます。
src属性は画像の場所、alt属性は画像に代わるテキストです。サンプルの代替テキストをそのまま使うのではなく、実際の画像と、そのページで伝えたい内容に合わせて書き換えてください。
意味を持たない装飾だけの画像では、alt=””とする場合もあります。すべての画像に同じ説明を付けるのではなく、画像が担う役割から判断しましょう。
画像やCSSを別のフォルダへ整理すると、読み込み先の指定も変わります。ファイルの置き場所と相対パスの関係はこちらで確認できます。
Webページのファイル構成入門｜HTML・CSS・JavaScriptの役割と相対パス 記事を読む →６．表示がおかしいときに確認すること
表示が想定と異なる場合は、最後に変更した部分から確認します。保存先、開いているファイル、タグや属性の書き方を順番に調べ、原因を絞りましょう。
| 症状 | 確認すること |
|---|---|
| 変更が反映されない | 保存したか、再読み込みしたか、同名の別ファイルを開いていないか |
| コードが文字として表示される | 拡張子と保存形式、タグの記号が別の文字に置き換わっていないか |
| 日本語が文字化けする | UTF-8で保存したか、文字コードの宣言と一致しているか |
| 画像が表示されない | 実際のファイル名、拡張子、大文字・小文字、保存場所 |
| リンクが開かない | hrefのURL、引用符、インターネット接続 |
| 文章のまとまりがおかしい | 段落の分け方、要素の入れ子、終了タグの位置 |
すべての要素に終了タグがあるわけではない
今回使ったh1やp、aなどは、内容を開始タグと終了タグで囲んで記述します。一方、img、meta、brなどは「空要素」で、終了タグを書きません。
例えば、画像に対して</img>を追加する必要はありません。また、HTMLには一定の条件で終了タグを省略できる要素もありますが、学習の初期段階では、pやliなどの終了位置を明示すると構造を確認しやすくなります。
日本語の本文と、HTMLの構文を区別する
ページに表示する本文には、日本語や全角文字を使えます。「HTMLでは常に半角英数字しか使ってはいけない」ということではありません。
ただし、タグを囲む記号や属性を区切る記述には、HTMLの構文に合った文字が必要です。例えば、属性を区切る半角スペースを全角スペースへ置き換えたり、引用符を見た目の似た別の記号へ変えたりすると、意図どおりに解釈されないことがあります。
表示できても、正しく書けているとは限らない
ブラウザは、不正なHTMLに対しても一定の補正を行い、何らかの表示をすることがあります。そのため、「エラー画面が出ていないから、すべて正しい」とは判断できません。
例えば、段落の中へ見出しを入れるなど、要素の組み合わせに問題があると、書いたつもりの構造とブラウザが解釈した構造が異なる場合があります。見出しと段落を別の要素として並べ、入れ子を分かりやすく保ちましょう。
７．手元での表示と、Webへの公開は別の工程
パソコン内のindex.htmlをブラウザで開くことは、インターネットへの公開ではありません。通常、アドレスがfile://で始まる場合は、手元のファイルを表示しています。
他の人がURLからアクセスできるようにするには、Webで配信するための公開先を用意します。公開前には、掲載してよい情報だけが含まれているか、リンクや画像が正しく表示されるかも確認してください。
作ったページを公開するときは、公開先やURLの仕組みを確認しましょう。デプロイと、独自ドメイン・DNS・HTTPSの関係を整理しています。
Webアプリのデプロイ手順｜公開先・独自ドメイン・DNS・HTTPSの基本 記事を読む →８．よくある質問
HTMLのタグは、すべて暗記する必要がありますか？
最初からすべてを暗記する必要はありません。まずは、見出し・段落・箇条書き・リンクなど、使う機会のある要素から確認しましょう。調べた記述を試し、何を変えると表示が変わるか説明する練習が役立ちます。
スマートフォンだけでも学習できますか？
編集環境を用意すれば可能です。ただし、長いコードの編集や複数ファイルの管理では、パソコンの方が作業しやすい場面があります。スマートフォンでは短い例の確認から始めるなど、使える環境に合わせて取り組む範囲を決めてください。
AIにHTMLを書いてもらってもよいですか？
学習の補助として利用できます。生成されたコードを表示するだけで終えず、「見出しを追加する場所」「リンク先を変える場所」などを自分で探し、変更して確認しましょう。AIの説明にも誤りがあり得るため、不明な点は資料と照合してください。
次はCSSとJavaScriptのどちらを学ぶとよいですか？
作りたいものに合わせて選びます。文字色や余白を整えたいならCSS、クリックに応じて表示を変えたいならJavaScriptが候補です。今回のページを土台に、必要な機能を１つずつ追加すると、学ぶ目的を明確にできます。
９．作成後の確認チェックリスト
今回の学習では、完成したページの見栄えよりも、自分が加えた変更を確認できることを目標にします。次の項目を確認し、分からない部分があれば、その箇所だけもう一度試してみましょう。
- index.htmlを、意図したフォルダへ保存できた。
- titleとh1を変更し、それぞれ表示される場所の違いを確認できた。
- 見出し、段落、箇条書きを使い分けられた。
- 編集後に保存し、ブラウザを再読み込みできた。
- リンクの移動先や、画像の保存場所を説明できた。
- 手元で表示することと、Webに公開することを区別できた。
次の練習では、今日作ったページを残したまま、文章を１段落増やす、箇条書きの順番を変えるなど、小さな変更を加えてください。変更前に結果を予想し、実際の表示と比べることが、コードを読む練習にもなります。
参考資料
Learning Tools
記事を検索したい方はここから！
記事を検索
関連記事や、今の内容に近いテーマをすぐに検索できます。
例: AI / 情報Ⅰ / Python / 統計 / 資格 / 学習法