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文書を作成してみましょう。

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

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

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

<!DOCTYPE html>

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

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

HTMLの書き方

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

  1. <html></html>
  2. <head></head>
  3. <body></body>
  4. <meta>(文字コードの設定)
  5. <title></title>
  6. <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>

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

Webサイトでよく見るような入力フォームの部分を書いてみました。

設定できる属性名・属性値はタグによって異なり、使い分けることによってさまざまな命令を出すことができます。

初めてHTMLを書いてみたという方は、改めてHTMLファイルの作り方や書き方を振り返ってみましょう。

タイプミスや全角スペースなどあると表示されない、動かないといったことも招いてしまうので、慣れるまでは注意しながらコーディングしていきましょう。

そして次回は、今回説明したHTMLとセットで覚えておきたい「CSS」について解説する予定です。

著者紹介


TechAcademy　(https://techacademy.jp/)

プログラミングやWebデザイン、アプリ開発が学べるオンラインスクールを運営。

TechAcademyマガジンでは、プログラミングやWebデザインなど技術に関する最新トレンド、ツールの使い方を紹介しています。開発作業や学習に役立つコンテンツがご覧になれます。

なお、本稿はTechAcademy の「はじめてのプログラミングコース」を元に解説しています。