使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編

使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編

 

皆さん、コーディングしている時に使わないhtml要素ってありませんか?
僕はhtmlリファレンスを見るとコレ、全然使ってないなあ。なんて要素がかなりあります。
(上手に使ってる方はもちろんいらっしゃるのでしょうが、、、)

なので今日は自戒の意味も込めて、htmlの使ってない要素をピックアップし、使いどころを探っていこうと思います。

まずは大枠の仕分け

全て網羅するとなかなかの数になってしまうので必ず設定するもの・多用するものは割愛します。
主要要素をはぶいた上でひとまず大枠に分類し、枠に当てはまる要素をリスト化してみます。
大枠とするのは、

、、、、、埋め込み、テーブル、フォーム、ユーザー操作

こんな感じでしょうか、、、、結構あるな 汗
1記事で表現しきれないようであれば記事分けます。てか、分けます 笑

では、さっそく紐解いていきましょうか。

ヘッダーに記述するメタデータ関連要素

base要素は、相対パスに基準のURLを設定します、、、、
これだけだと意味わからんですよね 笑

header要素内に記述するんですが、記述した場所より下にある相対パスの要素に対して、baseで設定した文字を付与します。


<base href="http://www.example.com/">
<link rel="stylesheet" src="ここにbaseのhrefが入る/src/style.css">

公開しているサイトに使うことはそんなに無いでしょうが、ローカル環境でちょっとしたテストをしたい場合、本番環境に似た形でテストすることができます。
(テストのhtmlにbaseを記述して公開サイトのルートURLを引っ張ってくる)
もちろんテストのhtmlが相対パス指定の場合ですが。

文書に区切りをつけるセクショニング要素

bodyをはじめ、sectionやarticleなど、文書のまとまりを示す為に使用する要素ですね。
h1など見出し要素もこのくくりに入ります。

この中でもっとも使いどころに悩むもの、やはり

address要素ではないでしょうか。

まあ、使いどころというよりは囲み方に悩むといった方が正しいかも。

基本的にaddress要素内に含むのは、連絡先のみ。住所や更新日時など、連絡先とずれるものは入れません。
w3c wikiを見ると単文の連絡先リンクのみ。という形で表記してます。

しかし、その他オンラインマニュアルなどを見てみると、何やら住所っぽいものも入ってる気がします。

ますますくくる内容が不可解になってきますね。
で、調べてみると以下のような内容がW3cに記載してありました。

The address element must not be used to represent arbitrary addresses
(e.g. postal addresses), unless those addresses are in fact the relevant
contact information. (The p element is the appropriate element for
marking up postal addresses in general.)

これらのアドレスが実際に関連する連絡先情報でない限り、任意の住所(郵便番号など)を表すために住所要素を使用してはなりません。 (p要素は一般的に住所をマークアップするための適切な要素です。)

てことは連絡先となる住所(それ自体が連絡先リンクとなるもの)であれば含めてもよさそうですね。
まあ建物名はあっても住所を連絡リンクにすることはまずないでしょうけど。

以上から推測するとaddress要素に含めるのは、
「直接連絡先リンクとなる文章(文章の一部でも良い)で、住所や更新日時は含まない」
のがベスト。人名やメールアドレス、建物・店舗名あたりをリンクテキストにして使用するのがよさそうですね。

文書内のコンテンツを分類する要素

この文書はどの分類に該当するのか。を明示する要素がここの要素にあたります。
pタグとかul,ol,dlなど、多用する要素が多い部分ですね。

この枠だと分かりにくい要素というのはあまりありません。強いて言うならpre要素でしょうかね。
でもそのpre要素もコードを載せない文章の場合、そんなに使う場面は無いです。

テキストに意味付けをする要素

その名のとおりテキストが何を表しているのか明示する要素になります。心の声を表すステキな要素もここに、、、
ちょっと長いので、見出し付けて説明します。

em strong b markの違い
結構混同しやすい要素ですが、これも意味が明確に分かれています。
まあ分かれてなきゃ要素分けるハズもないので、当たり前っちゃ当たり前ですが。
要点は以下のとおり。

  • emは文脈の中で不可欠な部分に使用
    (どの単語に重きをおくか。といった感じ)
  • strongは重要性のある部分に使用
    (文章内でとにかく先に見て欲しい文章や単語に使う)
  • bは文書内のキーワードや製品名など、他と区別したいテキストに使用
    (強調ではない)
  • markは文章内で目立たせたい場所に使用
    (抑揚をもたせるために使うなど)

