HTML(HyperText Markup Language)

よみ: エイチティーエムエル

Web ページの構造を「見出し・段落・画像・リンク」などのタグを使ってマークアップ(意味付け)する言語です。Web ページを家づくりに例えると、HTML は「骨組み・基礎」、CSSは「外装・壁紙」、JavaScript(JavaScript / JS)は「電気や水道などの動く仕組み」にあたります。装飾(CSS)を剥がしても、「どこに何が書かれているか」が分かる論理的な土台を作ることが、HTML の最大の役割です。

Web 担当者が意識すべき最重要ポイント

担当者に求められるのは「自分でコードを書くこと」ではなく、「構造が情報の意味と正しく一致しているか」をチェックすることです。見た目がデザイン通りでも、裏側の HTML 構造が崩れていれば、SEO(検索エンジンからの評価)やアクセシビリティ(視覚障害者の音声読み上げなど)に悪影響を及ぼし、品質が低いとみなされます。

実務での検収チェックリスト（担当者の観点）

納品物を確認する際は、以下の点に注意します。

見出しの階層：<h1> から始まり、<h2>、<h3> と論理的な順番になっているか(スキップしていないか)。
ボタンとリンクの使い分け：画面遷移は <a> タグ、アクション(送信など)は <button> タグで作られているか。
画像の代替テキスト(alt)：「何を伝えるための画像か」が alt 属性に適切に入力されているか。
意味のあるタグ(セマンティックタグ)：<div> タグの乱用ではなく、<article>(記事)や <nav>(ナビゲーション)など、用途に応じたタグが正しく使われているか。

Google Chrome の検証機能「Lighthouse(ライトハウス)」を使い、「SEO」「アクセシビリティ」などのスコアを見るだけでも、品質の目安になります。

よくある落とし穴(注意点)

「見た目さえデザイン通りなら HTML はどうでもいい」と思い込んでしまう。
デザインの再現度ばかりをチェックし、裏側の構造(タグ)の検収を怠る。
リンクのテキストを「こちら」という言葉だけにしてしまい、リンク先が何なのか分かりづらくなる。
HTML が雑なせいで、後の改修コストが跳ね上がったり、AI クローラーに正しく情報を読み取ってもらえなくなったりする。

言葉をよく利用する人

コーダー / フロントエンドエンジニア
デザイナー
Web 担当者(発注側)
SEO 担当者

会話上での使用例

納品物の検収でコーダーに構造を確認する場面

Web 担当者
今回のページ、HTMLの見出しの階層をチェックしてもらえますか。大見出しが複数になっていないか、見出しのレベルが飛んでいないか気になっていて。
コーダー
了解です。検証ツールでSEOとアクセシビリティのスコアレポートも一緒にお出しします。画像の代替テキストは全部の画像に付けてあります。
Web 担当者
助かります。装飾目的で代替テキストを空にした画像については、その判断理由もメモいただけると、後で別の人がレビューしやすくなります。

デザイナーがコーダーにマークアップを依頼する場面

デザイナー
このカードの一覧、見た目だけの箱で組まなくて大丈夫です。一覧という意味があるので、HTMLとしてはリストのタグで作ってください。
コーダー
了解しました。日付は日時用のタグでマークアップして、構造化データも合わせて入れておきます。