【HTML】HTMLのタグについて2017/04/20

[最終更新:2017/05/12]

このページではサーティファイのHTML4.01リファレンスと参考サイトを交えて、HTML4.01について書いていきたいと思います。

Webクリエイター能力認定試験にご興味のある方も合わせて参考サイトの方をご参照ください。

本記事は、同参考サイトによる区分を参考にして作成されています。

参考サイト:サーティファイ/Webクリエイター能力認定試験 HTML 4.01対応のサンプル問題

 

■HTMLタグについて

※目的が見た目を整える場合にはCSSにて行うことをオススメします。

※HTML4.01は大文字小文字に区別があり、HTML5では大文字小文字の区別がありません。(4.01はalt属性必須)

※<HTML>~</HTML>は、<HTML>(その他囲われている中身)</HTML>という記載です。

※タグの「id」と「class」については下記サイトをご参照ください。

・概要は参考サイト「今さら人に聞けない「idとclassの使い分け」(2011/05/09

)」

・タグの内容については「要素にIDを付ける」、「要素にクラス名を付ける

・idとclassの優先順位と点数については「!importantはもう使わない!CSSの優先順位をおさらいしよう(2014/07/16)」、「CSSセレクタの優先順位の計算方法(2014/09/13)」

※ブロックレベル要素とインライン要素については「ブロックレベル要素とインライン要素」をご参照ください。

※”URL”については画像の場合を例とした、下記画像をご参照ください。

url001

 

◆【一般定義】・・・サイトを構成する上で必須のタグ

◇<html>・・・HTML文書であることの宣言

[基本書式①] <html>~</html>

[基本書式②(html4.01)]目的により3種類ありますので、詳細はHTMLタグリファレンスをご参照ください。.

[説明] HTMLはHyperText Markup Language(ハイパーテキストマークアップランゲージ)の略です。

その文書がHTML文書であることを宣言します。

XHTMLやhtml4.01では宣言の仕方が異なります。

[参考サイト]:<html>タグについて

[参考サイト]: HTMLタグリファレンス

 

◇<head>・・・ヘッダ情報を記述します

[基本書式]<head>~</head>

[説明] <head>~</head>の中には文書のタイトルなどのヘッダ情報を記述します。

[参考サイト]:<head>タグについて

 

◇<title>・・・ページタイトルを記述します

[基本書式]<title>~</title>

[説明] <title>タグは文書にタイトルをつけるタグで、<head>内に配置されるタグです。記述の省略ができない要素です。

このタグに囲われたテキストが、ブックマーク名や検索エンジンの検索結果で表示されます。

補足として、タイトルタグと見出しタグをイコールに考えてしまう場合は下記のように考えるとよいそうです。

タイトルタグは「検索エンジン・SNSから直接来た人・検索エンジンのロボット等に向けて記述」するもので、

h1タグは「サイトを閲覧している人向けに記述」するタグ。

ユーザーが求めている情報があるかどうかの判断されるため、SEO観点からも大切なタグになります。

詳細は参考サイトをご参照ください。

[参考サイト]:<title>タグについて

[参考サイト]:SEOの基本中の基本!「titleタグ」「meta description」「h1タグ」の書き方まとめ(2014/10/29)

[参考サイト]: タイトル(title)タグのSEO効果と記述法(2016/04/22)

[参考サイト]:タイトルタグのSEO効果と読まれるタイトルの書き方(2015/02/23)

 

◇<body>・・・ページ内容を記述します

[基本書式]<body>~</body>

[説明] <body>タグの中への記述は、実際のブラウザに表示される文書の本体になります。

[参考サイト]:<body>タグについて

 

◇<!– –>・・・html内に必要に応じたコメントを入力します

[基本書式]<!–コメント本文 –> (※コメント本文がコメント記述可能な箇所になります)

[説明] <!—ここからヘッダー –>というようにhtml内にメモとしてのコメントが記述できます。

また、次のように<!– <p>無効にされる要素</p> –>要素を含むことで要素内を無効にすることができます。

