私たちの仕事では、HTMLタグと属性の一部を毎日使用しています。 見出し、段落、リスト、写真は、各Web開発者のマークアップの基礎です。 しかし、最も一般的な要素はおそらくリンクです。これは、すべてのページをリンクする単純なタグであり、World Wide Webと呼ばれる非常に複雑な構造を作成します。
そのままリンク
リンクのすべての可能性は、
hypertext reference
略である
href
属性にあり
hypertext reference
。 現在のページから別のリソース、通常はインターネット上の別の同じページへの一方向リンクを作成します。
<a href="http://allinthehead.com/">
href
属性は開始タグ
a
にあり、開始タグと終了タグの間にリンクを説明するテキストがあります。
<a href="http://allinthehead.com/">ドリューマクレラン</a>
「それで」とあなたは言う。 -「それは私がすでに知っているすべてです」そしてあなたは絶対に正しいでしょう! ただし、リンクには
href
属性以外に何かがあります。
相対性理論(相対性理論)
リンクの
rel
属性についてすでに読んだことがあるかもしれません。 ページの
head
セクションに次のようなものがあると思います。
<link rel = "stylesheet" type = "text / css" media = "screen" href = "styles.css" />
rel
属性は、現在のドキュメントとそれが指すドキュメントとの関係を記述します。 この場合、
rel
属性の値は
stylesheet
です。 これは、リンクされたドキュメントが現在のドキュメントのスタイルシートであることを意味します。つまり、そのような関係です。
rel
別の一般的な使用法:
<link rel = "alternate" type = "application / rss + xml" title = "My RSS feed" href = "index.xml" />
この場合、現在のドキュメントと関連するRSSフィードとの関係は、
alternate
として示されます。現在のドキュメントの代替表現です。
これらの例では両方とも
link
タグを使用していますが、通常のリンクでも
rel
属性を使用できます。 たとえば、次のセクションからRSSフィードにリンクしています。
<a href="index.xml"> RSSフィード</a>を購読します。
rel
属性を使用して、このリンクに追加情報を追加できます。
<a href = "index.xml" rel = "alternate"を購読します type = "application / rss + xml"> RSSフィード</a>。
rel
属性の値の特定のリストはないため、意味的に妥当と思われるものなら何でも使用できます。 たとえば、ヒントへのリンクを持つ複雑な商用Webアプリケーションがある場合、値
help
を使用して現在のページとこのヒントの関係を決定でき
help
。
<a href="help.html" rel="help">ヒントが必要ですか</a>
エレメンタリーマイクロフォーマット
rel
属性の値は自由に使用できますが、 microformatsを使用する場合、すでに一般に受け入れられている値がいくつかあります 。 最も単純なmicroformatsのいくつかは、
rel
適切な使用を提供します。 たとえば、このドキュメントが公開されているライセンスを参照する場合は、
rel-license
microformatを使用します。
ライセンスに基づいて配布<a href = "http://creativecommons.org/licenses/by/2.0/" rel = "license">クリエイティブコモンズ</a>
この構造は、現在のページが「ライセンス」とマークされたドキュメントを参照していることを示しています。
microformat
rel-tag
はもう少し先に進みます。 リンクのURLの最後の部分が現在のドキュメントの「ラベル」であることを示すために使用されます。
<a href = "http://en.wikipedia.org/wiki/Microformats"について読む rel = "tag">セマンティックレイアウト</a>
この場合、このドキュメントには「Microformats」というラベルが追加されています。
XFN (XHTML Friends Network)は、人々の間の関係を記述する方法です。
<a href="http://allinthehead.com/" rel="friend">ドリューマクレラン</a>
このマイクロフォーマットは、
rel
属性の使用法を大幅に拡張します。
class
属性と同様に、
rel
はスペースで区切られた複数の値を取ることができます。
<ahref="http://allinthehead.com/"rel="同僚との出会い">ドリューマクレラン</a>
したがって、ドリューは私の友人であり、彼と出会い、彼は私の同僚であることを示しています(結局、私たちは両方ともインターネット( Web monkies )のファンです)。
「変化が欲しい」( rev
)
rel
が現在のページとそれが参照するページとの関係を記述している場合( 注:現在のページ->別のページ )、
rev
逆の関係に使用されます:現在のページにリンクされているページのリンクの種類を決定します( 注:現在ページ<-別のページ )。 以下は、help.htmlで使用できる例です。
<a href="shoppingcart.html" rev="help">ストアに戻る</a>
rev
属性は、現在のページがヘルプページであり、それが参照しているページのヒントであることを示します。
microformatの
vote-links
を使用すると、
rev
属性を使用してリンクを絞り込むことができます。 たとえば、
vote-for
値を定義することにより、ドキュメントが参照されるものをサポートしていることを示すことができます。
<a href="http://richarddawkins.net/home" rev="vote-for"> Richard Dawkins </a>に同意します。
対応する
vote-against
値があります。 これは、このドキュメントを参照しているものの、同意しないことを明示的に示すことを意味します。
<a href="http://richarddawkins.net/home" rev="vote-for"> Richard Dawkins </a>に同意します
<a href="http://www.icr.org/" rev="vote-against">創造論者</a>について。
当然、同じリンクで
rel
と
rev
を使用することを妨げるものはありません。
<a href="http://richarddawkins.net/home" rev="vote-for" rel="muse">リチャードドーキンス</a>
大多数の合理性
rel
と
rev
の使いやすさは、豊かな可能性を隠します。 リンクにセマンティックな意味を比較的簡単に追加できます。これにより、検索ロボット、アグリゲーター、またはブラウザーで処理できるリンクが作成されます。 次のステップは、これらの属性に精通し、リンクの機能を拡張することです。
関連リンク
記事全体を読んでくれた人に感謝します。 特に
rel/rev
、または一般的なマイクロフォーマットの使用に関するあなたの意見やコメントを聞きたいです。
Web Optimizator:サイトの読み込み速度の確認