Let's start from here

タグの属性とパスの記述

HTMLタグと要素の関係は、タグと要素の関係に加えてタグに対して属性という情報がありHTMLタグに補足的な情報を与える目的で使われます。記述の仕方にもルールがあり、属性名=”値” をタグの中に記述します。

<タグ名 属性名="属性値">

ポイントは、

  • 開始タグの要素名の後ろに半角スペースを開ける
  • 属性の後ろに=(イコール)を付ける
  • 属性値は”(ダブルクオート)で囲む

属性値を囲む引用符は、’(シングルクオート)でも構いませんが、一般的に”(ダブルクオート)を使います

実も前回の記事で一度でてきています。headの中に記述していた文字コードの情報です。
<meta charset=”UTF-8″>
これはメタタグの中に「キャラクター属性(文字コード属性)をUTF-8で解析してください」ということです。
その他にも属性情報を使用するケースはたくさんありますが、代表的なものとしてアンカータグとイメージタグがありますので以下でご説明します。

リンクタグ

リンクタグは、タグで囲まれた要素でその部分をクリックすると指定された場所にジャンプすることができます。通常は属性にURLを記述してクリックすると属性に記述されたURLにジャンプします。

href属性(hypertext reference)とは、リンクの参照先情報です。
target属性とは、href属性で指定されたリンク先をどのように開くかを指定します。target属性を省略した場合は、現在ひょうじされているページにリンク先を表示します。target属性に「_blank」が指定されている場合は新しいページにリンク情報を表示します。
href属性は、属性の頭に「#」を付けてリンク名を記述することでページ内にリンクすることができます。リンク先には「#」あとに書いたリンク名をリンク先にid属性の値として記述します。

絶対パスと相対パス

href属性に記述するリンク先情報は、http://から始まるプロトコル名から記述する方法以外にプロトコルを省略して絶対パスや相対パスで記述することができま。外部サイト(自サイト以外)のリンク記述はプロトコル表記で記述しますが自分のサイト内のリンクは絶対パスや相対パスを使用することがほとんどです。

絶対パス:ドメイン名を省略して「/」記号で始まるパスで記述
href=”/source/htmlcss”

相対パス:現在位置から見た相対パスで記述する
href=”./yellow/banana.html”
「./」はカレントディレクトリ(=現在のフォルダ)を示す記法です。

href属性値には「http://」などのプロトコル名から書いても構いませんが、同一サーバ内に存在するファイルを示すなら相対パスや絶対パスで書く方が短く済みます。ドメイン名を書かない分、ウェブサイトを引っ越す際にも修正量が少なくて済むメリットもあります。

絶対パスと相対パスの違いは、簡単に言えば、
最上階層からの場所を示すのが絶対パス (=現在位置に関係なく記述は同じ)
現在位置からの場所を示すのが相対パス (=現在位置によって記述が異なる)
です。

イメージタグ

imgタグはImageの略で、画像を表示するタグです。 表示する画像ファイルはsrc属性(srcはsourceの略)で指定します。 WEBに使用できる画像形式は、GIF・JPEG・PNGの三種類ですが、それぞれ特徴があるので、状況により使い分けてください。
width属性とheight属性は、画像ファイルのブラウザ上での表示サイズを指定します。
alt属性では画像を表示できない場合に代わりに表示するテキストを指定します。 ここで指定するテキストは、読み上げソフトで音声になったり、点字で表現される場合があるので、適切なものを指定してください。