htmlのheadでみかけるhrefって何なの?

ということで調べて見ました。

hrefとかrelの意味

htmlやcssを書くときには、以下のような記述をすると思う。

<link href="main.css" rel="stylesheet" type='text/css'>

上記はどのような意味かというと、relはrelation(関係)の意味で、hrelはhyper referenceの意味。また、typeは読み込もうとしているリンクのMINEタイプが入る。(上記の例だと、type=’text/cssは「テキスト形式のcssファイルを読み込みますよ」という意味になる。

この単純な例では、 href 属性内にスタイルシートへのパスを提供し、 rel 属性の値を stylesheet にしています。 rel は “relationship” を意味し、おそらく 要素の重要な機能の一つです。 — 値はこれを含んでいる文書にどのように関係するかを示します。リンク種別で見られるように、様々な種類の関係があります。

参考:<link>: 外部リソースへのリンク要素 | MDN

ただし、type='text/css'に関しては、CSSを読み込むstylesheetやjavascriptを読み込むscriptには自動で割り当てられるので、わざわざ書く必要はなく、以下のような記述のほうがスッキリする。

<link href="main.css" rel="stylesheet" >

また、rel要素にはstylesheet 以外にも様々な記述ができる。

参考記事:HTML link rel Attribute

代表的なのが、iconを使ってファビコン画像を表示させたり、authorを使って検索結果に著者名を表示させることだろう。

ReratedPosts

JavaScriptを使わずにCSSだけでスライドショーを実現する