参考サイト: <!– –>について

 

 

◆【文字装飾】・・・見出しや文字の強調などの文字装飾

◇<h1>、<h2>、<h3>、<h4>、<h5>、<h6>・・・ページの見出しを指定するタグです

[基本書式] <h1>~</h1>、<h2>~</h2>、<h3>~</h3>、<h4>~</h4>、<h5>~</h5>、<h6>~</h6>

[説明] h1~h6タグはブロックレベル要素になります。

h1が最上位の見出しでh6が最下位の見出しというように、数字が増える毎に下位が下がります。

補足として、タイトルタグと見出しタグをイコールに考えてしまう場合は下記のように考えるとよいそうです。

タイトルタグは「検索エンジン・SNSから直接来た人・検索エンジンのロボット等に向けて記述」するもので、

h1タグは「サイトを閲覧している人向けに記述」するタグ。

あくまで見出しですから、テキストの見た目の変化を目的に乱用してはいけないタグです。

見た目についてはCSSで調整することが望ましいです。

[参考サイト]:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>について

[参考サイト]:SEOの基本中の基本!「titleタグ」「meta description」「h1タグ」の書き方まとめ(2014/10/29)

[参考サイト]: タイトル(title)タグのSEO効果と記述法(2016/04/22)

 

◇<strong>・・・テキストを強調するためのタグです

[基本書式]<strong>~</strong>

[説明] インライン要素になります。

タグで囲まれたテキストは強調の意味を含んだ太字になります。

同じ強調タグ<em>タグよりも強い強調のタグになります。

使用される頻度が高めのタグとされています。

[参考サイト]: <strong>タグについて

 

◇<b>・・・テキストを太字で表示させるタグです

[基本書式]<b>~</b>

[説明] インライン要素になります。

タグで囲まれたテキストは見栄えとしての太字になります。

見た目に関するタグですから、見た目についてはCSS側での利用をお勧めします。

[参考サイト]:<b>タグについて

 

◇<i>・・・テキストを斜体で表示させるタグです

[基本書式]<i>~</i>

[説明] インライン要素になります。

タグで囲まれたテキストは斜体になります。

見た目に関するタグですから、見た目についてはCSS側での利用をお勧めします。

[参考サイト]:<i>タグについて

 

◇<sup>・・・テキストを上付き文字として表示させるタグです

[基本書式]<sup>~</sup>

[説明] インライン要素になります。

タグで囲んだ文字を上付き表示することができます。

[参考サイト]:<sup>タグについて

 

◇<sub>・・・テキストを下付き文字として表示させるタグです

[基本書式]<sub>~</sub>

[説明] インライン要素になります。

タグで囲んだ文字を下付き表示することができます。

[参考サイト]:<sub>タグについて

 

◇<pre>・・・改行や空白などを入力されたままの状態で表示させるタグです

[基本書式]<pre>~</pre>

[説明]ブロックレベル要素になります。

改行や空白など入力されたままの状態で表示するタグです。

[参考サイト]:<pre>タグについて

 

 

◆【特殊文字】・・・スペースなどを特殊文字で表す

◇&nbsp;・・・改行されない空白スペースを追加する特殊文字です

[基本書式] &nbsp;

[説明]特殊記号をHTML上で指定するものになります。

スペースと同様の扱いとして、テキスト内に含ませて利用します。

こうしたスペースや特殊記号は指定して表示することが望ましいとされています。

その他多くの特殊記号についても指定できます。

詳細は参考サイトをご参照ください。

[参考サイト]:よく使う記号、使われる記号、いざという時の…

 

 

◆【仕切り】・・・段落、改行、区切り線の作成

◇<p>・・・段落を作成するタグです

[基本書式]<p>~</p>

[説明]ブロックレベル要素で、主に文章に使うタグです。

<p>~</p>で囲まれた部分がひとつの段落であることを表します。

用途を混同されがちな<div>タグは、単体では意味を持たないタグです。

