HTMLの基本

基本構造の例

こんな感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>ヘッダー</h1>
<p>これは<a href="demo.html">リンク</a>の例</p>
</body>
</html>

とりあえず表示したいんだけど

  1. テキストエディタを開く
  2. 上の「こんな感じ」のやつをコピペする
  3. a.htmlといった名前でファイルに保存する
  4. a.htmlをダブルクリックする
    • するとブラウザでファイルが開くはず
    • うまくいかない場合はブラウザにドラッグ&ドロップ
  5. 見れた?
  6. テキストエディタで適当に編集してみる
  7. 再びブラウザで開く(ダブルクリックするかドラッグ&ドロップする)と反映されているはず

基本構造

HTMLは要素の集まりでできている。以下の図のような構造になっている。

aが要素名。要素名と属性名は大文字小文字を区別しないので、hogeでもHOGEでもhOGeでも良い。

<p>これは<a href="demo.html">リンク</a>だよ。</p>

上記の例ではp要素内にa要素がある。これはp要素にa要素を入れ子(ネスト)している状態。入れ子構造はちゃんとする。一部、例えば

<p>これは<ins>追加された要素だよ。</p><p>ここも追加</ins>したよ</p>

みたいな事もできるものもあるけど、やめといたほうが良い。

上の基本構造の例では各々の要素の説明にリンクしているので、軽く覗いてみても良いかも知れない。

開始タグ

開始タグは、<の後にすぐ要素名、空白類を挟んで0個以上の属性を並べる。属性の後に>で閉じる。属性後と>の間には空白類を置いて良い。

○<hoge hoge="fuga" >
✗< hoge hoge="fuga">

属性

属性は、属性名で始まり、=記号が続き、値を指定。=の周りにスペースを含んでも良い。

値は空白類を含まない場合は大抵そのまま記述出来るが、空白類を含む場合(例えばキーワードをスペース区切りで列挙する場合)はシングルクォート(')かダブルクォート(")で囲む。それぞれ、値にシングルクォート・ダブルクォートを含む場合は文字実体参照に(シングルクォートは「&#39;」に、ダブルクォートは「&quot;」に)する必要がある。大抵の場合は、値にシングルクォートを含む場合はダブルクォートで囲む、と逆のものを利用する。

○hoge = fuga
○fuga = 日本語
○fuga='are"to"sore'
○hoge="<s'and>"
✗fuga=are to sore
✗hoge=s'and

複数の属性を指定する事もできる。それぞれの属性は1つ以上の空白類で区切る。

○hoge="fuga" moga="doya"
✗hoge="fuga"moga="doya"

一部の属性は属性名のみでも良い場合がある。その場合は属性名だけ書く。

○hidden

だいたいは属性名がある場合はその機能がON、無い場合はOFFという感じになる。この場合はhiddenがONなので、「隠す」機能がON、つまり隠れている(表示されない)という事だ。

終了タグ

終了タグは、</のすぐ後に要素名、任意の空白類、閉じる。

○</hoge >
✗< /hoge>
✗</ hoge>

空要素 (void element)

要素の中には、内容を持たない要素がある。brもその一つ。その場合は、<br>と開始タグだけ書く。つまり、開始タグが要素とイコールになる。<br/>といった書き方も可能。要素名と/の間には空白類があっても良い。/と>の間はダメ。

ただし、中身が空だからと言って例えば<p/>などとしてはいけない。

どの要素が空要素かと言うと、継承関係の図で子孫の記載が無いのがそれ。

コメント

<!--で始まり、コメント、-->で終わる。

細かいけど、コメント部分は>と->で始まらず、<!--と-->と--!>を含まず、<!-で終わらない。

○<!--My favorite operators are > and <!-->
○<!-------------------------------------->
✗<base <!--href="../"--> target=_blank

改行と半角スペース

HTML上では、改行と半角スペースは空白類と呼ばれ、いくつ連続して入力しても1つのスペースにまとめられる。

<p>あ      め


んぼ</p>
↓表示上は...
あ め んぼ

改行したい場合はbrを、複数のスペースを使いたい場合は&nbsp;を利用する。

これは英文を意識したもので、英文だと、

<p>This is a pen.
This is a painapo-.</p>
↓表示上は...
This is a pen. This is a painapo-.

となって、違和感無くつながる。しかし日本語で同じような事をすると、変に読点の後ろが空いちゃうので微妙なのだ。

ちなみに「空白類」には全角スペースは含まれないので、強引にスペースを連続して空ける手段としては利用できる事がある。できるが、プログラムのコード例のインデント等に利用されるとめっちゃ迷惑なのでやめよう。

HTMLなのに、どうやってタグ表示してるの?

ってそろそろ不思議に思っているはずだ。たぶん。そういう時は文字参照を使う。ギョーカイヨーゴでは「エスケープする」と言っていたりいなかったりする。だいたい以下の5つを覚えておけば何とかなる。

&lt; < 右大不等号。
&gt; > 左大不等号。
&amp; & アンドマーク。アンパサンド。
&quot; " ダブルクォート。引用符。
&nbsp; だいたい空白文字。

例えばこんな感じで使う。

&lt;link rel=&quot;alternate&nbsp;stylesheet&quot; href="a.css?a=b&amp;c=d"&gt;
↓表示上は...
<link rel="alternate stylesheet" href="a.css?a=b&c=d">