「プログラミングでは英語が使われている。」ならば、プログラミングと英単語を一緒に勉強すれば、一石二鳥のスキルアップが叶うのでは？！という試みの新連載がはじまります。
本連載ではHTMLに登場するプログラミング英単語の「意味」について学びます。理解を助ける語源や派生語も解説しています。英単語もプログラミングも、ただ覚えるのではなく、納得しながら身になる知識を増やしていく。その手助けとなればうれしいです。
今回は「ウェブページを構成するタグ」から4つの英単語を取り上げます。一見簡単そうな単語も、意外と混乱する関連語があったり...？
コーディング初心者の方や、楽しく英語を学び直したい方にもおすすめです！
また、アンケートにご協力いただいた方の中から抽選で5名の方に、『現場で困らない! ITエンジニアのための英語リーディング』西野竜太郎著（翔泳社）をプレゼント！詳細は記事の最後をご覧ください。
プログラミング英単語はたくさんあるので、必須度の高いものから効率的に勉強することも大切です。
まずはコードとブラウザーでの表示をみてみよう！
今回は、ウェブページを構成するのに用いられる要素（タグ：tag）に現れる英単語を見てみます。取り上げるのは、section、div（division）、h（heading）、headerの4つです。
まずサンプルのHTMLコード（図1）と、実際にそれがブラウザー上でどう表示されるのか（図2）を確認しましょう。今回取り上げる要素名は黄色でハイライトしています。補足として取り上げる要素名はピンク色です。
▲図1：サンプルのHTMLコード
▲図2：サンプルのブラウザー表示
1. section
まずは「section（セクション）」です。sectionは「区切り」、「区域」、「部門」といった意味のある名詞です。
語源で言うと、sectionの「sec-」には「切る」という意味があります。「区切り」にはまさに「切」という言葉が入っていますね。
語源が同じ英単語に「sector」や「segment」があります。sectorは「（ハードディスクの）セクター」や「（産業の）部門」、segmentは「（ネットワークの）セグメント」や「区分」です。語源が同じなので、意味的にも似ています。sectorやsegmentはやや難しい言葉ですが、余力があれば併せて習得してもよいでしょう。
★sectionは「プログラミング必須英単語600+」の「前提英単語」に登場する単語です。つまり、前提として習得しておくべき重要な単語なので、ぜひ身につけておきましょう。
HTMLの要素として、sectionは意味的なまとまり（セクション）を作るのに用いられます。例えば何らかのテーマを扱った章のようなまとまりです。
サンプルのブラウザー表示では図2の黄色で塗られた区域が該当します。
2. div（division）
次に「div」です。divは「division（ディビジョン）」の略で、「分割」、「区分」、「部門」といった意味がある名詞です。
divisionの動詞は「divide（ディバイド）」で、「分ける」や「分割する」です。「divi-」まで同じなので、もし知らなかったらこの機会に覚えてしまいましょう。
divisionには「割り算」の意味もあります。そのため「÷」の記号はdivision signと呼ばれます。また、プログラミングをやっていて「division by zero」のようなエラーに遭遇した経験のある人もいるかもしれません。これは「ゼロ除算」、つまりゼロで割ることです。ゼロで割り算をしてはいけない決まりなので、エラーになるのです。
divはHTML要素としては、汎用的に使われる入れ物（コンテナー）です。CSSでスタイルを適用するようなケースで用いられます。
図2のサンプルで青色に塗られた部分がdiv要素です。
3. h（heading）
続く「h」は「heading（ヘディング）」を略したもので、headingは「見出し」という名詞です。書籍でいうと、章や節のタイトルです。ぱっと見て分かるように、head（頭）からできた言葉です。章や節のようなまとまった文章の頭（＝見出し）となるので、headingと呼ばれます。
HTMLでhは見出しになります。「h1」から「h6」のようにhの後に数字が付き、h1が最も高いレベル、h6が最も低いレベルを表します。
図2のサンプルで「h1の見出し」、「h2の見出し」、「h3の見出し」と表示されている3か所です。レベルの高いh1が一番大きく表示され、h2、h3の順に徐々に小さくなっているのが確認できます。
4. header
最後に「header」です。headerは「ヘッダー」という名詞で、ページなどの冒頭に表示されるテキストです。例えば書籍の場合、ページ最上部に章タイトルやページ番号が印刷されていることがあります。書籍ではこの部分がヘッダーになります。前述のheadingと同様、headからできた言葉だと考えられます。
HTMLのheader要素は、ページ全体のヘッダーに加え、何らかのセクションのヘッダーを指定するのにも使われます。あるまとまりを持った文章の導入部分に用いられるわけです。
★headerは「プログラミング必須英単語600+」の「アドバンスト 300」に登場する単語です。
図2のサンプルを見ると、緑色で表示されている部分がheader要素です。ここではページ全体の導入部分に置かれています。
ちなみに、図1のサンプルの下の方に「footer」という要素もあります（ピンクのハイライト）。こちらは「フッター」で、著作権情報のようにページ末尾に示される情報が入ります。ご想像の通りfoot（足）からできた言葉で、headerとfooterで対になっていることが分かります。
head、header、headingで混乱？
最後に解説したのはheader、その1つ前はheadingと、よく似た英単語が出てきました。headerは「ヘッダー」、headingは「見出し」です。
ところがよくよく図1のHTMLのサンプルを見ると、上の方に「head」という要素もあります（ピンクのハイライト）。head要素はHTML文書のメタデータ（例：ブラウザーに表示されるページタイトル）を入れる部分です。一方、HTML文書の本文は「body」要素に入ります（水色のハイライト）。もちろんbodyは「体」なので、headとbodyで対になっています。
つまりHTMLには、head、header、headingと、「head」が関係する要素が3つもあるわけです。分かりにくいので、簡単にまとめてみます。
- head：HTML文書のメタデータが入る。一方、本文が入るのはbody
- header：ページやセクションのヘッダー。一方、末尾に表示されるのはfooter（フッター）
- heading：見出しのこと。HTML要素としてはh1からh6まである
ついでにもう1つ豆知識を紹介します。サッカーで、ボールを頭で飛ばすプレイを日本語では「ヘディング」と呼びます。しかし英語では「heading」ではなく「header」を使うのが一般的です。例えば「He scored with a header.」（彼はヘディングで得点した）です。headだけに頭が混乱しますね。
いかがでしたか？派生した単語も併せて覚えられるようになると、英単語の学習も捗りそうですね。次回は「ウェブサイトでテキストを見せるタグ」から英単語を紹介します。おたのしみに！
読者プレゼントのお知らせ！
アンケートにご協力いただいた方の中から抽選で5名の方に、『現場で困らない! ITエンジニアのための英語リーディング』西野竜太郎著（翔泳社）をプレゼント！皆さまのご応募お待ちしています。
※リクルートスタッフィングにご登録いただいている方が対象となります。
■応募締め切り
2026年3月12日（木）まで
■応募条件
リクルートスタッフィングにご登録いただいている方が対象となります。
■応募方法
こちらよりご応募ください。
※ご応募は期間中お1人様1回限りとなります。ご了承ください。
■注意事項
・リクルートスタッフィングのご登録情報と応募時にご入力いただく【氏名】【スタッフNo.】【メールアドレス】【生年月日】の4点が一致していない場合は、抽選の対象外となります。ご登録情報のご確認は、MyPageよりお願いしております。
・当選者の発表は、賞品の発送をもって代えさせていただきます。賞品の発送は、締め切り後1ヶ月以内にお送りいたします。
・賞品は、MyPageにご登録の「住所」にお送りいたします。変更がある場合は、締め切りの2026年3月12日（木）までに「登録情報の確認・変更」よりお手続きをお願いいたします。
・個人情報やご登録状況、抽選の結果、賞品発送状況に関するお問い合わせは、お答えいたしかねます。
・ご回答いただいた内容は、「エンジニアスタイル」の企画のみに使用いたします。
著書、翻訳者、情報技術者、IT英語専門家。米国留学を経て国内の大学を卒業後、2002年からフリーランスの翻訳者とソフトウェア開発者に。2016年から合同会社グローバリゼーションデザイン研究所の代表。2017〜2022年に日本翻訳連盟（JTF）の理事も務める。訳書に『リセットを押せ』、『血と汗とピクセル』、著書に『アプリケーションをつくる英語』（第4回ブクログ大賞）、『ITエンジニアのための英語リーディング』（翔泳社）（韓国語訳あり）、『ソフトウェア・グローバリゼーション入門』（インプレス）、最新刊に『ITエンジニアのための英語ライティング』（翔泳社）などがある。