bは強調目的で使う文章ではないので、消去法で他に当てはまる強調要素がなければ使う。といった形が分類しやすい気もしますね。

プログラム系の内容を表す場合に使う要素codeやvar
これは文章内にコードや変数を入れたい場合に使用する要素ですね。
用途が限られているので、サイトの種類によっては一生使わないでしょう・・・

  • codeはこのブログでも使用してますが、preと組み合わせてコードを記載したい場合に使います。(pre > code > 内容)
  • varはxやyみたいな変数を区別するために使う(bar > 変数)
  • bは文書内のキーワードや製品名など、他と区別したいテキストに使用(強調ではない)
  • sampはコードの出力結果などを記載する場合に使います(よく見るブラウザ上の表示。みたいなやつ)
ちっちゃい小文字を付与する要素
該当する要素はsub(下付き),sup(上付き),ruby(ルビ)ですかね。
似たような要素なので混同しがちですが、sub,supとrubyは用途がまったく違うので注意が必要。

  • subは下付き文字なしでは意味が通らないものに指定する要素(xiみたいなの)
  • supはsubの逆で、上付き文字なしで意味が通らないもの(Mlleは未婚の女性を表すらしい)
  • rubyはそのままです。ルビ((おや

ちなみにrubyの指定方法はこんな感じになってます。

<ruby>親<rp>(</rp><rt>おや</rt><rp>)</rp>父<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
//rpでルビが対応してなかった場合に()付きで表示させるためのタグ
			

sub,supについては日本語表記ばらまず使う時ないです。ルビに関してもそこまで登場するものではないので、指定せず人生を終えることもあるかと思います。

意味が変更されて正確な情報でなくなった文章に付与するs要素
後述するdel要素に見た目がすごい似てます。でも、用途は違います。

s要素は削除した文章ではなく、正確でなくなった文章を囲うようにしないといけません。

宝くじを買ったので6億円当る準備をしています!

作品タイトルなどを示すcite要素
見出しにあるとおり、本とかゲームなんかのタイトルを囲います。人名は囲えないので注意。
略語なんかを囲うabbrとそれが用語であることを示すdfn要素
abbrは文章の中にある略語(ステマみたいなやつ)を囲います。その際title属性で正式名称を付与すると、データを明示できる要素です。
dfn要素は、そのabbrの内容が、用語である場合親要素の扱いで指定します(dfn > abbr)。
略語で無い場合はdfnにtitleを指定して使用。
文章内で日付や時刻を明示したい場合に使用するtime要素
文章内で日付や時刻を書きたくないけど、データとして明示したい。っていう時に使います。
例を挙げると、「ある晴れた日に…」という文章に指定した日付を付与するといった感じです。

<time datetime="2017-6-1">ある晴れた日</time>に...
		

まあ、この日雨でしたけどね。

ユーザーが入力する内容であることを示すkbd要素
これは正直指定する必要あるのか?って感じです。
例えば文章中の「Shiftキーを押してください」みたいな文章があるとします。
この中でキーボード操作してもらいたい部分を囲う(明示例文だとShift)ものなんですが、わざわざロボットに知らせる内容でもないし、いらないんじゃないのか?というのが率直な感想です。
改行位置を指定するwbr要素
wbr(閉じタグなし)を配置したところで折り返しの指定ができます。
が、レスポンシブを考慮する場合、使いどころは限られそうですね。
基本的に英文に対して使用することもふまえて、出番はなさそうです。

追加・削除した部分を示す要素

よくブログを閲覧してると、文章内に横線を引いた文を見かけることがあると思います。

それがdel要素。記載してあった内容を削除したいけど、修正履歴として文を残しておきたい場合に使います。

insはその逆で、新たに追加した部分に対して使用します。

上記二つはcite属性(変更についての説明があるURLなどを表記)とdatetime属性(変更日時を表す)を付与することができ、より明確に変更内容を表すことができるようになってます。

適切に要素を配置出来たら気持ちいいですね

ざっと説明した部分もありますが、掘り下げてくと、かなりのタグがあり、すべてを指定するとなるとかなりの労力ですね 泣
実務ではそれほど触れることない要素などもありますが、覚えておくことでロボットに伝える情報はより正確になりそうです。

 

htmlカテゴリの最新記事