基礎の基礎から学ぶ、Webプログラミング超入門(3) HTMLとはどういうものか?

3回目の今回は、実際にコーディングをしてHTML(HyperText Markup Language)とはどういうものなのかを知ることがゴールになります。

筆者は、エディタを使ってコーディングしていますが、そういったアプリを持っていない方は「メモ帳」などで代用できます。普段は開発業務に携わらないという方も手を動かすことで、エンジニアやデザイナーがどれくらい難しいことをしているのか、どんな作業をしているのか知る第一歩になるはずです。

エンジニアやデザイナーを目指そうと思っている方もここからスタートしていきましょう。

HTMLとは

HTMLはWebサイトを作成する際に使用される言語で、サイトの基本的な構造の部分を担当します。CSS(デザインに関する部分)、JavaScript(アニメーションやポップアップ)、PHP(データの受け取り・動的なサイト作成)など他の言語と組み合わせて使用されます。

HTMLの種類

現在使われているHTMLにはいくつか種類があります。主なものをご紹介しておきましょう。

XHTML

HTMLをXML(Extensible Markup Language)文法で再定義したもので大文字と小文字を区別する、終了タグや”“(ダブルクォーテーション)の省略が不可などの厳密な書式が特徴です。

HTML4

W3C(World Wide Web Consortium)によって1997年に勧告されたものです。それまでHTML内で行っていた文字色などの装飾に関する定義をCSS(スタイルシート)で行うようになりましたが、フォントタグなどの要素は非推奨ながら使うことができます。

HTML5

現在、一般的に使われているものです。文字の大きさや色など外観に関わる部分はスタイルシートを使用するのが基本となります。そのため、スタイルに関するタグがいくつかHTML4から廃止されました。代わりにヘッダーやフッターなどの構造に関するタグが追加され、サイト内の各ブロックの役割がより分かりやすくなっています。

HTMLのファイルの作り方

以下の順番でHTML文書を作成してみましょう。

テキストファイルを作成
宣言文を書く
拡張子を付けて保存

HTMLを扱うことのできるエディタでファイルを新規作成します。(ここではAtomを使用しています)ファイル→新規ファイルを選択します。

最初に、HTMLのバージョンを宣言する「DOCTYPE宣言文」を入力します。ここではHTML5を使用するため、以下の内容をテキストの一番上に入力します。

<!DOCTYPE html>

入力が完了したら拡張子「.html」をつけてファイルを保存します。「ファイル」→「別名で保存」を選択します。

ファイル名を入力して保存します。ここでは「index.html」としています。これでHTMLファイルの作成は完了です。

HTMLの書き方

次に、シンプルなHTML文書の雛形を作ってみましょう。ここでは次の順序でタグを挿入していきます。

<html></html>
<head></head>
<body></body>
<meta>(文字コードの設定)
<title></title>
<p></p>

先ほど入力した宣言文の次に<html></html>を入力します。

<!DOCTYPE html>
<html> </html>

<html></html>の間に<head></head>と<body></body>の2つを入力します。これで一番基本的な形はできあがりました。

<!DOCTYPE html>
<html>
  <head> </head> 
  <body> </body>
</html>

次に<head></head>内でサイト全体の設定を行います。まず<meta>タグを使用して文字コードを指定します。<head>と</head>の間に、以下のように記述します。(UTF-8の場合)

<meta charset="utf-8">

ここでのcharset=”utf-8”の部分は「属性」と呼ばれ、属性名「charset」と属性値「utf-8」で構成されています。utf-8と文字コードを設定しておくことでWebページ上の文字化けも無くなるので、忘れずに書いておきましょう。

その後ろに<title></title>を作成し、サイトのタイトルを入力します。これはGoogleなどの検索結果やブラウザのタブ、閲覧者がブックマークした際の名前などで表示されます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力します。</title>
  </head>
  <body> </body>
</html>

<body></body>内にコンテンツを入力してみましょう。ここでは<p></p>を使用して簡単なテキストを入力しています。

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力します。</title>
  </head>
  <body>
    <p>コンテンツ内のテキストです。</p> 
  </body> 
</html>

Index.htmlをWebブラウザで開くと以下のように、<body></body>の中にある内容が表示されます。

HTMLを実際に書いてみよう

簡単なアンケートフォームと送信ボタンを設置してみます。

先ほどの<p>～</p>のテキスト部分を消去し、代わりに<form></form>を入力します。これはフォームを作成するタグです。

<!DOCTYPE html> 
<html> 
  <head>
    <meta charset="utf-8"> 
    <title>ここにタイトルを入力します。</title> 
  </head>
  <body>
    <form> </form>
  </body>
</html>

次に最初の<form>内に先ほどの<meta>のときのように属性を入力していきます。

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8"> 
    <title>ここにタイトルを入力します。</title> 
  </head>
  <body>
    <form> </form>
  </body>
</html>

次にフォームの内容を具体的に入力していきます。今回は複数行のテキストを入力することができる<textarea>タグを使用します。<form></form>の間に<p></p>を入力し、さらにその中に<textarea></textarea>を入力します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力します。</title>
  </head>
  <body>
    <form>
      <p> 
        <textarea> </textarea> 
      </p> 
    </form>
  </body>
</html>

今回も最初の<textarea>内に属性を入力します。「name」属性では名前、「cols」では横幅、「rows」では縦幅を属性値で指定します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力します。</title>
  </head>
  <body>
    <form>
      <p>
        <textarea name="text" cols="60" rows="4"> </textarea>
      </p>
    </form>
  </body>
</html>

<textarea></textarea>内に書いた文章は、フォーム内のデフォルトの内容としてブラウザで表示されます。ここでは「テキストを入力してください。」としています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>ここにタイトルを入力します。</title>
  </head>
  <body>
    <form>
      <p>
        <textarea name="text" cols="60" rows="4"> テキストを入力してください。 </textarea>
      </p>
    </form>
  </body>
</html>

次に送信ボタンを設置します。<textarea></textarea>の後ろに<p></p>を入力し、その中に<input>を入力します。<input>はフォームの送信ボタンなどの部品を設置するもので、終了タグは存在しません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力します。</title>
  </head>
  <body>
    <form>
      <p>
        <textarea name="text" cols="60" rows="4"> テキストを入力してください。 </textarea>
      </p>
      <p>
        <input>
      </p>
    </form>
  </body>
</html>

次に属性としてtype=”submit”(実行ボタンの設置)・value=”送信”(パーツに表示される内容：ここでは「送信」)を入力します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ここにタイトルを入力します。</title>
  </head>
  <body>
    <form>
      <p>
        <textarea name="text" cols="60" rows="4"> テキストを入力してください。 </textarea>
      </p>
      <p>
        <input type="submit" value="送信">
      </p>
    </form>
  </body>
</html>

画面では以下のように表示されます。