HTMLタグで覚える英単語(13):article、aside、h1〜6、nav、section

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

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


今回はarticleやasideなど、セクションに関連するタグ(要素)の1回目です。

<article>

<article>はそのままarticleで、「記事」という意味の名詞です。

<article>は、それ自体として完結している情報のセクションを示す際に使います。ひとまとまりで配信したり再利用したりできる情報です。

なおarticleという英単語には、「記事」以外にもいくつか意味があります。法律では「条項」、英文法では「冠詞」です。読んでいる文書の分野によって意味が異なるので、注意しましょう。

▼ HTMLのサンプル

<article class="bigsix-game-today">
  <h1>今日の六大学野球結果</h1>
    <p>法大 5-1 明大</p>
    <p>早大 8-0 東大</p>
</article>

▼ 実際の表示

今日の六大学野球結果

法大 5-1 明大

早大 8-0 東大

<aside>

<aside>もそのままasideです。名詞で「余談」、副詞で「脇に」や「別にして」の意味です。

「余談」が示すように、本文とは直接関係のない話題を入れる際に使われる要素です。

▼ HTMLのサンプル

<p>芥川龍之介は、明治25年(1892年)に東京に生まれた。第一高等学校を卒業すると、東京帝国大学に進学する。</p>
<aside>【PR】電気代を大幅にカットできる最新エアコンが登場!</aside>
<p>在学中の大正4年(1915年)、「羅生門」を『帝国文学』に発表する。その翌年には「鼻」が『新思潮』に掲載される。</p>

▼ 実際の表示

芥川龍之介は、明治25年(1892年)に東京に生まれた。第一高等学校を卒業すると、東京帝国大学に進学する。

在学中の大正4年(1915年)、「羅生門」を『帝国文学』に発表する。その翌年には「鼻」が『新思潮』に掲載される。

<h1>〜<h6>

<h1>などの「h」は、headingのことです。headingはページや章などの「見出し」という名詞です。

よく似た単語に「header」がありますが、こちらはページ上部の余白に書かれた情報を指します(ただし「見出し」の意味もあるとする辞書も)。

▼ HTMLのサンプル

<h1>近代文学</h1>
日本の近代文学を概観する。…
<h2>明治時代</h2>
文学史的に言うと、近代文学は明治時代から始まる。…
<h3>二葉亭四迷</h3>
真に近代的な小説となったのは、二葉亭四迷の『浮雲』だった。…

<nav>

<nav>は「navigation」の略です。navigationは「ナビゲーション、移動」という名詞で、プログラミング必須英単語600+のアドバンスト300の英単語に入っています。

一般英語としては「航海、航空、(乗り物の)誘導」といった意味があります。

<nav>は、メニューや目次など、ナビゲーション用のリンクが入るセクションに用いられます。

▼ HTMLのサンプル

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">製品</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

▼ 実際の表示

<section>

<section>はそのままsectionです。「セクション、部分」という名詞で、プログラミング必須英単語600+の前提英単語100に入っています。

<section>は汎用的なセクションに用いられます。専用のセクションは上記のarticle、aside、navで、これらに該当しない場合に<section>を使います。

▼ HTMLのサンプル

<h1>当社について</h1>
<section>
  <h2>当社の歩み</h2>
  <p>当社は昭和50年(1975年)に東京都江東区で創業しました。…</p>
</section>
<section>
  <h2>役員紹介</h2>
  <ul>
  <li>代表取締役社長  田中一郎</li>
  <li>取締役専務    山田花子</li>
  <li>…</li>
  </ul>
</section>

英単語まとめ

  • article【名詞】記事
    • 法律では「条項」、英文法では「冠詞」の意味も
  • aside【名詞/副詞】余談/脇に、別にして
  • heading【名詞】見出し
    • よく似たheader(ヘッダー)はページ上部の情報のこと
  • navigation【名詞】ナビゲーション、移動
    • アドバンスト300
  • section【名詞】セクション、部分
    • 前提英単語100

[筆者紹介]

西野 竜太郎

Ryutaro Nishino

翻訳者/情報技術者/IT英語専門家

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

リンク:ウェブサイトTwitter

Profile Picture