HTMLやCSSのちょっと人には聞きづらい「基礎の話」を一から解説する本連載。今回は「HTMLを編集するときに気をつけたいこと」。書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野 祐東さんが解説します。みなさんの作業の困った！が解決されますように。
HTMLを編集するときに気をつけたいこと
既存のHTMLを書き換えてページの内容を更新するときに重要なのは「変えたいところだけ、ピンポイントで書き換えること」です。そのために押さえておきたいのは、HTMLの文法と、階層構造です。
今回は、これら押さえておきたいポイントの解説と、実際にHTMLのコンテンツを書き換える方法について学びます。
- そもそもページ更新ってどんな作業？
- HTMLタグの文法の基本
■HTMLドキュメントの基本的な構造
■HTMLタグの文法
■空要素 - HTMLの階層構造（ツリー構造）
■親要素・祖先要素
■子要素・子孫要素
■兄弟要素 - 実践！テキストを部分的に書き換えてみよう
■編集する場所のアタリをつける
■編集したら必ずブラウザで確認 - ページのタイトルを書き換える
- さいごに。
1. そもそもページ更新ってどんな作業？
既存のページを編集して更新する作業は、大きく5種類に分けられます。
・部分的にHTMLを編集する
・リンク先のページを書き換える
・画像を差し替える
・スタイルを変更する
今回は、ページに含まれる「テキストを書き換える」ことを中心に説明します。作業自体はそれほど難しくはありませんが、ほかの更新作業に役立つ知識も多いので、きちんと理解しておきましょう。
■「テキストを書き換える」とは、具体的にどんな作業？
ページのテキストを書き換える場合、具体的には大きく分けて2種類の作業があります。
1つは、タイトルや日付、見出し、文中に出てくる名前など、テキストの一部分を書き換える作業です。この場合、タグ（要素）内のコンテンツを書き換えることになります。すでに書かれているタグを消したり、書き換えたりすることはありません。
もう1つは、イベント情報やお知らせなどを丸ごと書き換えたり、追加・削除する作業です。この場合、複数の要素にまたがって編集することになる可能性が高く、すでに書かれているタグを編集したり、新たに追加したりといった作業が発生します。
そもそも、「タグ」や「コンテンツ」とはなんでしょう？また、こうした更新作業をするときは、HTMLの階層構造を把握しておくことが大事です。いま一度、HTMLの文法や構造への理解を深めておきましょう。
2. HTMLタグの文法の基本
1枚のHTMLファイルは、1ページのWebページになります。HTMLファイルに書かれた中身のことを「HTMLドキュメント」といいます。
■HTMLドキュメントの基本的な構造
ほとんどすべてのHTMLドキュメントは、次のような構造になっています。
```html
<!doctype html>
<html>
<head>
メタデータの部分。ページとしては表示されない
</head>
<body>
コンテンツの部分。ページに表示される
</body>
</html>
```
・DOCTYPE宣言
1行目にあるのが「DOCTYPE宣言」です。このドキュメントがHTMLであることを表しています。
・<html>タグ
2行目以降、HTMLタグが出てきます。<html>、<head>、<body>は、すべて「HTMLタグ」です。タグについてはあとで説明します。
2行目の <html>〜</html>は、囲まれた部分に書かれたソースコードが「HTML本体である」ことを示しています。<html>〜</html>の中には、<head>〜</head>と、<body>〜</body>が、この順番で含まれています。
・<head>タグ
<head>〜</head> には、このHTMLドキュメントのタイトルや、関連するCSSファイル、JavaScriptファイルへのリンクなど、HTMLドキュメント自体に関係する情報が書かれています。この、HTMLドキュメント自体に関係する情報のことを「メタデータ」といいます。メタデータはページには表示されません。
・<body>タグ
<body>〜</body> には、実際にページとして表示される部分が書かれています。
更新作業をするときは、ページのタイトルを変更したり、既存のHTMLファイルをコピーして新しいHTMLファイルを作る（＝新しいページを作る）などのケースを除き、<head>〜</head> 内を編集することは多くありません。主に<body>〜</body> の中の部分を編集します。
■HTMLタグの文法
HTMLドキュメントには、多くの「HTMLタグ」が含まれます。1つのHTMLタグは次のような構造になっています。
▲HTMLタグの文法
HTMLタグは、属性の値（図の「"」で囲まれた部分）とコンテンツを除き、すべて半角英数字で記述します。スペースも半角です。慣れないうちは全角でタグを書いたり、スペースを空けてしまったりして、正しく動かないことがあるので、注意が必要です。
以下では、図中に番号で示した各部分を解説します。
【1】タグ（【2】開始タグと【3】終了タグ）
▲タグ
「<」で始まり、「>」で終わる部分が「タグ」です。【2】「開始タグ」と【3】「終了タグ」で【4】「コンテンツ」を囲むのが、HTMLタグの基本的な文法です。
【4】コンテンツ
▲コンテンツ
開始タグと終了タグに囲まれた部分を「コンテンツ」といいます。コンテンツは、Webページとしてブラウザウィンドウに表示される部分です。逆に、タグ自体はブラウザウィンドウに表示されません。
コンテンツには、テキストが入ることもあれば、別のHTMLタグとそのコンテンツが入ることもあります。
【5】タグ名
▲タグ名
HTMLタグの役割は、【4】のコンテンツに「意味づけ」をすることです。意味づけとは、「このコンテンツは見出し」「このコンテンツは段落の文章」「このコンテンツは箇条書き」というように、コンテンツの性格や役割を定義することです。
【6】属性
▲属性
開始タグには「属性」がつくことがあります。属性は、タグに付加的な情報を追加するために使います。
たとえば図の「class」属性は、タグを「カテゴライズ（クラス分け）」して、「クラス名」をつけます。このclass属性は、おもにCSSでスタイルを適用するために使われます。
属性は多くの場合、【7】「属性名」と、クォート（「"」または「'」）で囲まれた【8】「値（属性値）」を、イコール（=）でつなげて記述します。
【9】要素
▲要素
タグとそのコンテンツをまとめて「要素」といいます。図のように、<p>タグで囲まれた、タグとそのコンテンツは「p要素」などと呼ばれます。
■空要素
終了タグがなく、コンテンツもないタグがあります。そうしたタグのことを「空要素」といいます。 代表的な空要素には次のものがあります。
・フォーム部品のテキストフィールドなどを表示する<input>
・<head>〜</head>の中に書かれ、CSSへのリンクやHTMLドキュメントの各種情報を記すのに使う<link>タグ、<meta>タグ
3. HTMLの階層構造（ツリー構造）
HTMLドキュメントは、多数の要素（タグとそのコンテンツ）で構成されます。
あるタグのコンテンツに別のタグが含まれることで、各要素は階層構造を作ります。この階層構造を、HTMLの「ツリー構造」といいます。
既存のHTMLを編集するときは、この階層構造を把握しておくことが大事です。
▲HTMLの階層構造（ツリー構造）の例
■親要素・祖先要素
ある要素から見て1つ上の階層にある要素を「親要素」、2階層以上、上にある要素を「祖先要素」といいます。
▲親要素と祖先要素
■子要素・子孫要素
ある要素から見て1つ下の階相違ある要素を「子要素」、2階層以上、下にある要素を「子孫要素」といいます。
▲子要素と子孫要素
■兄弟要素
ある要素と同階層にある要素を「兄弟要素」といいます。兄弟要素のうち、ある要素よりも上にある要素を「兄要素」、下にある要素を「弟要素」ということもあります。
▲兄弟要素
親子関係が入れ違う構造にしてはいけない
▲子要素は親要素のコンテンツ内に必ず収める
4. 実践！テキストを部分的に書き換えてみよう
それでは、実際にHTMLを書き換える例を見てみましょう。
まずは、コンテンツのテキストを書き換えるケースです。テキストを書き換えるだけなので、既存のタグを削除することはありません。
実習用の題材として、サンプルデータを用意しました。サンプルデータは次のURLからダウンロードできます。
https://www.r-staffing.co.jp/rasisa/wp-content/uploads/2025/02/sample.zip
ファイルを開くときは、ダウンロードしたzipファイルを展開します。
展開したファイルの「index.html」を右クリックして、メニューから［プログラムから開く］を選び、使いたいブラウザをクリックします。
▲ファイルの開き方
サンプルデータのindex.htmlをブラウザで開くと、次のようなページが表示されます。
▲サンプルデータ（ブラウザウィンドウを狭めて表示しています）
■編集する場所のアタリをつける
ページのテキストにある「3月26日発売開始」を、「3月29日発売開始」に変更してみます。
ページを更新する際はまず、「編集すべき場所」を探します。
HTMLのコードが短ければ目視でも確認できますが、複雑なページの場合、見つけるのは大変です。タグのコンテンツを書き換える場合に、手早く編集すべき場所を見つけるには、テキストエディタの検索機能が便利です。
配布データのindex.htmlをテキストエディタで開くと、次のようなHTMLが表示されます。
なお、この講習ではテキストエディタにVSCodeを使用し、VSCodeの操作方法を説明しています。VSCodeはここからダウンロードできます。
▲index.htmlをVSCodeで開いたところ
VSCodeで検索する場合は、［編集］メニュー─［検索］を選びます。
▲検索を開始する
検索ツールバーが表示されるので、検索したい語を入力します。 検索にヒットすると、HTMLソースコード上でハイライトされます。あとは、テキストを書き換えるだけです。
▲検索すると、ヒットした場所が表示される
検索・置換もできる
▲検索・置換の操作
■編集したら必ずブラウザで確認
HTMLを編集したら、必ずブラウザでファイルを開き、正しく変更されているか、不具合が起きている場所がないかを確認します。
5. ページのタイトルを書き換える
ページのタイトルを書き換えることもよくあります。ページのタイトルはPC向けのブラウザならタブのところ、スマートフォンのブラウザであればタブ一覧の画面で表示されます。 そのタイトルは、<head>〜</head>内にある、<title>タグのコンテンツとして書かれています。修正が必要なときは、<title>タグを探して、コンテンツのテキストを書き換えます。
▲<title>タグを探してコンテンツを書き換える
6. さいごに。
今回は、既存のページのコンテンツを書き換える、もっとも基本的な作業の仕方を取り上げました。
HTMLの要素のコンテンツを書き換えるのは、タグの書き換えや追加・削除をする必要がないため、比較的簡単です。
それでも、テキストの編集作業が、「1つの要素のコンテンツ内に収まるのかどうか」を判断する上で、タグの文法やHTMLドキュメントの構造を把握しておくことは重要です。
次回は、タグの書き換えを伴う、より複雑な編集作業を、実例を交えながら紹介する予定です。ブラウザの開発ツールの使い方も解説します。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
