HTML の概要

HTML とは

HTML とは「HyperText Markup Language」の略で、Web ページを作成するための言語です。Web ページの情報をタグ（「<」と「>」で挟んだ文字列）を使って表します。　※「<...>」を開始タグ、「</...>」を終了タグ、開始タグと終了タグで挟まれたものを内容、タグと内容をまとめて要素と言います。

HTML の構成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>HTML 入門 - HTML の概要</title>
    <meta
      name="description"
      content="HTML とは、HTML の構成、HTML の書き方について"
    />
  </head>
  <body>
    <h1>HTML の概要</h1>
    <h2>HTML とは</h2>
    <p>HTML とは「HyperText Markup Language」の略で...</p>
    <h2>HTML の構成</h2>
  </body>
</html>

<!DOCTYPE html> とは

HTML のバージョンを指定しています。まずはこれを先頭に配置しましょう。

<html> ~ </html> とは

html タグ。ページ全体を意味します。HTML にひとつだけ配置できます。<!DOCTYPE html>の直後に配置しましょう。「lang="ja"」で言語に日本語を指定しています。

<head> ~ </head> とは

head タグ。ページの文字コード、タイトル、説明文、スクリプト、スタイルシートなど、ページに表示しない情報を記述します。HTML にひとつだけ html タグ内に配置できます。<html>の直後に配置しましょう。

<meta charset="UTF-8"> とは

meta タグ。文字コードに「UTF-8」を指定しています。head タグ内に配置します。

<title> ~ </title> とは

title タグ。ページのタイトルを記述します。ブラウザのタブや、ブックマーク、検索結果に表示されます。head タグ内にひとつだけ配置できます。

<meta name="description" content="HTML とは、HTML の構成、HTML の書き方について"> とは

meta タグ。ページの説明文を記述しています。ブラウザの検索結果に表示されます。head タグ内に配置します。

<body> ~ </body> とは

body タグ。ページに表示したい情報を記述します。HTML にひとつだけ html タグ内に配置できます。</head>の直後に配置しましょう。

HTML の書き方

ファイル名のルール

  1. ファイル拡張子は「.html」にする

    良い例）filename.html
悪い例）filename.txt

  2. ファイル名はすべて半角文字にする

    良い例）filename.html
悪い例）ｆｉｌｅｎａｍｅ.html

  3. ファイル名はすべて小文字にする

    良い例）filename.html
悪い例）FileName.html

  4. ファイル名に使う記号は「-（ハイフン）」、「_（アンダースコア）」のどちらかにする

    良い例）file_name.html
悪い例）file+name.html

  5. ファイル名は空白（スペース）を含めない

    良い例）filename.html
悪い例）file name.html

  6. ホームページのファイル名は「index.html」にする

HTML の書き方

  1. タグはすべて半角文字で記述する

    良い例）<h1>HTML の概要</h1>
悪い例）<ｈ１>HTML の概要</ｈ１>

  2. タグはすべて小文字で記述する

    良い例）<h1>HTML の概要</h1>
悪い例）<H1>HTML の概要</H1>

  3. 空要素

    内容を持たない開始タグのみで構成される要素を空要素と呼びます。

    サンプル：

    <hr />

    実行結果：

  4. 要素のネスト　※要素の中に要素を入れること

    サンプル：

    <p>取り消し線を引くには<del>strike タグ</del>del タグを使用します。</p>

    実行結果：

    取り消し線を引くにはstrike タグdel タグを使用します。

  5. ブロックレベル要素とインライン要素

    ブロックレベル要素は並べると改行する特徴があり、ページのレイアウトを表すことに使用されます。対してインライン要素は並べても改行せず、テキストのレイアウトを表すことに使用されます。ブロックレベル要素をインライン要素の中にネストすることはできません。

    サンプル：

    <div>リンゴ</div><div>ゴリラ</div><div>ラッパ</div>
<span>パンダ</span><span>ダルマ</span><span>マリモ</span>
※ div タグはブロックレベル要素で span タグはインライン要素

    実行結果：

    リンゴ
    ゴリラ
    ラッパ
    パンダダルママリモ

  6. 属性

    属性を設定することで要素に情報を追加することができます。

    サンプル：

    <a>BeaSkyBlue</a>
<a href="https://beaskyblue.com" title="BeaSkyBlue">BeaSkyBlue</a>
※ a タグに href 属性と title 属性を追加しています。「=」より後の値が属性値です。

    実行結果：

  7. 属性名はすべて小文字で記述する

    良い例）<a href="https://beaskyblue.com">BeaSkyBlue</a>
悪い例）<a HREF="https://beaskyblue.com">BeaSkyBlue</a>

  8. 属性値はダブルクォーテーションで囲む

    良い例）<a href="https://beaskyblue.com">BeaSkyBlue</a>
悪い例）<a href=https://beaskyblue.com>BeaSkyBlue</a>

  9. 真偽値属性の属性値は省略する

    属性名と属性値が同じ属性を真偽値属性と呼びます。

    サンプル：

    <input type="text" disabled="disabled" /> 
<input type="text" disabled />

    実行結果：

  10. 連続半角スペース、連続改行

    連続した半角スペース、改行は１つの半角スペースとして扱われます。

    サンプル：

    <p>HTML        の概要</p>
<p>HTML



の概要</p>

    実行結果：

    HTML の概要

    HTML の概要

  11. 特殊文字のエスケープ

    HTML には５つの特殊文字（「<」、「>」、「"」、「'」、「&」）があります。使用する際はエスケープします。

    サンプル：

    <p>&lt;</p>
<p>&gt;</p>
<p>&quot;</p>
<p>&apos;</p>
<p>&amp;</p>

    実行例：

    <

    >

    "

    '

    &

  12. コメント

    「<!--」と「-->」で囲んだ箇所がコメントになります。複数行にまたがってコメントすることも可能です。

    サンプル：

    <p>コメントのサンプル</p>
<!-- <p>単一行のコメント</p> -->
<!--
<p>複数行のコメント</p>
<p>複数行のコメント</p>
<p>複数行のコメント</p>
-->
<p>コメントのサンプル</p>

    実行例：

    コメントのサンプル

    コメントのサンプル

参考