HTMLタグで覚える英単語(10):base、body、head、html、link、meta、style、title

プログラミングをしているとHTMLに触れる機会はよくあります。そういったHTMLタグ(<b>など)の名前から英単語を覚えてみましょう。

記事の英語難易度は「初〜中級」です。


今回はbodyやheadなど全体構造に関係するタグ名です。

サンプル全体

今回は構造に関わるタグ(要素)なので、HTMLのサンプルは冒頭でまとめて紹介します。

黄色いマーカー部分が今回取り上げるHTMLタグ、青いマーカーは補足説明で使う部分です。

▼ HTMLのサンプル

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="example.css">
        <title>サンプルのページ</title>
        <base href="https://progeigo.org/"></base>
        <style>
            p {font-size: 1.5em;}
        </style>
    </head>
    <body>
        <p>これが<a href="example.html">リンク</a>です。</p>
    </body>
</html>

なお構造のため、実際の表示例を見てもあまり有用ではありませんが、ブラウザーでは下記のように表示されます。

<base>

<base>は文字通り「base」です。baseは「基底、基部、土台」という名詞、または「基礎に置く」という動詞です。

base自体はプログラミング必須英単語600+に入っていませんが、「based」がベーシック300に含まれています。「ベースの、〜に基づく」という形容詞です。

base要素は、基底URLを指定するのに使います。base要素はhead要素内で指定します。基底URLを指定した後は、そこからの相対URLだけを書くだけで済みます。上記サンプルを見ると、base要素内で「https://progeigo.org/」と基底URLが指定され、本文中のリンク(a要素)にあるのは「example.html」だけです。もし基底URLを使わず、絶対URLで書くなら「https://progeigo.org/example.html」となります。

<body>

<body>も文字通り「body」です。

もちろん「体」ですが、IT関連では「本体、本文」という言葉が適している状況もよくあります。なおプログラミング必須英単語600+の前提英単語100に入っている名詞です。

body要素内には文書のコンテンツ(本文)が入ります。

<head>

<head>も文字通り「head」です。「頭」の他にも、「最上部」や「見出し」の意味もあります。

head要素には、文書のタイトルやスタイルシートなど、ブラウザーが読み込む情報(メタデータ)を書きます。bodyの前に置かれます(サンプル参照)。

また「header」というよく似たタグもあります。こちらはページやセクションの導入部分に置かれます。headerはプログラミング必須英単語600+のアドバンスト300に入っている「ヘッダー」という名詞です。

<html>

<html>はHTML(hypertext markup language)のことです。プログラミング必須英単語600+の頭字語30に入っている言葉です。

まず「hypertext」とは、関連部分にリンクが付いていて参照できるテキストのことです。「markup」はテキスト内に印(mark)を付けること、またはその印です。最後の「language」は「言語」という名詞で、前提英単語100に入っています。

html要素はHTML文書のルート(最上位要素)になります。この下に前述のheadやbodyを1つずつ置く構造になっています。

<link>

<link>はそのまま「link」です。

linkは名詞で「リンク」、動詞で「リンクする」で、ベーシック300の英単語です。

link要素はHTML文書と外部リソースとをリンクさせるのに使います。例えばスタイルシートのファイルなどです。サンプルの「example.css」の部分です。

<meta>

<meta>は「metadata」や「metainformation」のことです。

「meta-」は「上位の」や「変化の」を表す接頭辞です。そのためmeatadata(メタデータ)やmetainformation(メタ情報)は上位にあるデータ(”データのデータ”)を表します。

例えばmeta要素に指定する属性は、charset(文字コード)です。サンプルの「UTF-8」の部分です。文字コードはHTML文書というデータのデータだからです。

<style>

<style>も文字通り「style」です。「スタイル」という名詞で、プログラミング必須英単語600+の前提英単語100の単語です。

styleはさまざまな日本語の訳が該当しうる英語です。例えば、デザイン、文体、様式、品格、やり方といった日本語です。プログラミング関連文書では「スタイル」が適当なケースが多いですが、文脈的に違和感がある場合、別の日本語訳も検討してみましょう。

style要素内では、HTML文書のスタイルをCSSで記述します。サンプルの「p {font-size: 1.5em;}」の部分です。

<title>

titleもそのまま「title」です。「タイトル、題名」という名詞です。

titleも別の日本語訳が適切なことがあります。例えばMr.などの「敬称」や、Presidentなどの「肩書き」もtitleです。入力フォームなどでたまに目にします。すぐに「タイトル」とするのではなく、文脈に応じて日本語を選んでください。

title要素に記述したテキストは、ブラウザーのタイトルバーに表示されます。

英単語まとめ

  • base【名詞】基底、基部、土台
    • basedは「ベースの、〜に基づく」という形容詞でベーシック300
  • body【名詞】本体、本文
    • 前提英単語100
  • head【名詞】最上部、見出し
    • 似た単語headerは「ヘッダー」という名詞でアドバンスト300
  • HTML【名詞】hypertext markup language
    • 頭字語30
    • languageは「言語」という名詞で前提英単語100
  • link 【名詞/動詞】 リンク/リンクする
    • ベーシック300
  • style【名詞】スタイル
    • 前提英単語100の単語
  • title【名詞】タイトル、題名
    • 「敬称」や「肩書き」の意味も

[筆者紹介]

西野 竜太郎

Ryutaro Nishino

翻訳者/ソフトウェア開発者

訳書に「血と汗とピクセル」、著書に「アプリケーションをつくる英語」(第4回ブクログ大賞)、「ITエンジニアのための英語リーディング」、「ソフトウェア・グローバリゼーション入門」、「アプリ翻訳実践入門」など。
産業技術大学院大学修了(情報システム学修士)、東京工業大学大学院博士課程単位取得(専門は言語学)。TOEIC 985点。
東京通信大学外部講師。

リンク:ウェブサイトブログTwitter

Profile Picture