本講座ではHTMLタグの意味を学んでいきます。

基本的なHTMLタグを知ろうでは特によく使うタグを取り上げ、その使い方を見てきました。
本講座で取り上げるタグは、タグが持つ意味に注目して見ていきます。

ol

  • olは"ordered list"の略
  • 順序のあるリスト

使いどころ

olタグは「順序のある」というところがポイントです。
"手順"を表すようなリストでは、単なるリストを表すulタグよりもolタグの方が適しています。

<ol>
  <li>紙を置く</li>
  <li>鉛筆を持つ</li>
  <li>絵を書く!!</li>
</ol>

ulタグは先頭に点(・)が打たれますが、olタグを使うと番号が振られます。

ulタグとolタグの表示の違い

dl

  • dlは"description list"の略
  • 説明リスト
  • 直下にはdtタグとddタグのみ配置可能

タグ構成

dlタグは「説明リスト」というように、単語や説明したい文章を先に取り上げ、それに対しての説明を書く、という2段階で構成されます。

dt要素に単語や説明したい文章を、dd要素に説明文を記述します。
このため、dl要素の中は必ずdtddという形になります。

dtdddtdd ... というように、dtタグ・ddタグは連続して複数が可能です。

  • dtは"description term"の略、説明用語(文章)
  • ddは"definition (or) description"の略、説明や定義

使いどころ

何かを端的に説明したい時に使うと良いでしょう。

<dl>
  <dt>Gieerの目的は?</dt>
  <dd>ゼロからWEBエンジニアを目指すあなたを支援することです!</dd>
  <dt>Gieerの運営者は?</dt>
  <dd>nkztです!</dd>
</dl>

上の例は"文章" → "説明"という流れですが、"用語" → "説明"という流れの場合にはdtタグの中でさらに用語をdfn(definition)タグで囲むと良いです。
これにより単なる"説明リスト"ではなく、"(用語の)定義リスト"という意味合いが強くなります。

<dl>
  <dt><dfn>Gieer</dfn></dt>
  <dd>ゼロから独学でWEBエンジニアを目指すあなたを支援する技術提供ブログ</dd>
  <dt><dfn>nkzt</dfn></dt>
  <dd>Gieer運営者の苗字の子音をアルファベットで表記したもの</dd>
</dl>

p

  • pは"paragraph"の略
  • 段落

使いどころ

pタグは主に文章を記述する時に使用します。
段落を表すのについbrタグを連続して使ってしまいがちですが、そういった場面ではpタグを分けて記述するのが望ましいです。

<p>
  Gieerはゼロから独学でWEBエンジニアを目指すあなたを支援する技術提供ブログです。<br>
  nkztとアシスタントのイアで運営しています。<br>
</p>
<p>
  GieerではWEBに関わる言語の講座を公開しています。<br>
  順に取り組むことで、プロの現場でも通用する技術を身につけていきます。<br>
</p>

emstrong

  • emは"emphasis"の略
  • strongはそのまま"strong"
  • どちらも強調

使いどころ

emタグもstrongタグも文章を強調するためのタグですが、強める程度によって使い分けます。
emタグは文章の中で何を重きを置くか、strongタグはとにかく強める、といった具合です。

「WEBエンジニアは楽しいです!」という文章を例に考えてみましょう。

  • 様々なエンジニア職の中でもWEBを強調したい
<em>WEB</em>エンジニアは楽しいです!
  • 様々な職業の中でもWEBエンジニアを強調したい
<em>WEBエンジニア</em>は楽しいです!
  • WEBエンジニアが楽しいことを伝えたい
WEBエンジニアは<em>楽しい</em>です!
  • ページ内の重要ワードをWEBエンジニアに設定している
<strong>WEBエンジニア</strong>は楽しいです!

timeaddress

  • 日付・問い合わせ先

使いどころ

どちらも単純そうなタグですが、タグ名の通りに時間や住所をすべてこのタグで囲むのは望ましくありません。

timeタグはブログ記事の公開日などに使用すると良いでしょう。

公開日:<time datetime="2018-03-10">2018年3月10日</time>

また、timeタグにはdatetime属性が必要で、機械が読み取り可能な2018-03-10のような形式で値を設定する必要があります。

addressタグはサイトの問い合わせ先などに使用すると良いでしょう。
問い合わせ先になり得るものであれば何を含めても構いません。

お問い合わせは<address><a href="url">Twitter</a></address>へお願いします。

まとめ

本講座では

  • HTMLタグの意味

について学びました。

全てのHTMLタグに意味があることを知り、正しくタグが使えると、きっと重宝されるWEBエンジニアになれますよ!

次の記事

これまでの記事

隠します!
Loading...