そのため、<div>タグは他に指定するタグがない場合に使うタグです。

[参考サイト]:<p>タグについて

 

◇<br>・・・強制的に改行する

[基本書式]<br>

[説明] インライン要素になります。

改行させたい部分に記述します。

<br>は空要素のため、終了タグはありません。

[参考サイト]:<br>タグについて

 

◇<hr>・・・水平線(区切り線)を指定するためのタグです

[基本書式]<hr>

[説明] インライン要素になります。

<hr>タグを記述した箇所に水平線を作成できます。

<hr>は空要素のため、終了タグはありません。

[参考サイト]:<hr>タグについて

 

 

◆【リンク】・・・ハイパーリンクの作成

◇<a>・・・リンクを作成するためのタグです

[a href 書式①]<a href=”URL”>~</a>

[a name書式②]<a name=”マーカー名”>~</a>

[説明] インライン要素になります。

リンクをはる、リンクの出発点・到達点を指定するするタグになります。

<a href=”URL”>で記載URLにジャンプし、<a name=”マーカー名>でページ内ジャンプをします。”

SEO的にもページランク分散を防ぐ「rel=”nofollow”」の指定など、重要な扱いとのことです。

<a href=”URL” rel=”nofollow”>記載例 </a>と記載することで、検索エンジンのクローラーは「リンク先ページ」をチェックされないとのことです。

チェックされないことでクローラーがページを評価する、ページランクの分散を防げるため評価を高くできるとのこと。

[参考サイト]:<a>タグについて

[参考サイト]:aタグ(アンカータグ)とは?aタグを使ってリンクを貼る手順をまとめてみた

 

 

◆【イメージ/マルチメディア】・・・画像などを表示させる

◇<img>・・・画像を表示させるためのタグです

[基本書式]<img src=” ファイル名orディレクトリ名/ファイル名” alt=”画像の説明”>

[応用書式(+width、height)]<img sec=” ファイル名orディレクトリ名/ファイル名” alt=”画像の説明” width=”幅” height=”高さ”>

[説明] 画像を表示するインライン要素のタグになります。

altはHTML4.0から必須になっており、画像の説明を記述します。

合成音声による読み上げソフト等、身体に障害のある方向けに表現される場合があるため、適切なものを指定することが必要です。

ですから、ここで言う「画像の説明」とは、耳で聞いて理解できる説明を指しています。

また、SEOにも関わってくるとのことですが、詳しくは参考サイトをご参照ください。

Widthは幅を、heightは高さを指定する属性でpx(ピクセル)や%で指定します。

指定しない場合は画像サイズそのままで表示されます。

[参考サイト]:<img>タグについて

[参考サイト]:imgタグにおけるaltの使い方について

[参考サイト]:alt属性の書き方とSEO効果教えます(2016/04/18)

 

◇<map>・・・ひとつの画像に複数のリンクを設定するマップデータを作成するタグです

[基本書式]<map name=”マップ名”>~</map>

[説明] 1つの画像を複数の領域に分けて、それぞれの領域にリンクを設定します。

つまり、タグでひとつの画像に複数のリンクを設定します。

[参考サイト]: <map>タグについて

[参考サイト]: マップ <MAP> <AREA>

 

◇<area>・・ひとつの画像にリンク位置とクリックした時のリンク先を設定するタグです

[基本書式]<area shape=”形状(形状=rectは四角、circleは円形、polyは多角形)” cords=”0,0,0(0,0,0には座標数値を記述)”>

[応用書式(+href、alt)]<area shape=”形状” cords=”座標” href=”URL” alt=”説明”>

[説明]

[参考サイト]:<area>タグについて

[参考サイト]:マップ <MAP> <AREA>

[参考サイト]:クリッカブルマップ

[参考サイト]:画像内に複数リンクを設定する

 

◇<object>・・・様々な形式のデータを文書に埋め込む際に一括で扱えるタグです

[基本書式(各種指定)] <object data=”URL(例:../images/img.jpg)” type=”タイプ記載(例:image/jpg)” width=”幅の数値指定” height=”高さの数値指定”>

