HTMLとは？HTMLの基本。
HTMLとは？
HTMLとは、Hyper Text Markup Languageの略でWebページの構造を記述する言語です。似たような、言語にCSSというものがありますがこれは全くの別物で、Webページを装飾するための言語です。具体的に言うとHTMLでは、文書の段落の順番を変えることができますが、文字サイズや文字の色を変更するのとはできません。
これは重要な考え方ですので繰り返しますが、HTMLはWebページの構造を定義します。プログラミングを始めた当初は混同するので、これらの違いはしっかりと区別しておきましょう。
HTMLの書き方
プログラミングというと何やら環境の準備が必要そうな物々しい感じがしますが、 HTMLはそんなことはありません。実務レベルで耐えられるかというとそうでもないです、最低限メモ帳とブラウザ(Google ChromeやSafariなど)があれば HTMLは書くことができます。実務ベースでいうと、AtomやVisual Studio CodeやSublime Text, VimなどでHTMLのソースを編集することが多いです。
HTMLのソースは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<div>
<h1>本文</h1>
<p>本文</p>
<div>
</body>
</html>
見覚えのある方もいるかと思いますが、ブラウザで右クリックしてWebページのソースを見ることができるので、もしかしたら一度は目にしたことがあるかもしれません。
HTMLは、どのページも
- doctype宣言
- htmlタグ
- headタグ
- bodyタグ
また、タグについての説明がまだたですが、 HTMLはタグという
例えばタイトルを示すtitleタグは
<title>Webナリ</title>のようにします。
他にも記事の見出しを示すh1タグ、強調を表すstrongタグ、段落を示すpタグなどがあり書き方は全て同様です。
HTMLのサンプル | お客様情報入力フォーム
HTMLでよく使われるタグを確認するためによよくあるお客様情報入力画面を書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>お客様情報入力画面</title>
</head>
<body>
<div class="container">
<h1>お客様情報入力</h1>
<p>下記項目にお客様情報を入力してください。</p>
<form action="">
<div class="form-group">
<label>氏名</label>
<input name="name" type="text"></input>
</div>
<div class="form-group">
<label>ふりがな</label>
<input name="kana" type="text"></input>
</div>
<div class="form-group">
<label>メールアドレス</label>
<input name="email" type="text"></input>
</div>
<div class="form-group">
<label>住所</label>
<input name="email" type="text"></input>
</div>
<div class="form-group">
<label>年齢</label>
<select name="generation">
<option value="0">10代</option>
<option value="1">20代</option>
<option value="2">30代</option>
<option value="3">40代</option>
</select>
</div>
<div class="form-group">
<label>性別</label>
<label><input name="gender" type="radio" value="1" checked=/>男</label>
<label><input name="gender" type="radio" value="2"/>女</label>
</div>
<button>送信</button>
</form>
</div>
</body>
</html>このHTMLを開いた画像がこちらになります。
一応入力フォームの体はなしていますが、あまり使いたいと思うようなUIではないですよね。。
先にも述べたように、あくまで HTMLは文書の、構造を定義するためのものなのでここまでが HTMLの限界です。さらにキレイで使い勝手の良いWebページにしたいのであればCSSの適用が必要です。
さらに上ではあまり説明しませんでしたが、HTMLタグには属性という概念があり、タグの中にそのタグの属性を書いていきます。例えばテキストフォームを出力するinputタグにはname属性とtype属性が指定されていますが、
<input type="text" name="name"/>type属性でtextというinputタグから出力される入力フォームの種類を指定し、送信フォームとして送られる場合のキーとしてname属性に"name"や"email"、"kana"などの文字を指定しています。
さらにdivタグというhtmlを区切るタグにはclass属性という属性を指定しています。これはほとんど全てのタグに対して有効な属性で、cssやjavascriptでタグを識別するために使います。例では、外側のdiv要素にcontainerというclassを指定しているので、cssで装飾する際にはcontainerという識別子（セレクタ）を使ってスタイルを適用することができます。
HTMLを書く際の注意点。
前の項目ではHTMLの書き方を説明しましたが 、HTMLを書く上で注意しなければならない点があります。
具体例を出すと、 1ページ内に大見出しを示すh1タグを複数書いてしまうというようなケースです。h1タグは見出しを示すタグなのでほかのpタグなどよりも大きめに文字が表示されます。
自分の書いている記事で大きな文字を使いたいからと言って、文中の見出しとは関係のないところをh1タグで表現するのは誤りです。さきほども、書いたので繰り返しにはなりますが HTMLはあくまでも構造を定義します。見た目は定義しません。
HTMLは文書中のどこが見出しで、どういうセクションに分かれてということを伝える役割があります。
昨今検索順位で上位にWebサイトを表示させることの重要性が高まりつつあり、それら検索エンジンに正しく情報を伝えるためにも重要です。グーグルの検索ロボットは、Web上に散在しているページを定期的に巡回していますが、その際に見出しの定義や強調箇所の指定、タイトルの指定が的確に定義されていることがロボットに記事内のどの部分が重要なのかということを伝えることができます。
HTMLは見た目ではなく、構造を記述する言語ということに気をつけて正しい HTMLの書き方を身につけていきましょう。
まとめ
ここでHTMLのタグの紹介はほとんどできず概念や注意点などについてのみに止まりましたが、どういうタグがあるかやどういうタグの使い方をするのかというのは、こちらのようなサイトでどのようなタグがあるのかは眺めておくといいかもしれません。
タグ全てを覚えることはできないのでhtmlを書きながら都度覚えていくということになるとは思いますが、一度見ておくだけでもあんなタグあったよなぁと気づけるので一覧をざっと見るぐらいはしてみると良いでしょう。
この記事が役に立ちましたらシェアをお願いします。
サイト管理人
Webなり
中小SIer、事業会社のリードエンジニアを経てフリーランスとして独立。 人にやさしいコードがかけるエンジニアを増やすためにWebエンジニアとして 知っておきたい情報を発信していきます。
管理人に関する記事はコチラ:
