no-image

テキスト

a/リンク

ハイパーリンクタグ。

結果

トップページへ戻る

解説

<a>タグは、リンクを意味するHTMLの中でも、最も重要視したいタグのひとつです。

全ての要素を解説したいところですが、重要と思われるものだけを取り上げて解説していきます。

<a href="#アンカー名(ローマ字)">ページの最上部戻る</a>
→「アンカーリンク」。同じページ内でリンクを移動させる方法。HTML5ではアンカーリンク先は「<a name>」ではなく、「<span id="アンカー名(ローマ字)">」のように、「id」にすれば大丈夫です。

<a href="http://○○" target="_blank">リンク</a>
→ブラウザの新規ウィンドウを立ち上げてリンクを表示する。

<a href="http://○○" target="_parent">リンク</a>
→フレーム内のHTMLから、大元のページにリンクを表示する。

<a href="http://○○" target="_top">リンク</a>
→ひとつ上の階層のフレームを取り払う「_parent」に対し、こちらはどんなに深い階層のリンクからも最上部のページにリンクを表示する。

<a href="http://○○" target="_self">リンク</a>
→現在のウィンドウに表示。デフォルト値。

<a href="http://○○" target="オリジナルの名前(ローマ字)">リンク</a>
→フレームの名前が指定してある場合、そのページへリンクを反映する。

q/引用フレーズ

「引用文」を指定する。

結果

HTMLは楽しく学んでいくことが大切です。
私が初めて使ったときは、まるで魔法使いにでもなったかのような
感動がありました。

解説

<blockquote>はセクション単位での引用であることに対して、<q>は文章単位での引用を意味します。

IEでは<q>~</q>をカッコ書き(「」)として表示されます。

また、<blockquote>と同様に<q cite="引用元のURL">を書くことも可能です。

cite/引用元URL

引用した作品名。

結果

「楽しいHTML」
HTMLは楽しく学んでいくことが大切です。
私が初めて使ったときは、まるで魔法使いにでもなったかのような
感動がありました。

解説

<q>と使い方が似ていますが、こちらは引用した作品のタイトルに使います。

dfn/

定義語を表すタグ。

結果

ITとは、コンピューターのデータ通信に関する技術の総称を表します。

解説

定義語を表します。<abbr>と混合した使い方もあります。

その場合は<dfn><abbr title="Information Technology">IT</abbr></dfn>となります。

abbr/

略語。

結果

携帯電話は スマホが便利です。

解説

省略を意味するタグです。「title」には省略する前の言葉を入れます。

time/

日付、時間。

結果

更新日時:

解説

<time>は、グレゴリオ暦における日付を表します。
ブラウザや検索エンジン巡回ロボットが、ページや項目の更新日時等を正確に読み取ることができるようにする為に用意されたタグです。
日時フォーマットは「2012-1-10T10:56:02+09:00」のように、日付と時間の間には「T」をはさみ、タイムゾーン・オフセットをする場合は「+09:00」というようにします。
ただし、日本における場合、「10時56分」のほうが通じやすいです。
その時のために<time>に、「datetime」を加えます。
その場合は<time>で囲む中身はどんな表記でもかまいません。
「pubdate」は、直近の<article>の事を指します。
もし、<article>で囲まないのであれば、ページ全体の更新時間ということになります。
以下にマークアップ例を紹介します。

  • <time>2012-1-10T10:56:05+09:00<time>
  • <time>2012-1-10T10:56:05<time>
  • <time>2012-1-10T10:56<time>
  • <time>2012-1-10<time>
  • <time>10:56:05<time>
  • <time>10:56<time>
  • <time datetime="2012-1-10">いちがつとうか<time>
  • <time datetime="15:00">おやつの時間<time>

address/住所

連絡先を表す。

結果

株式会社○○○○
住所/東京都渋谷区○○-○○ オフィスビル2F
電話/03-000-0000

解説

会社の住所などを意味します。

strong/重要性高い強調

重要性の高い部分を強調するタグ。

結果

ルールを守ることは重要です。

解説

太い文字の変化しますが、HTML文章的意味でも重要性が高いことを意味します。

em/強調

強調するタグ。

結果

ルールを守ることは重要です。

解説

太い文字の変化しますが、HTML文章的意味でも重要性が高いことを意味します。