[説明]ブラウザ側での対応が完全ではないため、限られた状況でしか利用されていないタグです。

内容としては、データの形式ごとに <img>、<embed>、 <bgsound>、<applet>、 <iframe>など使い分けているタグを一括で扱うことができます。

[参考サイト]:<object>タグについて

[参考サイト]:object 要素

 

◇<param>・・・<object>タグで埋め込んだデータのパラメーターを指定するタグです

[基本書式]

<object width=”幅の数値” height=”高さの数値”>

<param name=”パラメーターの名前指定” value=”パラメーターの値を指定”>

</object>

[説明]<pram>タグは<object>タグの子要素として配置するタグで、単体では意味を持ちません。

また、終了タグのないタグになります。

html5ではtype属性・valuetype属性は廃止されたとのことです。

[参考サイト]:<param>タグについて

[参考サイト]:<param>

[参考サイト]:param 要素

[参考サイト]:object 要素(使用例として)

 

 

◆【リスト】・・・リストを表示

◇<ul>・・・順序のないリストを表示するタグです

[基本書式]

<ul>

<li>テキスト1/li>

<li>テキスト2/li>

<li>テキスト3/li>

</ul>

[説明]<ul>タグは順序のないリストを表示するブロックレベル要素のタグです。

ナビゲーションやニュースの項目で使われ、<li>タグと合わせて使います。

type属性として「黒丸(disc)、白丸(circle)、黒い四角(square)」があります。

Type属性を利用する際は、<ul type=”type属性”>と記述します。

[参考サイト]:<ul>タグについて

 

◇<ol>・・・順序のあるリストを表示するタグです

[基本書式]

<ol>

<li>テキスト1</li>

<li>テキスト2</li>

<li>テキスト3</li>

</ol>

[説明]<ol>タグは順序のあるリストを表示するブロックレベル要素のタグです。

ランキング系での表示で使われ、<li>タグと合わせて使います。

順序の表し方はtype属性によって指定することができます。

算用数字(1、2、3、….)=<ol type=”1”>

アルファベット小文字(a、b、c、…) =<ol type=”a”>

アルファベット大文字(A、B、C、…) <ol type=”A”>

ローマ数字小文字(ⅰ、ⅱ、ⅲ、…) =<ol type=” i”>

ローマ数字大文字(Ⅰ、Ⅱ、Ⅲ、…)= <ol type=” I

”>

[参考サイト]:<ol>タグについて

 

◇<li>・・・リストの項目を記述するタグです

[基本書式]

<ul>

<li>~</li>

</ul>

もしくは

<ol>

<li>~</li>

</ol>

[説明]<li>タグはリストの中身テキスト部分となる項目を記述するタグです。

<ul>タグや<ol>で囲う形で記述して利用します。

[参考サイト]:<li>タグについて

 

 

◆テーブル・・・テーブル(表)の作成

◇<table>・・・テーブル(表)を作成するタグです

[基本書式]

<table>

<tr>

<th>~</th>

</tr>

</table>

 

<table>

<tr>

<td>~</td>

</tr>

</table>

 

[応用書式]

<table border=”数値(線の幅)” width=”幅” cellspacing=”数値(枠線とセル内容の間隔)” cellpading=”数値(各セル間の間隔)”>

<tr>

<th>~</th>

</tr>

</table>

 

[説明]ブロックレベル要素のタグになります。

<tabele>タグは<tr>タグで表の横線一行を定義し、その中に<th>タグ(見出しの定義)や<td>タグ(データの定義)でセルを定義して利用します。

一般ブラウザではセル内のテキストは太字でセンタリングされて表示されるとのことです。

注意点としては表として利用するのではなく、見た目を整える目的で<table>タグを利用するのであれば、それはCSSの方で整えるべきという点です。サンプルコードなど詳細は参考サイトをご参照ください。

[参考サイト]:<table>タグについて

