苦学楽学塾

　苦学楽学塾　ホームページ

	苦学楽学塾
	－HTMLのタグ－

最終更新日：2024年12月22日

　HTMLのタグについて説明します。ブラウザによって動作が異なるのですが、以下は、Google Chromeの場合です。HTML化でも書いた、

<html>

<head>

<title>こんにちは</title>

</head>

<body>

こんにちは

</body>

</html>

というHTMLコードですが、ここに書き足して、サーバーにアップすれば、ウェブサイトを構築できますが、実は色々な約束ごとがあります。まず、HTML文書の先頭に、それが、HTML文書だということを示す、

<!DOCTYPE HTML>

という記述を入れます。次に、

と記述して、HTMLファイルであるとともに、日本語の文書であることを明示します。lang="en"とすると英語の文書、lang="zh"とすると中国語の文書、lang="ko"とすると韓国語の文書だと、ブラウザが判断します。ドイツ語は"de"，フランス語は"fr"です。この後に、

<head>

が来ます。ここから、HTMLの属性情報(メタ情報)が並びます。この部分をヘッダと言います。重要なものとしては、

XXXXXXに、このHTML文書が何について書いているのかをカンマ','で区切って数語の言葉で記述します。あまりたくさん書くと、Google検索で不利になると言われています。

YYYYYYに、このHTML文書について簡単に説明を書きます。Google検索でそのサイト紹介する文字列として使われる、と言われています。

このHTML文書をGoogle検索させたくない場合には、ZZZZZZにnofollowを指定します。この文書のリンク先を検索エンジンにたどらせたくない場合には、noindexを指定します。両方設定する場合には、nofollow,noindexとします。meta name="robots"が書かれているメタ・タグを指定しなければ、その文書がGoogle検索対象になるとともに、その文書のリンク先も検索対象になります。

とすると、この文書の文字コードがShift-JISであることを示します。

とすると、この文書の文字コードがUTF-8であることを示します。日本語の文書であっても、Shift-JISとUTF-8のいずれもあるので、どちらなのかを指定します。

<title>WWWWWW</tile>

WWWWWWにこの文書のタイトルを記述します。このタイトルがブラウザのタブのところに表示されます。

　JavaScriptのプログラムを記述する場合は、<script>と</script>の間に記述します。JavaScriptについては、こちらを参照してください。

　CSS(Cascading Style Sheet)の記述を入れる場合は、<style>と</style>の間に記述します。CSSについては、こちらを参照してください。

文書の属性情報の記述の最後、つまりヘッダの最後に、

</head>

を入れます。

　その後が、HTML文書のブラウザ画面に表示される内容を記述する本体部分になります。本体部分は、<body>タグと</body>タグで挟みます。<body>タグにCSS記述をつけると、background-colorの指定や、文字フォントのデフォルト指定ができます。例えば、

とすると、背景色を黒、デフォルトの文字色を白、文字フォントをHGP明朝E，フォント・サイズを大、に指定できます。このスタイル指定をヘッダ<head>～</head>の間のCSS記述(本ページでは、ヘッダCSSと言うことにします)に入れることもできます。CSS記述内で、ピリオド'.'を先頭に付けるとクラス名になりますがピリオド'.'を付けない場合には、タグ名と見なされます。上記の<body>タグのCSS記述を、ヘッダCSSに入れて、

body{background-color:black;color:white;font-family:HGP明朝E,sans-serif;font-size:large;line-height:150%}

としても全く同じ表示を行います。

　以下、本体部分で使用される重要なタグを説明します。

<div>　部門を意味するタグで、ブロック要素(前後に自動的に改行が入ります)です。CSS記述により、文章表示(右端で自動的に改行)にも、矩形枠表示にもできます。<div>～</div>の中に、さらに<div>～</div>を入れ、そこにCSS記述する、という具合にして、自由なレイアウトを可能にします。<div>～</div>には、文字情報だけでなく、画像や動画を配置することになります。

　HTML文書内でのデフォルトを左端から表示とするのであれば、ヘッダCSSに、

div{margin-left:0em}

と記述します。

　左端から全角文字1文字分空けて表示する行の場合には、ヘッダCSSで、クラス名をd1(先頭にピリオド'.'を付けます)として、

d1{margin-left:1em}

というようにクラス記述を行い、<div>タグに、

