はてなダイアリーガイド「日記の中で使うタグ（2）」

用語：「属性」

タグの中にはその要素にさらに特性を与える「属性」という記述をすることができます。

 <タグ名 属性="属性値"> 

という書き方になりますが、具体例を見てみましょう。
「a要素」はページの中の"位置"情報に関する要素です。リンクを張るでやったように、href属性では、リンクの始点、つまりクリックすると他のアドレスへジャンプする部分にすることができます。

<a href="#link-dayo">ここはリンクの始点</a>

とすると、“ここはリンクの始点”のようになります。
逆に、 name属性を記述すると、リンクの終点にすることができます。

<a name="link-dayo">ここはリンクの終点</a>

とすると
“ここはリンクの終点”となり、（見かけは変わらないと思いますが）先ほどのリンクのジャンプ先になります（上の“ここはリンクの始点”リンクをクリックしてみてください）。
このように、同じa要素でも属性によって、その特質が大きく変わります。
（まぁ、ここまで変わるのはa要素と前に出てきたinput要素ぐらいなんですけどね）

• 【補足】どの要素になんという属性があって、どんな属性値を指定できるのかはHTMLの仕様でキッチリ決まっています。調べる場合はHTML4.01リファレンス目次 --- 要素一覧の要素名などから探してみてください。
• 【補足】a要素のname属性の値のつけかたには決まりがあります。詳しくは「The Web KANZAKI - ごく簡単なHTMLの説明」名前付けの注意点などをご覧ください。

整形された文章（pre）

テキスト入力欄で形を整えてあり、そのまま表示させたい文章（preformatted text）は、preタグで囲います。ウェブブラウザのウィンドウ幅を狭くしても行が折り返されず、空白を勝手に詰めて表示されることもなくなります。

><pre>
かくとだに　えやは伊吹の　さしも草
　　　さしも知らじな　燃ゆる思ひを
</pre><

のように書くと、（※なぜ「>」と「<」をつけるかは別の項目で説明）

かくとだに　えやは伊吹の　さしも草
　　　さしも知らじな　燃ゆる思ひを

のようになります（背景色などの見栄えはテーマやスタイルシート次第です）。改行位置や空白の数を崩したくない文章、例えば詩やプログラムコードなどを書く時に使用されます。
はてな記法では「>|」と「|<」を使って

>|
かくとだに　えやは伊吹の　さしも草
　　　さしも知らじな　燃ゆる思ひを
|<

のようにすると、同じ結果になります。

• 【関連ページ：はてなダイアリーTips - 日記にアスキーアート（AA）を貼り付ける】preタグを使用して日記にアスキーアート（AA）を貼付けるコツが載っています。

<hatena name="section" listlimit="25">　<br>　<br>　<br>
[[はてなダイアリー]]、id:hatenadiary、http://d.hatena.ne.jp/

引用範囲を表す方法（blockquoteとq）

ブログではニュースや他のブログの引用をする機会が多いと思います。「引用」って？という方は導入部著作権のこと - 引用はできるをどうぞ。ここで紹介するのは引用のためのタグですが、このタグを書くのと引用の条件を満たすことは別次元の問題ですので。

はてなダイアリーでは「>>」と「<<」を使って引用記法（はてなダイアリーのヘルプ - 引用ブロックを作る）がありますが、これはblockquoteタグの記述を簡単にしたものです。タグで書くなら、

以下は引用です。
><blockquote>
<p>はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。</p>
</blockquote><

のようにすると（※「>」と「<」やpタグをつける理由は別の項目で説明）

以下は引用です。

はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。

のようになります。（見た目はテーマ等によります）

はてなでは引用元サイトを自動的に表示する記法があって、blockquoteタグの中にcite属性とtitle属性という記述をすることで、その引用の引用元のアドレスと、その引用元に対するタイトルを示せます。

はてなダイアリーは次のように紹介されています。
><blockquote cite="http://d.hatena.ne.jp/what" title="はてなダイアリー - はてなダイアリーってなに？">
<p>はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。</p>
</blockquote><

のように書くと

はてなダイアリーは次のように紹介されています。

はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。

のようになります。

で、実はこのような記述ははてなツールバーをインストールしたりはてなブックマークレット - はてなダイアリーの『ダイアリーで言及』を利用すると非常に簡単に書くことが出来ます。使い方はそれぞれのページをご覧ください。

そんなわけで、「>>」と「<<」の記法もありますし、はてなダイアリーで実際にblockquoteタグを書く必要はほとんどありませんが、タグで書けば上のようになっています。

用語：「ブロック要素」と「インライン要素」

上のblockquote要素のように、その前後で改行されるような要素を「ブロック要素（ブロックレベル要素）」と言います。今までのガイドで出てきたform要素やaddress要素、pre要素もブロック要素です。
画像ははてなダイアリー日記のブロック要素を枠を表示させて見えるようにしたものです（Firefoxの拡張機能「Web Developer」を使用）。
ブロック要素の中がまたブロック要素になっている部分もあります。通常のウェブページはこのように大小のブロック要素によって構成されています。まあブロック要素もスタイルシートで前後を改行しないようにもできるのですが、このようにページを構成する基本要素をブロックレベル要素と呼ぶわけです。

反対に、上のq要素のように、一行の中におさまる要素を「インライン要素（行内要素、テキストレベル要素）」と言います。文の中のさらに一部分に意味を持たせるために設けられた要素の種類です。今までのガイドで出てきたa要素、em要素とstrong要素などもインライン要素です。

さて、ここでひとつHTMLに関する重要なルールがあります。

• インライン要素の中にインライン要素がある……○
• ブロック要素の中にインライン要素がある……○
• ブロック要素の中にブロック要素がある……△（要素によっては良い。divやblockquote等）
• インライン要素の中にブロック要素がある……×

一つの行段落の中にブロック要素を入れようとするのは間違いですし、インライン要素がブロック要素を含んでしまったり、複数の段落にまたがってしまうのは間違いです（このルールにいい加減と言うか柔軟と言うか、間違っていても見やすく表示してくれちゃうウェブブラウザもあるのですが、論理的に変になりますし、スタイルシートを指定してみるとメチャクチャになったりするのでご注意ください）。

• 【補足】他の要素はどっち
  • ブロック要素……adress、pre、blockquote、h1〜h6、ul、ol、dl、hr、table、divなど
  • インライン要素……a、em、strong、img、br、spanなど
  • ※del要素とins要素だけは、その中身によってブロック要素にもインライン要素にもなりうる例外的な要素です。

日記の中で使うタグ（1）に戻る← | →日記の中で使うタグ（3）に進む