[参考サイト]:HTML tableタグを初心者向けに解説&便利な知識5選(2016/08/26)

 

 

◇<tr>・・・テーブル(表)の横線一行を定義するタグです

[基本書式]<tr>~</tr>

[応用書式(align)] セル内の水平方向での位置

中央揃え=<tr align=”center”>~</tr>

左揃え=<tr align=”left”>~</tr>

右揃え=<tr align=”right”>~</tr>

 

[応用書式(valign)]セル内の縦方向での位置

上揃え=<tr valign=”top”>~</tr>

上下中央での揃え=<tr valign=”middle”>~</tr>

下揃え=<tr valign=”bottom”>~</tr>

ベースラインの揃え=<tr valign=”baseline”>~</tr>

[説明]<tr>タグは<table>タグ内に配置され、表の横線一行を定義するタグです。

<tr>タグの中には<th>タグや<td>タグを配置し、セルを定義して利用します。サンプルコードなど詳細は参考サイトをご参照ください。

[参考サイト]:<tr>タグについて

[参考サイト]:tr要素

[参考サイト]:セル内の文字の位置を指定する

 

◇<th>・・・テーブル(表)の見出しセルを作成するタグです

[基本書式]

<table>

<tr>

<th>見出し名</th>

</tr>

</table>

 

[応用書式(align)] セル内の水平方向での位置

中央揃え=<th align=”center”>~</th>

左揃え=<th align=”left”>~</th>

右揃え=<th align=”right”>~</th>

 

[応用書式(valign)]セル内の縦方向での位置

上揃え=<th valign=”topr”>~</th>

上下中央での揃え=<th valign=”middle”>~</th>

下揃え=<th valign=”bottom”>~</th>

ベースラインの揃え=<th valign=”baseline”>~</th>

 

[応用書式(rowspan)]・・・垂直方向の見出しによるセルの結合数を指定する

<table>

<tr>

<th rowspan=”またがるセル数”>見出し名</th>

</tr>

</table>

 

[応用書式(colspan)]・・・水平方向の見出しによるセルの結合数を指定する

<table>

<tr>

<th colspan=”セル数”>見出し名</th>

</tr>

</table>

 

[説明] <th>タグは<table>と<tr>タグ内に配置され、表の見出しセルを作成するタグです。サンプルコードなど詳細は参考サイトをご参照ください。

[参考サイト]:<th>タグについて

[参考サイト]:th要素

[参考サイト]:セル内の文字の位置を指定する

 

◇<td>・・・テーブル(表)のデータセルを作成するタグです

[基本書式]

<table>

<tr>

<th>見出しセル①</th>

<th>見出しセル②</th>

<th>見出しセル③</th>

</tr>

<tr>

<td>見出しセル①の内容</td>

<td>見出しセル②の内容</td>

<td>見出しセル③の内容</td>

</tr>

</table>

 

[応用書式(align)] セル内の水平方向での位置

中央揃え=<td align=”center”>~</td>

左揃え=<td align=”left”>~</td>

右揃え=<td align=”right”>~</td>

 

[応用書式(valign)]セル内の縦方向での位置

上揃え=<td valign=”topr”>~</td>

上下中央での揃え=<td valign=”middle”>~</td>

下揃え=<th valign=”bottom”>~</th>

ベースラインの揃え=<td valign=”baseline”>~</td>

 

[応用書式(rowspan)]・・・垂直方向の見出しによるセルの結合数を指定する

<table>

<tr>

<td rowspan=”またがるセル数”>見出し名</td>

</tr>

</table>

 

[応用書式(colspan)]・・・水平方向の見出しによるセルの結合数を指定する

<table>

<tr>

<td colspan=”セル数”>見出し名</td>

</tr>

</table>

 

[説明]セルの内容が「データ」となるデータセルを作成します。見出しの場合には<th>タグを利用します。

[参考サイト]: <td>タグについて

[参考サイト]:td要素

[参考サイト]:セル内の文字の位置を指定する

 

