今回からいよいよhtmlコーディングの内容に入ります。
それではさっそく進みましょう！
まずは何かブラウザに表示させてみる
VisualStudioCode（以降、vscと略す）を起動し、「新しいファイル」をクリックします。
[waku]VSCを日本語化したい方は、拡張機能「Japanese Language Pack for Visual Studio Code」を追加するとある程度日本語化できます。
[/waku]
新しいファイルの編集モードに切り替わるので、適当な文字列を入力します。
今回ここでは「てすとです」と入力しました。
そして入力後、Ctrl＋sもしくはcommand＋sを押して名前を付けてファイルを保存します。
このときのファイル名は「index.html」と指定してください。
保存場所はデスクトップなど、わかりやすい場所を指定してください。
ファイルを保存したら、保存したファイルができあがっていることを確認します。
ファイル「index.html」が確認できたらそのファイルをダブルクリックしてください。
すると次のようにブラウザソフトが立ち上がり、先程入力した文字列「てすとです」が表示されます。
※ブラウザソフトが立ち上がらない場合は、保存したファイルを右クリックして「アプリを指定して開く」から「Chrome」を選択してみてください。
テキストエディタで入力された文字列が表示される。
いかがでしょうか？
これがhtmlデータとブラウザソフトの関係性です。
ポイントは次の通り。
- ファイルを保存するときに「拡張子」を.htmlにすること
- ブラウザソフトで保存したファイルを開くこと
まず覚えるHTMLタグについて
テキストエディタで入力した文字がブラウザに表示されるのはわかりました。
ですが実際のWEBサイトでは、テキストだけではなくリスト形式や表形式、見出しや画像など様々な要素がWEBサイト内に表示されています。
ここで登場するのが、htmlタグと呼ばれるものです。
[waku]<xxx>内容</xxx> ←こんなふうに＜＞（かっこ）で囲まれているのが、htmlタグです。
タグの中には閉じタグ</xxx>というように/（スラッシュ）が付いているタグも存在します。[/waku]
ここからは、実務（htmlコーディング作業）でよく使用するhtmlタグを紹介します。
見出しタグ
見出しの役割をするのが、H1、H2、H3、H4、H5、H6のタグたちです。
H1〜H6まで番号があるのは、大見出し、中見出し、小見出しと言うふうに見出しの親子関係を区別するために存在します。
テキストエディタでは、下記のような使い方をします。
<h1>会社案内</h1>
文章タグ（段落タグ）
基本的な文章を定義するのは、Pタグです。
テキストエディタでは、下記のような使い方をします。
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
改行タグ
文章を改行させるときに使用するのが、brタグです。
テキストエディタでは、下記のような使い方をします。
<p>テキストが入ります。テキストが入ります。<br>テキストが入ります。</p>
リストタグ（・表示の場合）
リスト形式で情報を表示する場合に使用するのが、ulタグです。
[waku]ブラウザではこんなふうに表示されます。
・テキスト
・テキスト
・テキスト[/waku]
テキストエディタでは下記のように使用します。
※基本的にulとliタグはセットで使用すること
<ul>
<li>テキスト内容</li>
<li>テキスト内容</li>
<li>テキスト内容</li>
</ul>
リストタグ（番号付きリストの場合）
番号付きリスト形式で情報を表示する場合に使用するのが、olタグです。
[waku]ブラウザではこんなふうに表示されます。
1 テキスト
2 テキスト
3 テキスト[/waku]
テキストエディタでは下記のように使用します。
※基本的にolとliタグはセットで使用すること
<ol>
<li>テキスト内容</li>
<li>テキスト内容</li>
<li>テキスト内容</li>
</ol>
表組タグ（テーブル形式）
エクセルのような表組みで表示したい場合に使用するタグが、table＋tr＋th＋tdタグです。
テキストエディタでは下記のように使用します。
※基本的にtableタグの中に、横ラインのグループとしてtrタグを入れ、trタグの中に見出し用のthタグ、もしくは内容を定義するtdタグが入ります。
<table>
<tr>
<th>タイトル項目</th>
<th>タイトル項目</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
画像タグ
画像を表示させるときに使用するのがimgタグです。
テキストエディタでは下記のように使用します。
※閉じタグが無いタグです。最後の＞の直前に/を入れます
※altタグは必ず入れるようにします
<img src="/images/item01.jpg" alt="ここには画像が表示されない場合の代替文字列を入れる" />
リンクタグ
他のページや外部のWEBサイトにリンクを貼る場合に使用するのがaタグです。
テキストエディタでは下記のように使用します。
※targetの属性はリンク先の画面を別画面で開く場合に「_blank」を指定します
<a href="https://google.co.jp" target="_blank" >これはGoogleへの外部リンクです。</a>
グループ化タグ
ひとかたまりの情報を１つのグループとしてまとめるためのタグとしてDIVタグがあります。
<div>
<h1>プラン紹介</h1>
<p>弊社では以下のプランを用意しております。</p>
<ul>
<li>初級コース</li>
<li>中級コース</li>
<li>上級コース</li>
</ul>
<a href="#">お申し込みはこちら</a>
</div>
以上が、実際のコーディング作業でよく使用するタグになります。
htmlタグは他にもたくさん存在しますので、今後必要に応じて覚えて使ってみてください。
実際にhtmlを使ってコーディングしてみる
最低限のタグを知ることができたと思いますので、次にここで紹介したタグを使ってコーディングをしてみましょう。
以下の画像のとおりにブラウザ（Chrome）に表示されるように、htmlデータをコーディングしてみます。
※画像は存在しないことにするため、srcの値を空にします（例：<img src=”” alt=”代替文字列” />）
このような見た目になるようにhtmlタグを使用してコーディングしてみます。
覚えるためにも、一度ご自身でコーディングしてみてくださいね。
僕がコーディングしたhtmlデータは以下になります。
<div>
<h1>見出し１です</h1>
<p>テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。</p>
<ul>
<li>リスト文字列です</li>
<li>リスト文字列です</li>
<li>リスト文字列です</li>
</ul>
<imgsrc="" alt="画像が表示できない場合の代替文字列です">
<table>
<tr>
<th>項目</th>
<th>項目</th>
<th>項目</th>
</tr>
<tr>
<td>内容です</td>
<td>内容です</td>
<td>内容です</td>
</tr>
<tr>
<td>内容です</td>
<td>内容です</td>
<td>内容です</td>
</tr>
<tr>
<td>内容です</td>
<td>内容です</td>
<td>内容です</td>
</tr>
</table>
</div>
無事にコーディングができたでしょうか？
今回はコーディングが間違っていてもなんとなく表示されてしまうため、間違いに気づきにくいかもしれません。
じっくり、書いたコードを見て確かめてください。
そして最後に、一般的なhtmlの雛形を紹介します。
まずはコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>タイトル</title>
</head>
<body>
〜ここにhtmlタグを追加します。〜
</body>
</html>
なんかよくわからないコードがたくさんありますが、以下のような意味があります。
<!DOCTYPE html> これはhtml5のファイルですよ〜とブラウザに伝えるためののもの。
<html lang=”ja”> これは日本語（ja）が使用されてますよとブラウザに伝えるためのもの。
<head> これはこのhtmlファイルで表示するWEBページの概要だったりページタイトルだったりと諸々記載しておく場所になります。
<metacharset=”UTF-8″> こちらは文字コードは●●ですよ〜とブラウザに伝えるためのもの。（ここではUTF-8）
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″> これはWEBページの画面サイズ指定をブラウザに伝えるためのもの
<title>タイトル</title> これはこのページのタイトルを指定するもの（基本的にGoogleの検索結果に表示される文字列です）
<body> これはWEBページに表示させる内容（文字や画像など）はここからですよ〜とブラウザに伝えるためのものです。基本的に見出しタグやimgタグなどのデータはこのbodyタグの中に記載します。
以上、htmlの雛形です。
htmlのお約束みたいなものですので現時点ではざっくりと覚えておいてください。
（htmlコーディングの際に使用する雛形として作っておくとよいかも）
今回のHTML基礎は以上になります。
htmlタグを色々使用して、ご自身でブラウザでの表示の確認をしてみてください。
次回は見た目を整えるCSSについてお伝えします。