Tweet

Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは、水曜日のブログ担当の工藤です。

文字を打つタグには、様々なタグがあります。
リンクにしたり重要な分にしたり、時間を指定したり、ルビをふったり出来るタグが存在します。

テキストのhtml

<a>

ハイパーリンクを指定します。リンク先の指定はhrefで指定します。

<a href="#">ハイパーリンク</a>

ハイパーリンク

<em>

強調を表します。

<p>ここは<em>強調</em>したいです。</p>

ここは強調したいです。

<strong>

強力な重要性、深刻性、または緊急性を表します。em より強力な強調です。

<p>ここは<strong>非常に重要</strong>です。</p>

ここは非常に重要です。

<small>

免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。

<p><small>&copy;copyright</small></p>

©copyright

<s>

正確ではないか、もはや関連しないコンテンツを表します。

<p>こちらの商品は<s>通常価格１００円</s>特別価格５５円！</p>

こちらの商品は通常価格１００円特別価格５５円！

<cite>

本、新聞、エッセイ、詩、楽譜、歌、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、映画、演劇、オペラ、ミュージカル、展示、訴訟事例報告など、創造的な作品への参照を表す。

人の名前には使用できません。

<p>こちらが<em>●●監督</em>が作られた映画<cite>△△</cite>である。</p>

こちらが●●監督が作られた映画△△である。

<q>

他の情報源からの引用句・引用文であることを表す際に使用します。
引用元のURLがある場合は、site=””で指定する。
デフォルトでqタグには文頭と文末に””が追加されまが、””を付ける目的でqタグを使用するのは不適切な表現となります。

<p>こちらの<site>タイトル</site>の一文の<q site="#">引用文</q>は有名です。

こちらのタイトルの一文の引用文は有名です。

<dfn>

定義される用語を表します。

<dl>
	<dt><dfn>CSS</dfn></dt>
	<dd>ウェブページをスタイリングする言語です。</dd>
</dl>

CSS

ウェブページをスタイリングする言語です。

<abbr>

略語や頭字語であることを表します。

<p><abbr title="Cascading Style Sheets">CSS</abbr></p>

CSS

<time>

日付や時刻を正確に示します。
必ず使用しなければいけないわけではありません。ブラウザが理解出来るように日時を示すことが目的です。

<p><time>20:19</time></p>

20:19

<code>

プログラムコードであることを示します。

<code>
	$(function(){
		$(".red").css('color','red');
	});
</code>


$(function(){
$(".red").css('color','red');
});


<var>

変数であることを示します。

<p>下に<var>n</var>行隙間を空けます。</p>

下にn行隙間を空けます。

<samp>

プログラムによる出力結果のサンプルであることを示します。

<p><samp>要求された操作を完了できません。</samp></p>

要求された操作を完了できません。

<kbd>

ユーザーが入力する内容であることを示す

<p><kbd>お名前</kbd>を入力してください。</p>

お名前を入力してください。

<sub>

下付き文字を表します。

<p>3<sub>1</sub></p>

3₁

<sup>

上付き文字を表します。

<p>3<sup>1</sup></p>

3¹

<i>

声や心の中で思ったことなど、他と区別したいテキストを表します。

<p><i class="icon icon-facebook"></i>Facebook</p>

Facebook

<b>

文書内の注目させたいキーワードを表せます。
これよりも適したタグがあるならそちらが優先されるべきです。

<p>お客様の中に<b>お医者さま</b>はおられませんか？</p>

お客様の中にお医者さまはおられませんか？

<mark>

文書内の該当テキストを目立たせます。
ユーザーが目につきやすいようにするだけで、文章的に重要にさせる要素はありません。

<p><mark>こちらが目立ちますが</mark>こちらはめだちません。</p>

こちらが目立ちますがこちらはめだちません。

<ruby><rt><rp>

ルビをふりつけます。
rubyで囲んだ中ので、rtでルビを振ります。
rpは囲む文字を指定します。html5でrpは省略します。

<ruby>
	子守熊<rt>こあら</rt><br>
	子守熊<rp>(</rp><rt>こあら</rt><rp>)</rp>
</ruby>

子守熊こあら
子守熊(こあら)

<bdo>

アラビア語やヘブライ語などの文字表記の方向を右から左へ記述する時に指定します。
bqoをスタイリング目的で使用する場合は、CSSのdirectionタグを使ってください。

<span>

ひとつの範囲として定義する
spanはひとつの範囲として定義する時に使用します。
簡単に言うと、divのspan版です。

<br>

改行します。
brには閉じタグはありません。

<p>ここで<br>改行します。</p>

ここで
改行します。

<wbr>

改行しても良い位置を示します。
wbrには閉じタグはありません。
テキスト内で任意で改行を作ることができます。

終わりに

各タグにはデフォルトで用意されているスタイルが存在します。
リセットスタイルによっては、これらはリセットされてしまいますので注意が必要です。

タグの意味を理解し、正しいマークアップを身に付けましょう。

Tweet

Pocket

Related posts:

htmlのtable、表組みについて学ぼう インプットタグのタイプを知ろう Boostrapを使ってレスポンシブのグリッドシステムを扱ってみましょう 擬似クラスで作る動きのあるデザイン