実用的なHTML:リンクセマンティクスの改善

注:記事「Boost Your Hyperlink Power」の翻訳以下のとおりです。 rel属性とrev属性、およびいくつかのマイクロフォーマットの使用を強調しています。



私たちの仕事では、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:サイトの読み込み速度の確認






All Articles