テキストの内容や意味で異なるＨＴＭＬの使い分け
要約：テキスト文章の中には、いろいろな文言が出てきます。例えば、他の文献などからの引用、著者名等々沢山あります。ＨＴＭＬ５では、文言によって、それがどういった種類や意味をもっているか、などの情報を検索エンジンに知らせたり、表示を変えたりするための各種のタグが用意されています。
ボタンで開始と終了タグをクリップボードにコピーできます。
ただ、現在(2017/12)ブラウザによって、表示がことなったり、対応していない場合があります。
- タグ
- 説明
- address
- 連絡先・問合せ先でメルアドやＨＰアドレス等で文中の住所に使うのは正しくない。
html
-
1234<address><p>連絡先（メール）<a href="mailto:info@hsample.com">info@samplehtmq.com</a></p><p><a href="../contact/">お問合わせフォーム</a>からメッセージを</p></address><address> </address>
- 表示例
-
連絡先（メール）info@samplehtmq.com
お問合わせフォーム>からメッセージを
- aside
- 余談・補足情報
- html
-
12345<p>健康を保つ３つの秘訣は、食事・運動・精神と言われています</p><aside><p>「未病」</p><p>中国古来の病気になる前の治療・・・</p></aside><aside> </aside>
- 表示例
健康を保つ３つの秘訣は、食事・運動・精神と言われています
- blockquote
- 他の情報源からの長めの引用・転載文。関連タグ<q>は、短め。
- html
-
1234<p>夏目漱石の<cite>吾輩は猫である</cite> の書き出しは、</p><blockquote><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p></blockquote><blockquote> </blockquote>
- 表示例
-
夏目漱石の吾輩は猫である の書き出しは、
吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
- cite
- 作品のタイトル
- html
-
1234<p>宮沢賢治の心に残る誌、</p><cite><p>雨ニモマケズ</p></cite><cite> </cite>
- 表示例
-
宮沢賢治の心に残る誌、
雨ニモマケズ
- del
- 削除したことの取り消し線。関連タグ：<s>は、訂正。
- html
-
12345<p>○○会議は、中止となりました。</p><del datetime="2017-12-01"><p>○○会議 会議室：５F－１</p><p>日時：2017/12/13 10:00～12:00</p></del><del> </del>
- 表示例
○○会議は、中止となりました。
○○会議 会議室：５F－１
日時：2017/12/13 10:00～12:00
- details
- 備考や操作手段などの詳細情報
- html
-
1234<details><summary>details使い方（クリックして下さい。）</summary><p>(1)sammaryタグの文字列をクリックすると、詳細が表示される。</p></details><details> </details>
- 表示例
details使い方（クリックして下さい。）
(1)sammaryタグの文字列をクリックすると、詳細が表示される。
- dfn
- 用語。title要素を入れると正式名称、<abbr>タグは、略称を意味する。
- html
-
12<p><dfn><abbr title="cascading style sheet">CSS</abbr></dfn></p><p><abbr title="cascading style sheet">cascading style sheet</abbr></p><dfn> </dfn>
- 表示例
-
CSS
cascading style sheet
- em
- 強調。
- html
-
1<p>好きなスポーツは、大相撲、<em>ゴルフ</em>、テニス。</p><em> </em>
- 表示例
好きなスポーツは、大相撲、ゴルフ、テニス。
- h1
- 見出し。<h1>は、ＳＥＯ対策として重要
- html
-
123456<h1>h1 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo</h1><h2>h2 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo</h2><h3>h3 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo</h3><h4>h4 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo</h4><h5>h5 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo</h5><h6>h6 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo</h6><h1> </h1>
- 表示例
-
h1 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo
注）h1表示は、font-size:26px;で表示。
h2 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo
h3 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo
h4 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo
h5 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo
h6 東京 とうきょう トウキョウ ＴＯＫＹＯ TOKYO ｔｏｋｙｏ tokyo
- ins
- 追加されたテキスト。
- html
-
12<del><p>○○公演チケット 販売中</P></del><ins datetime="2017-12-4">完売につき、販売を終了しました。</ins><ins> </ins>
- 表示例
○○公演チケット 販売中
- kbd
- 主にキーボード入力。kbd要素内にsamp要素を記述の場合：システム出力に基づいた入力。samp要素内にkbd要素を記述の場合：システムによって返された入力内容。
- html
-
1234<p>※ ２つのＫＥＹを入力する例</p><p>ウィンドウの再読込（Reload)は、<kbd><kbd>CTL</kbd>+<kbd>F5</kbd></kbd>を押す。</p><kbd> </kbd>
- 表示例
-
※ ２つのＫＥＹを入力する例
ウィンドウの再読込（Reload)は、 CTL+F5を押す。
- legend
- フォームの入力項目グループにキャプション。
- html
-
1234567<form><fieldset><legend>性別</legend><p><label><input type="radio" name="sex" value="male">男</label></p><p><label><input type="radio" name="sex" value="female">女</label></p></fieldset></form><legend> </legend>
- 表示例
-
- mark
- 引用文や別の文脈の文章などから目立たせたい箇所
- html
-
1234<h3><em>忖度</em> を検索すると</h2><p>他人の心おしはかること。また、おしはかって相手に配慮すること。「作家の意図を<mark>忖度</mark>する」「得意先の意向を<mark>忖度</mark>して取り計らう」。</p><mark> </mark>
- 表示例
-
忖度 を検索すると
他人の心おしはかること。また、おしはかって相手に配慮すること。「作家の意図を忖度する」「得意先の意向を忖度して取り計らう」。
- pre
- html等のソースコードを表示。一般的に、<code>タグを入れる。
- html
-
12345<pre><code><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta name="viewport" content="width=device-width,maximum-scale=1"></code></pre><pre> </pre>
- 表示例
以下の表示は、当サイトにWordPressプラグインの「crayon」がインストールされています。
12345<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta name="viewport" content="width=device-width,maximum-scale=1">
- q
- 他の情報源からの短めの引用・転載文。関連タグ：<blockquote>（長め）。
- html
-
12<p>松下幸之助は、一代で現パナソニックを築きあげた・・</p><p>多くの名言から<q>商売とは、感動を与えることである。</q>なるほど！</p><q> </q>
- 表示例
松下幸之助は、一代で現パナソニックを築きあげた・・
多くの名言から
商売とは、感動を与えることである。
なるほど！
- ruby
- ルビ（ふりがな）。子要素に<rt>タグを入れてルビを記述。
- html
-
12345678<ruby>忖<rt>そん</rt>度<rt>たく</rt></ruby><p>rubyを使えないブラウザへの対応</p><ruby>忖<rp>(</rp><rt>そん</rt><rp>)</rp>度<rp>(</rp><rt>たく<rp>)</rp></rt></ruby><ruby> </ruby>
- 表示例
-
忖度
rubyを使えないブラウザへの対応
忖 度
- s
- 既に正確でない、関係ない内容。打ち消し線を表示。関連タグ：<del>取り消し。
- html
-
12<p>謝恩価格：￥８，９５０</p><del datetime="2017-12-01"><p>販売価格：￥９，９８０</p></del><s> </s>
- 表示例
-
謝恩価格：￥８，９５０
販売価格：￥９，９８０
- samp
- コンピュータが返すメッセージ。2017/12現在、FirefoxとIEは、字体が変化無し、Chromeは小さく表示される。
- html
-
123<p>エクスプローラーでファイル名をクリックすると、<samp>ファイルが見つかりません。</samp>と表示されます。</p><samp> </samp>
- 表示例
-
エクスプローラーでファイル名をクリックすると、 ファイルが見つかりません。と表示されるが・・・
- small
- 免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目。
- html
-
123<p><small>Copyright © <a href="sample@sample.com">K.Nagai</a>, All Rights reseved.</small></p><small> </small>
- 表示例
-
Copyright © K.Nagai, All Rights reseved.
- strong
- 強い重要性。
- html
-
1234<p>パソコンが動いている時、<strong>絶対に電源ＯＦＦしないこと。</strong>ハードディスク故障に繋がります。</p><strong> </strong>
- 表示例
-
パソコンが動いている時、 絶対に電源ＯＦＦしないこと。 ハードディスク故障に繋がります。
- sub
- 下付き文字、特定の意味を持つ時のみ使用。例：化学記号など
- html
-
1<p>Ｈ<sub>２</sub>Ｏ</p><sub> </sub>
- 表示例
Ｈ２Ｏ
- summary
- 親要素「details」の要約・キャプション・説明。タグ<details>参照。
- html
-
<summary> </summary>
- 表示例
- sup
- 上付き文字、特定の意味を持つ時のみ使用。例：数式
- html
-
1<p>Ａ＝ａ<sup>2</sup>×ｂ<sup>2</sup></p><sup> </sup>
- 表示例
Ａ＝ａ2×ｂ2
- time
- グレゴリオ暦による日付や24時間表記の時刻を正確に示す際に使用。月日は２桁表記のこと。
- html
-
1<p>time を記述したのは、<time datetime="2019-08-03">2019-8-3</time><time datetime="2019-08-03">2019-8-3</time>
- 表示例
time を記述したのは、
＊ datetimeを記述し、中の月日は２桁表示しないと、W3C Validation エラーとなるため修正。