HTMLのrel属性についての話

コンピュータで疑問に思ったことは、自分で調べないと気がすまない、ユゲタです。 HTMLに限らず、コンピュータプログラミングには、ワケのわからない単語が使われていても、必ず意味が存在します。 プログラミングに馴染みの無い人には、意味不明な英単語を並び立てたように見えますが、 意味がわからない単語ほど、その意味を理解した時に感動することも多いでしょう。

あるJavascriptでの問題発覚

ホームページを造っている時に、jQueryや、他のライブラリをとにかく使わず、自力で何でも書いてしまうユゲタが、 LP装飾で、文字やエレメントをスクロールに応じて自在に動かすライブラリを以前に作って、頼まれごとのあったホームページ制作でよく使っていたのですが、 Javascriptとセットでcssのスタイルシートを同時にタグセットする仕様が気に入らなくなったので、 javascriptと同じ階層に置かれている拡張子違いのcssファイルを自動読み込みしようとそのライブラリを書き直した時に問題が発覚しました。 scriptタグにrel属性をセットして、そこに、ライブラリ名を入れて、自分スクリプトのDOM位置を認識させていたんですが、 スタイルシートのcssファイルを読み込んだ際に、重複読み込みをさせないために、同じ用にrel属性に名称を仕込んでいたら、 linkタグの読み込みが完了しない自体が発生。 あれ？なんか基本的なことが間違っている気がする・・・ そうです。linkタグのrel属性は、"stykesheet"と記述して、スタイルシートのリンクである認識をタグで行わないと、正常にファイルを読み込んでくれないんですね。 この事に気がつくまで１時間弱。 無駄にプログラムにいろいろな箇所にconsole.logを仕込んで、確認をしていたんですが、 改めて、表示されたHTMLをみて、linkタグの違和感に気がついたという末路です。 こんな凡ミスはよくあることなんですが、ここで、rel属性って、いったいどういう意味なんだ？？？と気になってしまいました。 そもそも、relって何の略でhtmlではどういう時に使うものなのか？ 実は今回の不具合発覚までrel属性の事を考えたこともありませんでした。

rel属性は何の略？

https://e-words.jp/w/rel%E5%B1%9E%E6%80%A7.html ここに書かれていました。

rel属性とは、HTMLの要素（タグ）の中で設定することができる属性（attribute）の一つで、外部の他の資源との関連性（relationship）を示すもの。a要素やlink要素などで用いられる。

relationshipの略語だったんですね・・・ よく考えれば、頭に浮かぶモノですが、英語知識の乏しいユゲタは、このレベルが分からなかったんですね・・・orz そして、どうやら、aタグ、linkタグ、formタグ、areaタグ、あたりで使うようです。 ちなみに、aタグでのrel属性セットは、seoにも多少かどうかわからないけど、効果がある（かも？）なので、webページを作る人は、絶対に知っておいたほうがいいかもですね。 参考 : https://reference.hyper-text.org/html5/attribute/rel/

ライブラリで見かけるrel属性

確かユゲタの記憶が確かであれば、lightboxの以前のバージョンでは、imgタグの中に、rel属性を書いてそこにlightboxと記述していて、 おそらくそれを属性取得でページ内の、lightbox対象画像という風にピックアップしていたんだと思いますが、 メジャーバージョンが2になって、属性名がdata-lightboxと変わっていました。 rel属性に記述する内容を任意で作るのは良くないのだという風に考えて、属性名を変えたんだと思いますが、それを鑑みると、確かに同じような仕様でプラグインを作っていたユゲタのトラブルも納得が行きます。 こういう知らなかった知識をちょっとずつでも増やしていくことが、安定したプログラミングスキルに重要であることを、また今日一つ理解できた、ユゲタでした。 ちなみに、ユゲタを独自タグにして、属性をつけるのであれば、 <profile name='yugeta koji'　rel='blogger' type='creator' addr='tokyo' from='ehime' job='engeneer' post='executive' /> なんとHTMLタグが自己紹介となってしまいました。 これオモロー！！