コラム
HTMLは、Webページをどう表示するかをブラウザに伝えるための、いわば「指示書」のようなものです。難しそうに見えても、業務で使う範囲なら覚えるルールは3つ、よく使うタグは5つほどで十分対応できます。
この記事では、非エンジニアの方向けに、HTMLの基本とよく使うタグを分かりやすく整理します。目指すのは、HTMLを詳しく使いこなすことではなく、必要な場面で安全に触れるようになることです。まずは「安全なタグ」と「触らない方がよいタグ」を区別し、焦らず直せる状態を一緒につくりましょう。
目次
Webページは、人ではなくコンピュータに読んでもらう手紙のようなものだと考えましょう。その手紙に表示の指示を書き足す作業が、HTMLの役割だと考えるとイメージしやすいです。
たとえば原稿の一部に「ここは見出し」と赤ペンで指示を書く感覚は、HTMLのタグに似ています。<h2>や<p>のようなタグを付けることで、文章の役割をブラウザへ伝えられます。Chromeなどのブラウザはその指示を読み取り、見やすい画面として表示しているのです。
まず覚えたいのは、タグの形と順番に関する3つの基本ルールです。これを守るだけで、表示崩れやリンク切れのような初歩的ミスはかなり減らせます。
多くのタグは<開始タグ>と</終了タグ>で中身を挟む、サンドイッチの形で使います。強調したい文字を両側から包みます。
例：<strong>重要</strong>
タグの中に別のタグを入れるときは、外側に入れた順番どおりに最後まで閉じるのが基本です。交差して閉じる書き方は、崩れの原因です。
OK例：<div><p>お知らせ</p></div>
NG例：<div><p>お知らせ</div></p>
タグ名や記号はすべて「半角」で書き、全角文字を混ぜない運用を基本としてください。とくに全角スペースは「見えない敵」です。タグが効かない厄介な原因として起こりやすいです。
表示形式：見出しとして強調表示され、文章の区切りと話題がすぐ把握できます。
コピペ用コード：<h2>ここに見出し</h2>
ポイント：見出しタグを使うと、記事の内容を本の目次のように整理できます。読者が「どこに何が書いてあるか」をすぐ把握できるため、重要なテーマも伝わりやすくなります。h1はページのタイトルとして1ページに1回だけ使い、h1 → h2 → h3のように大見出し→中見出し→小見出しの順番で使うのが基本です。
表示形式：文章がひとまとまりに区切られ、読みやすい段落として表示されます。
コピペ用コード：<p>ここに文章を入れます</p>
ポイント：文章の話題が変わるときは、<br>ではなく<p>で段落を分けるのが基本です。<br>は単なる改行なので、文章の内容の変化までは整理されません。内容のまとまりを作りたいときは<p>を使うと、構造がわかりやすくなります。
表示形式：文字が太字になり、重要な言葉として視線を集めやすくなります。
コピペ用コード：<strong>重要</strong>
ポイント：読者が大事な部分をすぐ見つけやすくなります。ただし使いすぎると、どこが重要なのか分かりにくくなるため、本当に強調したい部分だけに使うのがコツです。
表示形式：リンク文字がクリックできる表示になり、指定したページへ移動できます。リンク先はhref=”URL”で設定したURLです。
コピペ用コード：<a href="URL">リンク文字</a>
ポイント：案内したいページへスムーズに誘導できます。別のサイトにリンクする場合はtarget=”_blank”を追加すると元のページを閉じずに閲覧できます。
例：<a href="移動先のURL" target="_blank">別タブで開く</a>
表示形式：画像がページ内に表示されます。表示する画像はsrc=”画像URLまたはパス”で指定します。画像URLは、サイトの画像管理画面やメディアライブラリからコピーできます。
コピペ用コード：<img src="画像URLまたはパス" alt="画像の説明">
ポイント：図解や手順を画像で見せることで、内容が直感的に理解しやすくなります。またalt=”画像の説明”は必ず入れましょう。画像が表示されない場合の代替テキストになり、検索エンジンにも画像の内容が伝わります。また、imgタグには終了タグはありませんので、</img>は不要です。
表示形式：項目が箇条書きのように列挙されます。
コピペ用コード：<ul><li>項目1</li><li>項目2</li></ul>
ポイント：特徴やメリットなど、複数の情報を整理して見せたいときに便利です。文章で並べるよりも内容が把握しやすくなります。
表示形式：項目が 1、2、3… の番号付きで順番に表示されます。
コピペ用コード：<ol><li>手順1</li><li>手順2</li></ol>
ポイント：番号は自動で振られるため、項目を追加・削除しても手動で番号を直す必要はありません。
ここからは、HTMLだけで簡単な装飾ができるコピペ用パーツを紹介します。
サイトのデザインやCSSの設定によって見た目が変わる場合があるため、実際に使う前に表示を確認しておきましょう。
表示形式：リンクがボタンのように見え、クリックされやすくなります。
コピペ用コード：
<a href="移動先のURL" target="_blank"
style="display:inline-block; padding:12px 18px;
border:1px solid #333; border-radius:6px;
text-decoration:none; font-weight:700;">
資料を見てみる
</a>ポイント：行動してほしいリンクが目立ち、導線をわかりやすく表示できます。
表示形式：注意点が枠で囲われ、見落とされにくいです。
コピペ用コード：
<div style="border:2px solid #d00; padding:12px 14px;
border-radius:6px;">
<strong>注意：</strong>ここに注意書きを入れます。
</div>ポイント：注意点や重要な条件など、特に見落とされたくない情報を強調できます。
ここでは、初心者が編集するとレイアウトが崩れる可能性があるタグを紹介します。これらのタグはページの構造やデザインに関わることが多いため、基本的には触らない方が安心です。
記事の編集などでは、テキストや画像など内容に関わる部分だけを変更するようにしましょう。
<div>はページ内に箱を作り、レイアウトの土台を支える役割を持つタグです。箱の中にさらに箱が重なる構造になりやすく、階層が深いほど影響範囲も広がります。そのため、閉じタグを1つ忘れるだけで、ページ全体の配置が大きく崩れることがあるのです。
初心者のうちは、<div>の中身だけを触り、<div>自体には手を入れない方が安全です。
<head>の中には、表示設定や読み込み情報など、サイト全体の動作にかかわる設定情報が含まれています。<script>の中はJavaScriptを記述する場所で、一文字の欠けでも機能停止につながることがあります。
見た目に変化がなくても裏側で不具合が起きるため、編集時はとくに注意が必要です。このタグを触る際は、必ず全文をメモ帳へコピーし、戻せる状態で作業を始めましょう。
<table>は表を作るのに便利ですが、列が増えると横幅が広がり、スマホで見切れやすいです。また、width=”1000px”のような固定幅指定は、画面サイズが変わると崩れることがあります。
固定するより、width=”100%”のように画面幅に合わせて伸び縮みさせる方が安全です。とくにスマホ表示も想定する場合は、見た目だけでなく閲覧環境の違いも意識しましょう。
画面が崩れると焦ってしまいますが、原因はたいてい直前に触った数行にあります。まずは深呼吸して、直前の編集箇所を見直してみましょう。ここではよくあるミスを3つに絞り、落ち着いて戻す手順を整理します。
【症状】
意図しない部分が太字になったり、レイアウト全体が大きく崩れたりします。
【対策】
まずは直前に触ったタグの </…> を探し、閉じタグが抜けていないかを確認します。変更した箇所の前後をまとめて見直すと、原因を早く見つけやすいです。
【症状】
タグがそのまま文字として表示されたり、装飾が正しく反映されなかったりします。目視では気づきづらいミスです。
【対策】
怪しい部分を一度削除し、半角モードで同じ内容を書き直しましょう。とくにコピペ後は、余計な空白が入っていないかも確認しておきます。
【症状】
リンクが効かない、画像が表示されないなど、一部の部品だけが動かなくなります。HTML全体ではなく、一部分だけ不具合が出るのが特徴です。
【対策】
href=”URL” のように、 “（ダブルクォーテーション）が左右セットになっているかを確認しましょう。
どうしても原因が見つからない時は、ブラウザの検証ツールで崩れた場所を探しましょう。Chromeなら、該当箇所を右クリックして「検証」を選ぶと開けます。
エラーが出ている箇所が赤く表示されたり、タグの親子関係が色分けされるため、その表示を頼りに閉じ忘れや入れ子のズレを見つけましょう。
実は、私たちが普段見ているWebサイトの情報は、HTMLタグによって役割ごとに整理されています。見出し、本文、リンク、画像などが区別されているため、データの意味を機械的に判断しやすくなるのです。
この構造を理解すると、ページ内のどこに何の情報があるかを、一定のルールとして捉えやすくなります。CoopelなどのRPAツールを使えば、「商品名（h2）だけ」を指定してGoogle SpreadsheetやExcelへ転記することなども可能です。
▶HTMLの仕組みを少し知るだけで自動化がもっと楽になる、株式会社生産者直売のれん会のCoopel活用事例はこちら
HTMLを理解することは、手作業で修正できるようになるだけの話ではありません。Webページの構造を把握できるようになると、修正作業のミスを減らしやすいのです。
さらに将来的には、「面倒な作業をロボットに任せる」ための土台づくりにもつながります。どこに見出しがあり、どこに本文があるかを理解できれば、自動化の指示も出しやすくなるのです。
まずはタグへの苦手意識をなくし、業務の効率化や自動化への第一歩を踏み出しましょう。
HTMLは怖くありません。<a>、<img>、<h1>、<p>、リストタグといった基本的なタグの意味を知っておくだけで、多くの場面で十分に対応できます。一方で、divやscriptのような危ないタグには、基本的に触らないのが安全です。まずはよく使うタグから少しずつ慣れていきましょう。