Web標準に基づいたXHTMLタグリファレンス

Web標準に基づいたXHTMLタグリファレンス

HTMLタグと言ってもいろいろ種類はあります。

正しいマークアップ方法、文書構造に基づいたコーディングが出来るようになる為にも今回は普段はあまり使わないけど知っておいた方が良いHTMLタグの一覧。意味を紹介したいと思います。

…ここからが続き

文字を上から線で消す del 要素

文字の上から線を引き、訂正を表す場合に使います。

<p><del>文字を消すまたは訂正する</del></p>

記述例

文字を消すまたは訂正する

ブログでたまに見かけると思います。

語句の略語を表す abber 要素

abbrは「abbreviation」の略で、abbr要素はその文字列が略語であることを示すために使用します。title属性によって、省略される前の完全な言葉を表現可能です。

<p><abbr title="abbreviation">abbr</abbr></p>

記述例

abbr

マウスオーバーすると title 内のテキストが表示されます。

pre 要素 code 要素

preは、「preformatted text」の略で、pre要素はソースコードなどをそのまま表示させるために使用します。

code要素はマークアップされたテキストが、プログラムなどのソースコードであることを表します。

pre 要素 code 要素は併用してマークアップされるのが一般的です。

<pre>
<code>
body	{ margin:0; padding:0; }
</code>
</pre>

記述例


body	{ margin:0; padding:0; }

HTMLやCSSを載せているサイトでよく見かけますね。

テキストの追記を表す ins 要素

insは「insert」の略で、ins要素は後から追加された部分であることを示すために使用します。insタグを取り除いても、前後文章の文法を正しくする必要があります。
ins要素は内側にブロック要素を含む場合はブロック要素となり、内側にインライン要素を含む場合はインライン要素となる特殊な要素です。

<p><ins cite="http://www.css-lecture.com/">追記:2009年3月、問題が解決出来ました。</ins></p>

記述例

追記:2009年3月、問題が解決出来ました。

ブログでたまに見かけると思います。

下付き文字を表す sub 要素

subは「subscript」の略で、sub要素は下付きの文字を表すために使います。

<p>CO<sub>2</sub></p>

記述例

CO2

上付き文字を表す sup 要素

supは「superscript」の略で、sup要素は上付きの文字を表すために使います。

<p>リチウムイオンのイオン式は、Li<sup>+</sup>と表します。</p>

記述例

リチウムイオンのイオン式は、Li+と表します。

短い引用文をインライン要素として表す q 要素

qは、「quotation」の略で、q要素はインライン要素として、引用されたテキストを表します。blockquote要素より短い文章の引用文に使用し、一般的なWebブラウザでは2重引用符で囲まれたブロックとしてレンダリングされます。

<p><q cite="http://www.example.com">q要素は比較的短い文の引用で使われます。</q></p>

記述例

q要素は比較的短い文の引用で使われます。

blockquoteを使う場合の方が多いですね。

追記:2009年3月27日、s 要素はWeb標準ではなかった為 del 要素に修正しました。

Comments

MIYA

MIYA

すっかり忘れていました…

修正しておきました。ありがとうございます。

2009年03月31日 11:54

kenji

kenji

じゅんさんご指摘の通りなので、タイトル画像も修正しておいた方がいいのではないでしょうかね?
めんどくさいでしょうけど^^;

2009年03月29日 02:26

MIYA

MIYA

ご指摘ありがとうございました。

まちがなく「del」要素でやるべきですね。修正しておきました。

2009年03月27日 09:44

じゅん

じゅん

s要素は非推奨タグなので、記事中のように使用するなら「del」を使ったほうがよいのではないですかね?

2009年03月27日 09:22

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article