としてクラス指定を行えば、この<div>では、左端から1文字分空けて表示します。この<div>を、<div style="margin-left:1em">とすることもできます。ヘッダCSS内にクラスとして記述しておけば、このクラスの記述を修正することにより、クラス名"d1"の<div>を一括して修正できます。

　矩形枠を表示するのであれば、幅と高さを指定し、枠の幅、色をします。ヘッダCSSで、クラス名をboxとして、

box{border:solid 2px purple;background-color:lightyellow;border-radius:8px;width:320;height:200;margin:8px;padding 8px;color:green}

s1{color:blue}

s2{color:red}

としておき、

<div class="box"><p class="s2">これがボックスです。</p><p class="s1">高さ200px、幅320pxです。</p><p>この中で文章を書いたり、画像を入れたりします。</p></div>

とすれば、背景色が薄黄色の紫色矩形枠内に、赤字で「これがボックスです。」、青字で「高さ200px、幅320pxです。」、枠のデフォルト色の緑の字で「この中で文章を書いたり、画像を入れたりします。」と表示されます。なお、半径8pxのラウンドを四隅につけています。

　<div>では原則前後で改行するのですが、<div>を入れ子にして外側の<div>にdisplay:flexを指定すると内側の<div>で改行しなくなります。

<p>　段落を意味するタグで、ブロック要素なので、<p>～</p>の前後で原則改行します。</p><p>となるところでは2行改行せず、1行改行になります。<p>タグにデフォルトの文字指定を行うのであれば、ヘッダCSSで、

p{color:green;font-family:'Meiryo UI';font-size:large;line-height:150%}

のように指定します。緑色の字で、メイリオ・フォントのlargeサイズです。

　<p>では原則前後で改行するのですが、<p>タグにCSSでdisplay:inlineを指定すると改行しなくなります。

<span>　単にspanを取るというだけでタグ自身では何もしないタグですが、前後で改行しないので1行中の文字に対して、CSSで文字色やサイズ、太さを指定するのに使います。あらかじめ、ヘッダCSS中で、

red{color:red}

pink{color:pink}

cyan{color:cyan}

としておけば、

<div><p><span class="red">赤い文字で書きます。</span><span class="pink">ピンクの文字で書きます。</span><span class="cyan">水色の文字で書きます。</span></p></div>

と記述すると、

赤い文字で書きます。ピンクの文字で書きます。水色の文字で書きます。

と表示されます。

<a>　リンクを作るタグです。幅広い用途に対応しているのですが、セキュリティー上問題点を含むタグなので、ここでは、他のページ、他のウェブサイトへのリンクについてのみ説明します。リンクだけであれば、href，target，relの3つの属性のみでOKです。

href　リンク先のURLを指定します。

target　リンク先をどう表示するかを指定します。下記が指定可能です。

_blank　現在表示中のウィンドウとは別の新規ウィンドウ(あるいはブラウザの新規タブ)を作って表示します。

_self　現在表示中のウィンドウにリンク先を表示します(指定しなくても現在表示中のウィンドウに表示します)。

rel　rel="nofollow"とすると、Google検索エンジンにリンク先をたどらないように指示します。

　例えば、苦学楽学塾の「C言語のすすめ」というページにリンクを張るなら、以下のように記述します。<a>と</a>の間に表示する文字列を入れて、

< a href="clang.html">C言語のすすめ</a>

とします。新しいウインドウを作って表示するなら、

< a href="clang.html" target="_blank">C言語のすすめ</a>

ここで1つ注意することがあります。画面に表示させる文字「C言語のすすめ」の上にマウスを持っていくときに、文字色を変えることができるのですが、CSSで文字色を設定してしまうと、文字色が変わらなくなります(下線の色は変わります)。

strlink{font-family:'Meiryo UI';font-size:large;line-height:150%}

という具合に、文字色を指定せず、フォント、サイズだけを指定するクラスstrlinkをヘッダCSSで用意し、さらに、

a:link{color:white}

a:visited{color:yellow}

a:hover{color:orange}

a:active{color:red}

と記述しておけば、

< a href="clang.html"><span class="strlink">C言語のすすめ</span></a>

これで、「C言語のすすめ」の上にマウスを持ってくると、文字色が変わるようになります。

<img>　画像を表示するタグです。拡張子が.png，.jpg，.gifなどのファイルを表示できます。width，height，src，altという属性を持ちます。

width　画像の幅をpx単位で指定します。

height　画像の高さをpx単位で指定します。

src　画像ファイルのURLを指定します。

