★HTMLの基本
| HTMLの書き方
<開始タグ>～</終了タグ>で内容を囲むHTMLタグの使い方は、とても簡単です。<開始タグ>～</終了タグ>で内容を囲めば、 要素（element）の種類を指定することができます。 ウェブページ内の各部分をどのような要素に割り当てるかによって、 タグの種類を使い分けます。
以下の例では、<p>タグを使用して<p>～</p>の部分が段落（paragraph）となるp要素であることを示しています。
<p>段落となります。</p> ↓↓↓↓
段落となります。 開始タグが<p>、終了タグが</p>、<p>～</p>で囲まれた中身の部分が要素の内容となります。
属性を指定するHTMLでは、それぞれタグの種類ごとに指定できる属性の名称とその値が定義されています。 タグに属性を追加することで、要素のサイズや配置などをより詳細に指定できます。
以下の例では、<p>要素のalign属性に center という値を指定して、段落を中央揃えにするように指定しています。
<p align="center">段落となります。</p> ↓↓↓↓
段落となります。 属性を指定する際には、値を引用符で囲んで指定します。 使用する引用符は、半角のダブルクォーテーション（ " ） 、または、半角のシングルクォーテーション（ ´ ）のどちらでも構いません。
尚、HTMLでは、引用符を省略できる場合がありますが、使用することが推奨されています。 また、後で解説するXHTMLでは引用符を省略することはできないので、XHTMLへ移行する可能性があるなら引用符は省略しないほうが良いでしょう。
複数の属性を指定する場合には、以下の例のように半角スペースで区切って記述します。属性を記述する順序は問われません。
<p id="sample" align="center">段落となります。</p> タグは入れ子にできる
タグは入れ子（ネスト）にすることができます。 例えば、<p>タグと<strong>タグを入れ子にして、 段落（paragraph）のなかの特定箇所だけを、強調（strong）することができます。タグの順番は前後しないように正しく配置します。
正：正しい入れ子 <p id="sample" align="center"><strong>段落</strong>となります。</p> 誤：間違った入れ子 <strong><p id="sample" align="center">段落</strong>となります。</p> </終了タグ>を省略できる要素
HTMLでは、<開始タグ>～</終了タグ>が基本形ですが、 <p>タグや<li>タグなど、HTMLタグの一部には終了タグを省略しても良いとされているものもあります。 ただし、XHTMLでは終了タグを省略することができないので、省略できる場合でも終了タグを記述しておくほうが良いでしょう。
正：終了タグを省略しない書き方 <p id="sample" align="center"><strong>段落</strong>となります。</p> 正：終了タグを省略した書き方 <p id="sample" align="center"><strong>段落</strong>となります。 要素内容を持たない空要素
HTMLの中には、<br>や<img>のように、要素内容を持たない空要素（empty element）と呼ばれるものもあります。 このような内容を持たない要素には終了タグはありません。
空要素の使用例 <p id="sample" align="center"> 段落となります。<br> <img src="image.gif" alt="画像"> </p> HTMLの記述は小文字をおすすめHTMLでは要素名と属性名の大文字と小文字を区別しないので、どちらで記述しても問題ありません。ただし、 後で解説するXHTMLでは、要素名と属性名はすべて小文字で記述しなければならないので、HTMLの要素・属性はすべて小文字で記述しておくほうが良いでしょう。
|