strongと同じような使い方をしますが、こちらは文章の意味も変わってきます。

mark/ハイライト

強調表示(ハイライト)。

結果

HTML5は新要素だけでなく、これまでのHTMLやXHTMLもできる限り引き継いでいます 。

解説

<mark>タグは、Chromeなどのサポートされているブラウザでは、デフォルトでハイライトで表示されます。

サポートされていないブラウザでも、CSSを使うことで同じ効果を持たせることができます。

small/小さめ文字

小さな文字で表示するとき。

結果

Copylight © Tanaka. All right reserved.

解説

デフォルトでは、文字が小さくなります。

メインコンテンツに使用するものではなく、著作権表記などの部分に利用します。

b/太文字

ふと文字にする。

結果

囲むと太い文字になります。

解説

デフォルトでは、太くなります。
strongと同じような変化をしますが、意味的にこちらのほうが低いです。

i/イタリック文字

イタリック文字(斜め文字)にする。

結果

囲むとイタリック文字になります。

解説

デフォルトでは、イタリックになります。

sup/下付き文字

上付き文字にする。

結果

囲むと上付き文字になります。

解説

デフォルトでは、上付き文字になります。

sub/下付き文字

下付き文字にする。

結果

囲むと下付き文字になります。

解説

デフォルトでは、下付き文字になります。

code/コード文字列

コンピュータのコードを意味する。

結果

PHPスクリプトではincludeで外部ファイルを読み込みます。
また、変数は$sampleという使い方をします。

解説

コンピューターのコードを意味するときは<code>。

数式やプログラムの変数を意味するときは<var>を使用します。

samp/PC出力文字

プログラムの出力を意味する。

結果


エラー 106 (net::ERR_INTERNET_DISCONNECTED): インターネットに接続できません。

解説

Windowsのコマンドや、Linaxなどのシェルなど
様々な出力されたコメントをマークアップします。

kbd/ユーザー入力文字

ユーザーの入力を表すタグ。

結果

※全選択をする場合はCtrl+Aを押してください。

解説

ユーザーが入力するキー、またはシステムへの入力する全ての状況で使うことができます。

「続きを見る」など、キーボード以外でユーザーの意思を確認したい場合は、<kbd><samp>続きを見る</samp></kbd>と書きます。

br/改行

改行する。

結果

文字を改行したいときは
このようにするとできます。

解説

文字を改行するときに使います。よく使うタグのひとつです。

XHTMLでは<br />と書きますが、HTML5では閉じる必要は必須ではありません。

wbr/改行可能位置

改行しても良い位置の範囲。

結果

改行できない事例
kaigyousitai_kedo_konoyouni_eigonobaai_kaigyousarenai
改行できる事例
kaigyousitai_kedo_konoyouni_eigonobaai_kaigyousarenai

解説

長いURLの文字列は改行されません。

そのような時に、「改行してもいい範囲」を指定することができます。

bdo/文字表記方向

文字表記の方向指定をする。

結果

デフォルトでは左から右に文字は流れますが
左から右→に設定できます。

解説

単語や文字を鏡写しのように左から右に反映させることができるタグです。

ruby/ルビを振る

ルビを振る。

結果

檸檬れもん

解説

漢字など、難しい読みをする文章にルビを振ることができます。

<ruby>~</ruby>の間に、<rp>と<rt>の2種類のタグを利用します。

これらのタグはセットで使います。

<rt>は、ルビの内容。

<rp>は、ルビ非対応ブラウザで表示される内容です。
※HTML5では<rb>が不要です。

ins/追加テキスト

追加テキストの理由、時間。

結果

私はあの時心を揺さぶられました。
後に、あの人から連絡がありました。

解説

<ins>は、追加されたテキストを意味します。

更に、datetime(追加日時)、cite(追加した理由を示すURL)を指定できます。

対応ブラウザでは、下線で表示されます。

del/削除テキスト

削除テキストの理由、時間。

結果

私はあの時心を揺さぶられました。
後に、あの人から連絡がありました。

解説

<del>は、追加されたテキストを意味します。

<ins>と同じく、datetime(追加日時)、cite(追加した理由を示すURL)を指定できます。

対応ブラウザでは、訂正線で表示されます。