【HTMLとは (6)】 タグ一覧 (アンカー、画像配置、強調)

カテゴリ : html/css, HTMLとは, すべてのカテゴリ

body要素内で使用される「アンカー」「画像配置」「強調」

今回はbody要素内で使われるタグから「アンカー」「画像配置」「強調」を紹介します。

<a href=”リンク先のパス”>

アンカーを定義するための要素です。テキストにリンクの設置をすることができます。

<a>リンク先へ飛ぶ</a>

上記ではテキストをaタグで囲んでいるだけでリンクの設置はできていません。
リンクを設置する場合下記のように記述します。

<a href="http://hiroshinakazato.com/wp/">リンク先へ飛ぶ</a>

開始タグにhref属性を追加し、値にリンク先へのパスを記述します。
パスの記述は絶対パス(httpから始まる記述)または相対パス(現在のファイルからみた記述)を利用します。

 

 <img>

画像を配置するためのタグです。内容を持たないタグ(空要素)なので終了タグはありません。

<img>

上記の記述ではどの画像を配置するかの記述ができていないので下記のように記述します。

<img src="画像ファイルへのパス">

src属性を追加し、値に画像ファイルへのパスを記述します。さらに画像の幅や高さ、代替文などを追加し、空要素なので「 />」でタグを閉じます。

<img src="画像ファイルへのパス" width="幅" height="高さ" alt="代替文" />

widthやheightを指定することで、画像の読み込みに時間がかかる際に先に下のコンテンツが表示されるようになります。
またalt属性を指定することで画像がリンク切れを起こした際に、指定したテキストが表示されるようになります。

<em>,<strong>

テキストを強調するためのタグです。emよりもstrongの方がより強い強調になります。
強調タグを使用するとテキストは太字になったり斜体がかかったりしますが、CSSで標準のテキストに戻すことができます。(font-weightやfnt-styleの値をnormalにします)
またこれらのタグは見た目を強調するためのものではなく、意味を強調するためのものになるのでページないの重要なテキストを囲んでください。

 

最近の投稿