◇<caption>・・・テーブル(表)にタイトルをつけるタグです

[基本書式]

<table>

<caption>テーブルのタイトル</caption>

<tr>

<td>~</td>

</tr>

</table>

[説明] <caption>タグを利用する際には、<tabele>タグの直後に1つだけ記述します。align属性などの詳細は参考サイトをご参照ください。

[参考サイト]: <caption>タグについて

 

 

◆フォーム

◇<form>・・・入力と送信フォームの作成するタグです

[基本書式]<form>~</form>

[応用書式(action)] <form action=”URL”></form>

(絶対URLサンプル)

<form action=”http://html5.cyberlab.info/elements/forms/sample.php” method=”post”>

<p>入力欄: <input type=”text” name=”sampleInput”></p>

<p><input type=”submit” value=”送信”></p>

</form>

[応用書式(method)] <form method=”HTTPメソッド”></form>

(get=URLの後にデータを付け加えて送信-サンプル-)

<form action=”sample.php” method=”get”>

<p>入力欄: <input type=”text” name=”sampleInput”></p>

<p><input type=”submit” value=”送信”></p>

</form>

 

(post=URLの後にデータを付け加えないで、ボディ部に格納して送信-サンプル-)

<form action=”sample.php” method=”post”>

<p>入力欄: <input type=”text” name=”sampleInput”></p>

<p><input type=”submit” value=”送信”></p>

</form>

[応用書式(enctype)] <form enctype=”エンコード・タイプ”></form>

[説明] 入力・送信フォームを作成する際に利用するタグになります。フォームに入力されたデータは、送信ボタンを押すことでCGIプログラム等へ送信され、一定の処理が行われます。 その際の送信先はaction属性で、転送方法はmethod属性で、データ形式はenctype属性でそれぞれ指定します。詳しくは参考サイトをご参照ください。サンプルコードなど詳細は参考サイトをご参照ください。

[参考サイト]:<form>タグについて

[参考サイト]:form要素

[参考サイト]:データの送信形式と送信先を指定する

[参考サイト]:formタグのaction,method属性の使い方と特性〜html,slimでの記述方法〜(2014/12/25

)

 

◇<input>・・・フォームを構成する部品(チェック項目や送信ボタンなど)を作成するタグです。

[基本書式]<input>

※サンプルコードは参考サイトをご参照ください。

[応用書式(type)] <input type=”入力用ユーザーインターフェースのタイプ”>

[応用書式(name)] <input name=”名前”>

[応用書式(value)] <input value=”値”>

[応用書式(size)] <input size=”文字数”>

[応用書式(maxlength)] <input maxlength=”文字数”>

[応用書式(checked)] <input checked>

[応用書式(.src)] <input type=”image” src=”URL”>

[説明]<input>タグに終了タグはありません。type属性はデータ入力用ユーザーインターフェースのタイプを指定する属性、name属性は名前を指定する属性、value属性は値を指定する属性、size属性は幅を文字数で指定する属性、maxlength属性は最大文字数を指定する属性、checked属性は選択済みにする属性、src属性は画像のURLを指定する属性です。サンプルコードなど詳細は参考サイトをご参照ください。

[参考サイト]:<input>タグについて

[参考サイト]:input要素

[参考サイト]:input 要素-<input>フォームの部品

 

◇<select>・・・選択メニューを作成するタグです

[基本書式] <select></select>

[応用書式(name)] <select name=”名前”></select>

[応用書式(size)] <select size=”同時表示選択肢数”></select>

[応用書式(multiple)] <select multiple></select>

[説明] <form>~</form>内に記述しないと無視されるので注意が必要です。name属性は名前を指定する属性、multiple属性は複数の値を入力できるようにする属性、size属性は同時に表示する選択肢の数を指定する属性です。サンプルコードなど詳細は参考サイトをご参照ください。

[参考サイト]:<select>について

[参考サイト]:select要素

 

◇<option>・・・選択式メニューやデータリストの選択肢を表す要素になります。

[基本書式] <option>選択肢名</option>

