@ainu

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

link要素のrelとtypeの違い

Q&A

Closed

CSSを読み込む際にhtml内で

を記載しますが、ここのrelとtypeの違いが気になっています。

調べてみると
・relは現在の文書からみたリンク先となるリソースの位置づけを指定
・typeはリンク先の MIME タイプを指定

とあり、ここでのMIMEタイプ=どの種類のファイルかというのは
リソースの位置づけと同じ意味ではないかと混乱しています。

プログラミングについて学び始めたばかりで大変初歩的な質問だとは思いますが
ご回答いただけると幸いです。

0 likes

1Answer

MDN から rel と type の関係が分かりやすい例を抜粋します https://developer.mozilla.org/ja/docs/Web/HTML/Element/link

(引用注:rel=favicon の他にも)アイコンの rel 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。

<link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png">

sizes 属性はアイコンの寸法を表し、type はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。

rel="apple-touch-icon-precomposed" はリソースの位置づけです。ここでは「iOS/iPadOS でホーム画面に web ページを追加した際に表示するアイコン」であると指定しています。 type="image/png" アイコン画像のファイルタイプが PNG であることを指定しています。これが位置づけとタイプの違いです。

PNG かどうかは href="apple-icon-114.png" の拡張子を見れば分かりそうなものですが、 web では拡張子に頼らず MIME タイプ形式でファイルタイプを表すのが通例です。

ただし rel="stylesheet" の時に限っては、現代で使われるスタイルシートのファイルタイプは CSS しかない(昔は CSS 以外のスタイルシートもあったのですが廃れました)ので、 type="text/css" は省略することが推奨されています。

0Like

Your answer might help someone💌