alt　代替文字(画像が表示できない場合、あるいは、表示に時間がかかる場合にここで設定する文字列を表示します)を指定します。

例えば、東大理系数学23年[6]で使われた画像を表示するのであれば、

というように記述します。width，heightを書くなら、

となりますが、ブラウザが画像ファイルからサイズ情報を読み取って表示するので、指定しなくてもOKです。本来の画像サイズと異なる値を指定すると、それなりに拡大縮小して表示します。なお、<img>には閉じるタグ</img>はありません。

<br>　改行させます。HTML文書中に改行を入れても無視されます。ブラウザの画面上で改行させるためには、改行させたい位置に<br>を入れます。

<p>いろはにほへとちりぬるをわかよたれそつねならむうゐの<br>おくやまけふこえてあさきゆめみしえひもせすん</p>

とすると、「つねならむうゐの」の後で改行して表示されます。

　以前は、clearという属性があり、画像での文字回り込みの設定解除をするときに、<br clear=both>としていましたが、非推奨となり、今ではCSSを用いて、<br style="clear:both">とします。

<hr>　表示内容が大きく切り替わるところで、区切り線を入れます。color(線色)，size(線幅)，width(線の長さ)といった属性がありますが、非推奨となり、今ではCSSを用いて指定します。

という具合に指定します。border-width:4pxではやや太い感じですが、brder-width:2pxでは細い感じです。

<table>　表を構成するタグで、ブロック要素です。レイアウト目的で<table>タグを使ってはならない、と書いているウェブサイト、書籍が多数存在しますが、将来、HTMLの<table>タグが表示目的で使うことが不可能な仕様になったら、そうかも知れませんが、現状は、縦横をそろえて表示させるのにとても便利なタグです。レイアウト目的で<table>タグを使うと犯罪だ、というわけでもないので、当ウェブサイトは増減表以外でも、更新履歴など、レイアウト目的で積極的に<table>タグを使っています。<tr>，<td>，<th>などのタグと組み合わせて使います。

　<table>は、基本的に以下のように使います。

　　･･････

<tr><td>データm1</td><td>データm2</td>　･･･　<td>データmn</td></tr>

</table>

項目行だけ異なるスタイルで表示したい、ということも多いので、項目行に、<th>タグを使います。<th>タグの行がなくてもOKです。項目名などを<th>～</th>に記述します。データ本体には<td>タグを使います。各セルのデータは<td>～</td>に記述します。ヘッダCSSで、<td>タグにデフォルトのstyle記述しておけば、table内のデータ本体の全セルのスタイルを一括設定できます(勿論、セルごとにスタイル設定することも可能です)。<tr>タグは1行分をまとめる働きをしています。行ごとのスタイルは<tr>タグに設定できます。列ごとにまとめるのには、<colgroup>タグ(列の数をspan属性で設定します)を使います。<colgroup>で複数列をまとめるときは、1列ずつ<col>タグを設定します。

<table><colgroup class="col1" span="1"><colgroup class="col2"><col span="1"><col span="1"></colgroup><tr><th>　･･･

のように指定します。span属性で指定する列数が、他の行と合わないと表示が崩れます。

　表のタイトルを付けるのであれば、<table>の直後に、<caption>～</caption>を置き、この間にタイトルを記述します。

<input>　様々なデータ入力の手段を提供するタグです。name属性で名前を設定します。value属性で初期値を設定します。width属性で幅、height属性で高さを指定します。type属性の設定により様々な機能が可能です。以下はGoogle Chromeでの<input>タグの動作です。

type="text"　1行分のテキスト入力枠です。size属性で入力枠の文字数を指定します。list属性に<datalist>タグのidに設定した文字列を指定すると候補文字列を出すことができます。

type="url"　URL文字列入力枠です。

type="email"　emailアドレス文字列入力枠です。

type="password"　パスワード文字列入力枠です。入力した文字は伏字で表示されます。

type="date"　日付入力枠です。右側のボタンをクリックするとその月のカレンダーが出てきて日付を入力できます。

type="month"　年月入力枠です。右側のボタンをクリックすると、その年の月の中から月を選べるようになっています。

type="week"　その年の何週めかを入力する枠です。右側のボタンをクリックするとカレンダーを表示して、何週めかを選択できるようになっています。

type="time"　時刻文字列入力枠です。右側のボタンをクリックすると時・分のローラーが出てきて時分を選択できるようになっています。

