フロントエンド基礎（HTML）

目的

HTMLの概要を理解することが目的

HTMLとは

HTML（HyperText Markup Language）は、Web上の文章を記述するためのマークアップ言語です。HTMLに適切な記述を行うことにより、テキストはもちろん、画像や音声、動画をWebページに表示させることができます。HTMLタグで画像や音声や動画のファイルが格納されている場所を示すことで、その場所を参照してWebサイトに表示することができるのです。

HTMLタグは、「<開始タグ>」と「</終了タグ>」で内容を囲んで記述します。例えば、「あああああ」と記述すれば、画面上には「あああああ」が表示されます。

HTMLのバージョン

2023年現在のHTML最新バージョンは「HTML Living Standard」です。
2021年1月にHTML5が廃止になり、名称もHTML Living Standardに変更されました。

今後、仕様が更新された場合も、新しいバージョンではなく、HTML Living Standardの仕様が更新される形で統一されています。

HTML Living Standardの仕様は基本的に英語ですが、日本語訳もされているので、日本語で新しい仕様を確認することが可能です。

HTMLの書き方

`<開始タグ>～</終了タグ>`で内容を囲む

HTMLタグの使い方は、とても簡単です。<開始タグ>～</終了タグ>で内容を囲めば、要素（element）の種類を指定することができます。ウェブページ内の各部分をどのような要素に割り当てるかによって、タグの種類を使い分けます。

以下の例では、タグを使用して～の部分が段落（paragraph）となるp要素であることを示しています。

<p>段落となります。</p>

↓↓↓

段落となります。

開始タグが、終了タグが、～で囲まれた中身の部分が要素の内容となります。

属性を指定する

HTMLでは、それぞれタグの種類ごとに指定できる属性の名称とその値が定義されています。タグに属性を追加することで、要素のサイズや配置などをより詳細に指定できます。

以下の例では、要素のalign属性に center という値を指定して、段落を中央揃えにするように指定しています。

<p align="center">段落となります。</p>

↓↓↓

段落となります。

属性を指定する際には、値を引用符で囲んで指定します。使用する引用符は、半角のダブルクォーテーション（"）、または、半角のシングルクォーテーション（´）のどちらでも構いません。

尚、HTMLでは、引用符を省略できる場合がありますが、使用することが推奨されています。また、後で解説するXHTMLでは引用符を省略することはできないので、XHTMLへ移行する可能性があるなら引用符は省略しないほうが良いでしょう。

複数の属性を指定する場合には、以下の例のように半角スペースで区切って記述します。属性を記述する順序は問われません。

タグは入れ子にできる

タグは入れ子（ネスト）にすることができます。例えば、タグとタグを入れ子にして、段落（paragraph）のなかの特定箇所だけを、強調（strong）することができます。タグの順番は前後しないように正しく配置します。

正：正しい入れ子
<p id="sample" align="center"><strong>段落</strong>となります。</p>

誤：間違った入れ子
<strong><p id="sample" align="center">段落</strong>となります。</p>

`</終了タグ>`を省略できる要素

HTMLでは、<開始タグ>～</終了タグ>が基本形ですが、 タグや<li>タグなど、HTMLタグの一部には終了タグを省略しても良いとされているものもあります。ただし、XHTMLでは終了タグを省略することができないので、省略できる場合でも終了タグを記述しておくほうが良いでしょう。

正：終了タグを省略しない書き方
<p id="sample" align="center"><strong>段落</strong>となります。</p>

正：終了タグを省略した書き方
<p id="sample" align="center"><strong>段落</strong>となります。

要素内容を持たない空要素

HTMLの中には、 や<img>のように、要素内容を持たない空要素（empty element）と呼ばれるものもあります。このような内容を持たない要素には終了タグはありません。

空要素の使用例
<p id="sample" align="center">
段落となります。<br>
<img src="image.gif" alt="画像">
</p>

HTMLの記述は小文字をおすすめ

HTMLでは要素名と属性名の大文字と小文字を区別しないので、どちらで記述しても問題ありません。ただし、後で解説するXHTMLでは、要素名と属性名はすべて小文字で記述しなければならないので、HTMLの要素・属性はすべて小文字で記述しておくほうが良いでしょう。

目的​

HTMLとは​

HTMLのバージョン​

HTMLの書き方​

<開始タグ>～</終了タグ>で内容を囲む​

属性を指定する​

タグは入れ子にできる​

</終了タグ>を省略できる要素​

要素内容を持たない空要素​

HTMLの記述は小文字をおすすめ​

目的