*

ウェッブ制作

Width =px

ホーム > 制作/編集・補助・メニュー概要 >
テキスト内容でHTMLタグの使い分け MENU 

テキストの内容や意味で異なるHTMLの使い分け

要約:テキスト文章の中には、いろいろな文言が出てきます。例えば、他の文献などからの引用、著者名等々沢山あります。HTML5では、文言によって、それがどういった種類や意味をもっているか、などの情報を検索エンジンに知らせたり、表示を変えたりするための各種のタグが用意されています。

ボタンで開始と終了タグをクリップボードにコピーできます。

ただ、現在(2017/12)ブラウザによって、表示がことなったり、対応していない場合があります。

  • タグ
  • 説明
  • address
  • 連絡先・問合せ先でメルアドやHPアドレス等で文中の住所に使うのは正しくない。
  • html

  • <address> </address>
  • aside
  • 余談・補足情報
  • html
  • <aside> </aside>
  • 表示例
  • 健康を保つ3つの秘訣は、食事・運動・精神と言われています

  • blockquote
  • 他の情報源からの長めの引用・転載文。関連タグ<q>は、短め。
  • html
  • <blockquote> </blockquote>
  • 表示例
  • 夏目漱石の吾輩は猫である の書き出しは、

    吾輩は猫である。名前はまだ無い。  どこで生れたかとんと見当がつかぬ。  何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  • cite
  • 作品のタイトル
  • html
  • <cite> </cite>
  • 表示例
  • 宮沢賢治の心に残る誌、

    雨ニモマケズ

  • del
  • 削除したことの取り消し線。関連タグ:<s>は、訂正。
  • html
  • <del> </del>
  • 表示例
  • ○○会議は、中止となりました。

    ○○会議 会議室:5F-1

    日時:2017/12/13 10:00~12:00

  • details
  • 備考や操作手段などの詳細情報
  • html
  • <details> </details>
  • 表示例
  • details使い方(クリックして下さい。)

    (1)sammaryタグの文字列をクリックすると、詳細が表示される。

  • dfn
  • 用語。title要素を入れると正式名称、<abbr>タグは、略称を意味する。
  • html
  • <dfn> </dfn>
  • 表示例
  • CSS

    cascading style sheet

  • em
  • 強調。
  • html
  • <em> </em>
  • 表示例
  • 好きなスポーツは、大相撲、ゴルフ、テニス。

  • h1
  • 見出し。<h1>は、SEO対策として重要
  • html
  • <h1> </h1>
  • 表示例
  • h1 東京 とうきょう トウキョウ TOKYO TOKYO tokyo tokyo

    h2 東京 とうきょう トウキョウ TOKYO TOKYO tokyo tokyo

    h3 東京 とうきょう トウキョウ TOKYO TOKYO tokyo tokyo

    h4 東京 とうきょう トウキョウ TOKYO TOKYO tokyo tokyo

    h5 東京 とうきょう トウキョウ TOKYO TOKYO tokyo tokyo
    h6 東京 とうきょう トウキョウ TOKYO TOKYO tokyo tokyo
  • ins
  • 追加されたテキスト。
  • html
  • <ins> </ins>
  • 表示例
  • ○○公演チケット 販売中

    完売につき、販売を終了しました。
  • kbd
  • 主にキーボード入力。kbd要素内にsamp要素を記述の場合:システム出力に基づいた入力。samp要素内にkbd要素を記述の場合:システムによって返された入力内容。
  • html
  • <kbd> </kbd>
  • 表示例
  • ※ 2つのKEYを入力する例

    ウィンドウの再読込(Reload)は、 CTL+F5を押す。

  • legend
  • フォームの入力項目グループにキャプション。
  • html
  • <legend> </legend>
  • 表示例
  • 性別

     

  • mark
  • 引用文や別の文脈の文章などから目立たせたい箇所
  • html
  • <mark> </mark>
  • 表示例
  • 忖度 を検索すると

    他人の心おしはかること。また、おしはかって相手に配慮すること。「作家の意図を忖度する」「得意先の意向を忖度して取り計らう」。

  • pre
  • html等のソースコードを表示。一般的に、<code>タグを入れる。
  • html
  • <pre> </pre>
  • 表示例
  • 以下の表示は、当サイトにWordPressプラグインの「crayon」がインストールされています。

  • q
  • 他の情報源からの短めの引用・転載文。関連タグ:<blockquote>(長め)。
  • html
  • <q> </q>
  • 表示例
  • 松下幸之助は、一代で現パナソニックを築きあげた・・

    多くの名言から商売とは、感動を与えることである。なるほど!

  • ruby
  • ルビ(ふりがな)。子要素に<rt>タグを入れてルビを記述。
  • html
  • <ruby> </ruby>
  • 表示例
  • そんたく

    rubyを使えないブラウザへの対応

    (そん)(たく)
  • s
  • 既に正確でない、関係ない内容。打ち消し線を表示。関連タグ:<del>取り消し。
  • html
  • <s> </s>
  • 表示例
  • 謝恩価格:¥8,950

    販売価格:¥9,980

  • samp
  • コンピュータが返すメッセージ。2017/12現在、FirefoxとIEは、字体が変化無し、Chromeは小さく表示される。
  • html
  • <samp> </samp>
  • 表示例
  • エクスプローラーでファイル名をクリックすると、 ファイルが見つかりません。と表示されるが・・・

  • small
  • 免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目。
  • html
  • <small> </small>
  • 表示例
  • Copyright © K.Nagai, All Rights reseved.

  • strong
  • 強い重要性。
  • html
  • <strong> </strong>
  • 表示例
  • パソコンが動いている時、 絶対に電源OFFしないこと。 ハードディスク故障に繋がります。

  • sub
  • 下付き文字、特定の意味を持つ時のみ使用。例:化学記号など
  • html
  • <sub> </sub>
  • 表示例
  • summary
  • 親要素「details」の要約・キャプション・説明。タグ<details>参照。
  • html
  • <summary> </summary>
  • 表示例
  • sup
  • 上付き文字、特定の意味を持つ時のみ使用。例:数式
  • html
  • <sup> </sup>
  • 表示例
  • A=a2×b2

  • time
  • グレゴリオ暦による日付や24時間表記の時刻を正確に示す際に使用。月日は2桁表記のこと。
  • html
  • <time datetime="2019-08-03">2019-8-3</time>
  • 表示例
  • time を記述したのは、

    * datetimeを記述し、中の月日は2桁表示しないと、W3C Validation エラーとなるため修正。