type="number"　max属性とmin属性を指定してその間の数字を入力する枠を表示します。

type="range"　スライダー操作により数値入力する枠です。

type="color"　色コード設定ボタンを表示します。右側のボタンをクリックすると、色コードを取得できるダイアログが出てきます。

type="checkbox"　チェックボックスを表示します。

type="radio"　ラジオ・ボタンを表示します。

type="file"　ファイル選択ボタンを表示します。クリックするとファイルダイアログが開きファイル選択が行えます。

type="button"　ボタンを表示します。value属性に設定した文字列をボタンに表示し、ボタンをクリックすると、onclick属性に設定されたJavaScriptメソッド・関数を起動します。

<datalist>　対応する<input type="text" list="list1">タグに候補文字列を与えるタグです。この場合は、id属性に"list1"を指定します(他の文字列でもOKです)。候補文字列は、<option>タグを用いて、以下のように記述します。

マウスをテキスト入力枠の上に持っていき、未入力のテキスト枠に入力しようとすると、候補文字列が表示されます。

<button>　JavaScriptを起動するボタンを配置します。type属性には"button"を指定してください。name属性にはボタン名を指定します。onclick属性にはJavaScriptのメソッド、関数を指定します。

<button type="button" name="jump" onclick="location.href='clang.html'">C言語のページに飛びます</button>

とすると、「C言語のページに飛びます」と書かれたボタンが表示され、これをクリックすると、clang.htmlに飛びます。<button>タグで、リンクの<a>タグと同様の機能をさせることができます。onclick属性に設定したJavaScriptのメソッド・関数を起動することもできます。

<label> ボタンやテキスト入力枠に説明文字列を付けます。

<div><label>名前を入力してください。<input type="text" class="ip1" size="10"></label></div>

とすると、画面に「名前を入力してください。」という文字列を表示し、その横にテキスト入力枠を表示します。

<select>　リストメニューを表示します。リストメニューの各項目は、<option>タグで指定します。autocomplete属性を設定すると、オートコンプリートします。multiple属性を設定すると、複数項目選択可能になります(Ctrlキーを押しながらクリックする)。項目数をsize属性に設定します。

とすると、画面に、東京都、神奈川県、埼玉県を選択するリストメニューが表示されます。multipleが設定されているので複数項目を選択できます。

<textarea>　<input type="text">では1行分の入力枠ですが、複数行の入力枠を作ります。name属性で名前を設定します。cols属性で入力枠の横幅を文字数で設定します。rows属性で入力枠の高さを文字数で設定します。autocomplete属性を設定すると、オートコンプリート(form内要素の場合、前回の入力内容をブラウザが記憶していて少し入力しただけで自動補完します)します。maxlength属性に最大文字数を設定します。minlength属性に最小文字数を設定します。<textarea>～</textarea>の文字列が初期表示されます。

<b>　元々文字を太字で表示するときに使っていたタグですが、HTMLの表示装飾はCSSで行う、という方針のもと非推奨になりました。ですが、表示用に便利なタグなので、ヘッダCSS中で、

b{font-wieght:bold}

としておき、

<p>日本の課題は、<b>科学技術</b>を推進することです。</p>

とすれば、「科学技術」が太字で表示されます。

<i>　元々文字をイタリック(斜体)で表示するときに使っていたタグですが、HTMLの表示装飾はCSSで行う、という方針のもと非推奨になりました。ですが、表示用に便利なタグなので、ヘッダCSS中で、

i{font-style:italic}

としておき、

<p>日本の課題は、<i>science</i>を推進することです。</p>

とすれば、「science」が斜体で表示されます。文字フォントによっては、斜体が用意されていないフォントもあるので注意してください。

<u>　元々文字を下線付きで表示するときに使っていたタグですが、HTMLの表示装飾はCSSで行う、という方針のもと非推奨になりました。ですが、表示用に便利なタグなので、ヘッダCSS中で、

i{text-decoration:underline}

としておき、

<p>日本の課題は、<u>科学技術</u>を推進することです。</p>

とすれば、「科学技術」が下線付きで表示されます。

<mark>　ハイライト表示するタグです。Google Chromeでは、黄色の背景色で文字が表示されます。背景色を変更したい場合には、CSS記述します。

<p>日本の課題は、<mark style="background-color:green">科学技術</mark>を推進することです。</p>

とすれば、「科学技術」が緑色の背景色で表示されます。

