HTML5要素を1つずつ > メタデータ・コンテンツ > base要素
今の愛読書、現場のワークフローで覚える Webサイト制作教室 – MdN Design Interactive で、Webの勉強をガリガリとしている最中です。
そしておそらく(ほぼ間違いなく)読んだだけなら 次の朝には覚えたフリして忘れてしまってるであろう私の脳みそであります。しっかりと復習をしつつ、自分なりに気になる点を掘り下げることにより、きっと記憶できる割合が2割は増すであろうことを期待して書き綴ります。
メタデータ・コンテンツとは
引用 : Webサイト制作教室 P90より
おもに<head>内に書き、実際にはページ上に表示されない要素です。
とのこと。要素の種類としては以下。
- base
- command
- link
- meta
- noscript
- script
- style
- title
たしかに今まで何かしらで使ったりしていた要素にはなりますが、何がどうなのか、深い部分は若干スルー気味でした。この機会に掘り下げて調べてみます。
base 要素とは
参考サイト ほんっとにはじめてのHTML5さん
base要素は、head内で コンテンツにつき一回だけ使用する要素です。もし複数記入しても最初のbase要素しか認識しないとのことです。
属性は ” href “ と ” target “ の2つになります。内容としては ” a ” 要素に近い作りですね。
属性の使い方は a要素と似てます。まずは ” href要素 ” からいきます。
base要素のhref要素はa要素のそれとは違います
” href ” は URLを入れます。指定するURLは、トップページのURLを入れます。
[html highlight=”4″]
<!– 使用例 (他の要素は省きます) –>
<head>
<base href="http://logic-a.com/wp/">
</head>
<!– 例) URLの頭を省略できます –>
<a href="blog.html">ブログページへのリンク</a>
[/html]
ここでのURLは絶対指定を入れます。ここで指定されたURLを基準に、他のファイルの参照などのURLのベースになります。 WordPressの bloginfo(‘url’) タグに近い使用の感じかと思います。
本来のURL、”http://logic-a.com/wp/blog.html” という指定から、base要素で指定した部分を省いて “blog.html” と記載できます。
target要素はa要素のtarget要素のお母さん的存在
target要素の意味合いは a要素での役割とほぼ同等です。 例えば、_blank で新規タプや新規ページでリンク先を開いたり、 _self はその逆で今のページでリンク先を開きます。
通常、a要素で指定したtarget要素は 当たり前ですが その指定されたa要素にしか適用されません。次や前のtarget要素では指定がなければデフォルトの設定でリンク先を開きます。
base要素で指定したtarget要素は、サイトのデフォルトのtarger要素の設定になります。ここで target=”_blank” を指定しておけば、毎回 a要素に指定しなくても、新規タブや新規ページで開いてくれます。逆に、新規で開きたくないa要素だけ target=”_self” を指定する、という使い方もできます。
base要素は必須ですか？
base要素は必ず記入しないといけない要素ではないそうです。正直、今まであまり私も使ってませんでした。(というか、今回調べてみてほぼ初めて内容を理解しましたｗ)
もし 記載がない場合は、今開いているページ(htmlファイルなど) が自動的に基準として組み込まれるとのこと。ですが、WordPressを使用の場合、ページを動的に生成するため bloginfo(‘url’) や bloginfo(‘tempate_url’) などで今の位置を都度取得する必要があります。
また、base要素を使用する場合は ” href要素 “ ” target要素 “ のどちらか、もしくは両方を指定します。というか、指定しないとなんにもない要素になってしまいますし。
