TM_BBのHTML | HTMLタグについて

HTMLタグについて

2019/06/16

先ずは下の記述を見て下さい。
最もシンプルな『HTMLの記述』です。
下の記述の枠内にマウスオンすると、右上にHTMLCopyというボタンが出ます。
Copy をクリックして、Copied! に変わったら枠内が全部コピーされています。
『メモ帳』等のエディターにペースト(貼り付け)して、名前は名称未設定でも何でも構わないので『〜〜.html』という風にデスクトップにでも保存してみて下さい。

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
<title>タイトル</title>
  </head>
  <body>
ここに本文を記述　
  </body>
</html>

下図が『test.html』という名前の保存例のアイコンをマウス右クリックで『メモ帳』等で開いたイメージです。

アイコンを普通にクリックすると、ブラウザが開いて真っ白な画面の左上に『ここに本文を記述』の文字だけが出ると思います。

２種類のタグ

今回ご紹介したいのは下の２種類のタグについてです。
どう２種類やねん？　ごもっともです。
色分けしてみました。

<!DOCTYPE html> <html> 　<head> 　　<meta charset="UTF-8"> <title>タイトル</title> 　</head> 　<body> ここに本文を記述　</body> </html>

セットのタグ

通常は、このように <開始>と</終了> の１セットとなります。

他には、 <p>と</p>、<div>と</div>、<span>と</span> 等。

単独のタグ

<!DOCTYPE html>、<meta charset="UTF-8">

他には、 <br>、<hr> 等。

単独のタグは上にあげたものくらいです。通常よく使うタグはセットのものがほどんどです。

見えないタグ

先ほど紹介した２種類のタグは、サイトをネットに公開するためのタグです。
それとは別に、注釈を入れたり出来る、ブラウザ上は見えないタグがあります。

下図は、『test.html』に加筆してブラウザ(Safari)で開いたイメージです。

下図は、その『test.html』です。

の間は、記述が有ってもブラウザ上は見えません。
なので、や、 という使い方ができます。

タグは全て、半角英数で記述します。大文字でもOKですが、その場合、全部大文字に統一しないと混乱を招きます。なので、通常は半角英数小文字を使うようにしましょう。
通常じゃない場合は？と言うと、素敵なカラーサンプルを提供して下さっているサイトさんで、色コードを『#大文字６桁』にしておられる所があるからです。コードをコピペでもらってきて、わざわざ小文字に変更する段階で間違っちゃったら全然違う色になってしまいます。コピペした色コードくらいは大文字が混ざってもOKです。

それと、あと注意したいのは、” や ’ です。この２つは全角です。半角は、" と ' です。
もしも、ご利用のメモ帳等のエディターが、全角の” や ’ で表示されてしまう場合は、別のエディターを入手しましょう。
＜無料エディター＞
Windows：「TeraPad」等。
Mac：「CotEditor」等。