<sup>　上付きの文字で表示します。xの2乗x²の2を表示するのに使います。

<sub>　下付きの文字で表示します。数列aの1番目a₁の1を表示するのに使います。

<ol> 順序あるリストで、ブロック要素です。リストの項目は、<li>タグで指定します。CSSでlist-style-typeを指定することにより、表示形式を変えることができます。

を、<ol style="list-style-type:decimal">～</ol>で挟むと、

1. 東京都

2. 神奈川県

3. 埼玉県

4. 千葉県

のように表示します。<ol style="list-style-type:lower-alpha">～</ol>で挟むと、

a. 東京都

b. 神奈川県

c. 埼玉県

d. 千葉県

のように表示します。<ol style="list-style-type:hiragana">～</ol>で挟むと、

あ、東京都

い、神奈川県

う、埼玉県

え、千葉県

のように表示します。list-style-typeには、他に、upper-alpha(大文字A，B，C，･･･)，lower-roman(i，ii，iii，･･･)，upper-roman(Ⅰ，Ⅱ，Ⅲ，･･･)，katakana(ア､イ、ウ、･･･)，hiragana-iroha(い、ろ、は、･･･)などが可能です。

<ul>　順序なしリストで、ブロック要素です。<ol>同様、リストの項目は、<li>タグで指定します。CSSでlist-style-typeを指定することにより、表示形式を変えることができます。

を、<ul style="list-style-type:disc">～</ul>で挟むと、

● 東京都

● 神奈川県

● 埼玉県

● 千葉県

のように表示します。<ul style="list-style-type:circle">～</ul>で挟むと、

○ 東京都

○ 神奈川県

○ 埼玉県

○ 千葉県

のように表示します。<ol style="list-style-type:square">～</ol>で挟むと、

■ 東京都

■ 神奈川県

■ 埼玉県

■ 千葉県

のように表示します。

<li>　リストの項目を指定します。<ol>タグ、<ul>タグと組み合わせて使います。

と書かれたリストを<ol>～</ol>または、<ul>～</ul>で挟みます。

<nav>ウェブサイト上部で、現在ページの位置を示しながら、ガイドのリンクを張るのに使います。<nav>に特に意味はありません。<nav>と</nav>の間にリンクのリストを入れます。

<nav>

<ol>

<li style="display:inline"><a href="../index.html">TOPページ</a> > </li>

<li style="display:inline"><a href="index.html">情報TOP</a> > </li>

<li style="display:inline"><a href="hlang.html">ホームページ制作</a> > </li>

<li style="display:inline">HTMLのタグ</li>

</ol>

</nav>

とすると、3つのリンクと「HTMLのタグ」が" > "で分離して横に表示されます。display:inlineの指定は横に表示させるためです。

<pre>　HTML文書内では、通常は、改行は無視され、複数個の空白' 'は、1個の空白に詰められてしまうのですが、<pre>～</pre>の間は、そこに記述されている通りに表示します。改行すれば改行され、そこに書かれている空白は書かれている通りに表示されます。C言語、Pythonなどのソース・コードを表示するのに使います。

<wbr>　長い文章で改行可能な位置を指定します。

<p>いろはにほへとちりぬるを<wbr>わかよたれそつねならむ<wbr>うゐのおくやまけふこえて<wbr>あさきゆめみしゑひもせすん</p>

のようにしておくと、幅の狭いブラウザで表示するときに、<wbr>が置かれている箇所で優先的に改行されます。

<audio>　<img>タグ同様に、src属性に、音声ファイルのURLを指定して、音声ファイルを再生します。

<canvas>　図形を描画するためのcanvasを画面上に確保します。width属性にcanvasの幅、height属性にcanvasの高さを指定します。<canvas>～</canvas>に代替文字列(通常は、canvas機能のないブラウザでcanvasが使えないことを明示する)を指定します。canvasに図形を描く方法は、JavaScriptの図形描画を参照してください。

コメントを示します。の間の記述はブラウザにより無視されます。注意書きをするのに使います。

　<form>タグは、サーバーにデータを送信したあと、CGIによって解析する必要があり、説明を省略します。

　その他にも多数のタグがありますが、上記のタグで充分多様な表現が可能です。

TOPページに戻る　　

情報TOP　　

苦学楽学塾ご案内　　

数学のページ　　

物理のページ　　

楽天ブログ　　

苦学楽学塾ブログ　　

苦学楽学塾twitter　　

活動報告ブログ　　