HTMLの主要タグ(body内利用【2】主に文章内で利用するタグ)

HTMLの主要タグ(body内利用【2】主に文章内で利用するタグ)

 ここではbodyタグ内、主に文章内で利用するa、img、table等のタグをまとめます。


リンク

 別アドレスへのリンクやページ内ジャンプを指定します。


<a>(アンカー)

 <a>タグはアンカーと呼ばれるリンク先を指定するタグです。主にhref、target属性と併せて利用します。


href属性(エイチレフ)

属性値 説明
リンク先アドレス リンク先のアドレス(例:http://www.sample.com)
ページ内ジャンプのアドレス ページ内でジャンプしたい場所のタグにグローバル属性であるidの番号を付けます。その番号に#をつけてジャンプ先として指定します。(例:#01)

target属性

属性値 説明
_self(初期値) 同一タグでリンク先に移動
_blank 別タグを開いてリンク先に移動

 ~ 例 ~ 

<a href="#" target="_self">リンク表示文字</a>




画像

 ページ内で表示する画像を指定します。


<img>

 <img>タグは表示する画像を指定するタグです。主にsrc、alt属性と併せて利用します。src属性は画像ファイルのアドレス、alt属性は代替えテキストです。昔はwidth、heightを指定するのが一般的でしたが、現在ではレスポンシブを考慮しCSS側で指定します。


 ~ 例 ~ 

<img src="./sample.png" alt="代替テキスト">


<data URI>

 <img>タグの場合、どしても外部の画像ファイルを読み込むため時間がかかります。この時間を省くためURI文字列としてHTML内に画像を埋め込む方法です。特にモバイル端末からのアクセスの場合はHTTPリクエストが減るためパケットの節約にもなります。一般的な静的HTMLページの場合、この手法を利用してしまうとURI文字列が長いためメンテ性が大幅に悪くなるので利用しませんが、php等で動的なHTMLページを生成する場合はよく利用される方法です。又、この手法の問題点としてデータ量が約1.3倍になる。キャッシュが利用できない。IE7以前には未対応。以上が挙げられますので利用の際は注意して下さい。


 ~ 例 ~ 

<img src="data:image/png;base64,~URI文字列~" alt="代替テキスト">

 image/png、image/gif、image/jpeg等の画像ファイルが利用可能です。URI文字列の作成方法ですが画像をBase64エンコードすることで文字列を取得します。具体的にはWindowsの場合、コマンドプロンプトから以下のコマンドを入力することで、文字列を取得できます。

 ~ コマンドプロンプトでBase64エンコード ~ 

certutil -f -encode "画像ファイル" "URI文字列を出力するテキストファイル"


<map>、<area>

 <map>、<area>タグはクリッカブルマップを画像に設定する場合に利用します。


 ~ 例 ~ 

<img src="./sample.png" alt="代替テキスト" usemap="#map">
<map name="map">
 <area shape="rect" coords="0,20,100,40" href="sample.html" alt="代替テキスト">
</map>

  shape="rect"は四角形。coordsは画像の左上を基準にクリック領域を左上(横、縦)、右下(横、縦)で指定。




テーブル

 ページ内で表を作成する際に利用します。昔はHTMLページを全てテーブルでレイアウトする手法が一般的でしたが、現状ではレイアウトにCSSを利用しますので、ページ内で表を作成する場合にのみ利用します。ただし、テーブルは読み込みに若干時間がかかることより<div>、<span>タグとCSSのborderを併用して表を作成する手法が利用することも多いです。


<table>

 <table>タグは表を作成するために利用します。


<tr>、<td>

 <tr>タグは行、<td>タグは列を指定します。厳密にはテーブルのヘッダーを指定する<thead>、<th>、テーブルの本体を指定する<tbody>、テーブルのフッターを指定する<tfoot>などがあるのですが、これらタグは省略可能であり、<tr>、<td>だけで表は作成可能です。行を連結するrowspan属性、列を連結するcolspan属性と併用して表を作成します。


 ~ 例 ~ 

<table>
 <tr>
  <td>項目1</td>
  <td>項目2</td>
 </tr>
</table>




組み込みコンテンツ

<iframe>

 <iframe>タグは、HTMLページ内にHTMLページを組み込む場合に利用します。Youtubeの動画を埋め込む場合にも<iframe>タグを利用して。YoutubeのURLをsrcで埋め込みます。

<iframe width="600" height="300" src="http://www.sample.com/sample.html"></iframe>


<embed>

 <embed>タグは、Flashなどの外部プラグインを組み込む場合に利用します。

<embed width="600" height="300" src="flash.swf"></embed>


<object>

 <object>タグは、画像、PDF、Flash等外部プラグイン、HTMLページなど総合的に組み込みができるタグです。

<object data="http://www.sample.com/sample.html"></object>
<object data="sample.png" type="image/png" width="100" height="50"></object>
<object data="sample.pdf" width="600" height="300"></object>
<object data="flash.swf" width="600" height="300"></object>


<video>

 <video>タグは、動画ファイルを組み込む場合に利用します。

<video width="600" height="300" src="sample.mp4"></video>


<audio>

 <audio>タグは、音声ファイルを組み込む場合に利用します。

<audio width="600" height="300" src="sample.mp3"></audio>


<canvas>

 <canvas>タグは、JavaScriptを利用したレンダリングを行う場合に利用します。

<canvas id="01" width="600" height="300" ></canvas>




その他よく利用するタグ

<br>

 <br>タグは、改行を示すタグです。

<br>


<pre>

 <pre>タグは、テキストをそのまま表示する場合に利用します。改行、<、>のような実体参照しなければならない文字もそのまま表示できます。

<pre>整形済テキスト</pre>


<blockquote>

 <blockquote>タグは、引用を表すタグです。他ソースから引用した文書をblockquoteタグでマークアップし、さらにblockquoteに対してCSSで引用符である“”を付けるのが一般的です。

<blockquote>引用</blockquote>


<strong>

 <strong>タグは、重要度の高いテキストをマークアップするタグです。ネスト(入れ子)を利用することで重要度をさらに上げることもできますが、特に最近ではネストにしたからといってSEO的に効果が上がることはありませんので、あくまで文章の中での重要度を示す意味で自然に利用するようにして下さい。

<strong>重要度</strong>
<strong><strong>重要度ネスト</strong></strong>


<time>

 <time>タグは、日付や時刻をマークアップするタグです。日付を表示しない場合はdatetime属性と併せて使用します。

<time>2018-12-15</time>
<time>12:00:00</time>
<time>2018-12-15T12:00:00</time>
<time>2018-12-15T12:00:00+9:00</time>
<time datetime="2018-12-15">日付を表示しない場合</time>


<mark>

 <mark>タグは、マーカーペンのように表示するタグです。

<mark>マーカー</mark>


<details>、<summary>

 <details>、<summary>タグはユーザによる折りたたみが可能なインターフェースを提供するタグです。ディスクロージャーウィジェットとも呼ばれます。

  • 結果

  • HTML

  • クリックして下さい。展開したテキストが表示されます。

  • /* HTMLの例 */
    
    クリックして下さい。展開したテキストが表示されます。




 Copyright IT SKILL MAP. All rights reserved.