[応用書式(selected)-1選択]

<select name=”sampleName”>

<option>選択肢1</option>

<option selected>選択肢2</option>

<option>選択肢3</option>

</select>

[応用書式(selected)-複数選択]

<select name=”sampleName” multiple>       <option selected>選択肢1</option>       <option>選択肢2</option>       <option selected >選択肢3</option></select>

[応用書式(value)] <option value=”値”></option>

(-サンプルコード-)

<select name=”sampleName”>

<option value=”値1”>選択肢1</option>

<option value=”値2”>選択肢2</option>

<option value=”値3”>選択肢3</option>

</select>

[説明] 選択肢を指定するタグです。 <OPTION>タグ1つにつき、1つの選択肢となります。selected属性は予め選択状態にしておく属性、value属性は値を指定する属性になります。

[参考サイト]:<option>タグについて

[参考サイト]:option要素

 

◇<textarea>・・・テキストエリアを表す要素になります。

[基本書式] <textarea></textarea>

[応用書式(name)] <textarea name=”名前”></textarea>

[応用書式(rows)] <textarea rows=”行数”></textarea>

[応用書式(cols)初期設定は20文字] <textarea cols=”文字数”></textarea>

[説明]アンケートなどで入力するテキストエリアを作成するタグになります。name属性はテキストエリアの名前を指定する属性、rows属性はテキストエリアの高さを行数で指定する属性、cols属性はテキストエリアの幅を文字数で指定する属性になります。サンプルコードなど詳細は参考サイトをご参照ください。

[参考サイト]:<textarea>について

[参考サイト]:textarea要素

 

 

◆HTMLとCSSの関係について

◇<link>・・・外部リソースを関連付ける要素になります

[基本書式(使用例-CSS-)

]<link rel=”stylesheet” href=”style.css” type=”text/css”>

[応用書式(rel,href,type)]

[説明] と外部リソースを関連付ける要素で、部リソースとは、外部スタイルシートやファビコンなどのことを指します。href属性とrel属性は、必須になります。rel属性外部リソースとの関連性を指定する属性、href属性は外部リソースのURLを指定する属性、type属性は外部リソースのMIMEタイプを指定する属性になります。

[参考サイト]:<link>タグについて

[参考サイト]:link要素

 

 

◇<style>・・・スタイルシートを記述するタグです

[基本書式]

<style type=”text/css”>

<!–

中身

–>

<head>

</style>

</head>

[応用書式(style)]CSSをタグに直接記述する方法です

例1:1つ)<p style=”color:darkred;”>テキスト<p>

例2:複数) <p style=”text-indent: 1rem; color: darkred; background-color: lightgreen;”>テキスト</p>

[説明]HTML内にCSSの記述をする際の方法になります。<head>内に記述し、内容を<!—->で囲うことでテキストとして出てくることを防ぐ目的があるとものこと。直接タグに書き込む方法もありますが、CSSは<link rel=”stylesheet” href=”css/style.css”>のように<link>タグで読み込む形が整理しやすくおすすめです。

[参考サイト]: <style>タグについて

[参考サイト]:style要素

 

 

◇<div>・・・特定の範囲をグループ化したい際に使うタグです

[基本書式]<div>~</div>

使用例)

<div>

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

</div>

[説明]<div>は特別な意味を持たないブロックレベル要素のタグになります。混在しがちな<p>タグとは、<p>タグが段落という目的があるのに対し、<div>タグは特別な意味を持ちません。そのため、該当するタグが無い場合や特定の範囲をグループ化したい際に使います。

[参考サイト]: <div>タグについて

[参考サイト]:div要素

 

 

◇<span>・・・ひとかたまりの範囲として定義するタグです

[基本書式]<span>~</span>

[説明]<div>タグと同じく特別な意味を持たないタグになります。ただし、<span>タグはインライン要素のタグです。<p>タグなどの中身のテキストを囲う際などに使います。

[参考サイト]: <span>タグについて

[参考サイト]:span要素