WEBデザイナーへの道
WEBデザイナーへの道#003

HOME / BLOG / WEB / WEBデザイナーへの道#003

WEB
2022年06月23日 20時12分

前回「WEBデザイナーへの道#002」でWebサイトを作成する環境を用意しました。

今回は、Webサイトの基本であるHTMLの書き方について解説していきます。

なお、このブログの解説動画をYoutubeに用意していますので、あわせてご確認ください。

1．HTMLの基本
2．HTMLのバージョン
2-1．HTMLの歴史
2-2．バージョンの指定
2-3．どのバージョンを使うべきか
3．HTMLを書いて表示してみよう
3-1．最低限記述するタグ
3-2．実際にHTMLを書いてWebページを表示してみよう
4．まとめ

1．HTMLの基本

HTMLは、タグで構成されます。タグを一言で表現するならば「文字に意味を持たせる記号」です。
例として「大見出し」タグを紹介します。

<h1>この文章は見出しです</h1>

タグは<開始タグ>と</終了タグ>で囲んで書きます。一部例外がありますので、例外については都度解説します。

この例では「この文章は見出しです」の文章にH1タグで「大見出し」の意味を持たせました。

ブラウザが「大見出し」を認識して、大きな文字で表示します。また、Google等の検索エンジンが「ここに書いてある文章が見出しってことは、重要な文章から優先的に検索対象にしよう」と認識します。

このように、タグを使って文章に意味を持たせて、ブラウザや検索エンジンに認識させることが、HTMLの基本になります。

2．HTMLのバージョン

タグには数十種類あります。タグの種類、タグの意味は、HTMLのバージョンによって異なります。そのため、HTMLを記述する際「これから記述するHTMLはバージョン５です」のように宣言する必要があります。最新のHTMLのバージョンは「HTML Living Standard」です。

2-1．HTMLの歴史

これまでHTMLは「1.0」「2.0」「3.0／3.2」「4.0／4.01」「5／5.1／5.2」と年々進化してきました。このバージョンを管理している組織がW3CとWHATWGです。
管理する組織が2つあると何が起こるでしょうか？
ご想像通り「W3CのHTML5」「WHATWGのHTML5」のように2通りの仕様が作られてしまいました。Microsoft社のInternetExplorerブラウザはW3Cの仕様を採用し、Google社のChromeブラウザ、Apple社のSafariブラウザはWHATWGの仕様を採用するなど、Webサイト制作者はとても苦労しました。
2019年に2団体が停戦協定を結び誕生したのが「HTML Living Standard」です。
これが現在主流のHTMLバージョンです。とは言ってもHTML5とほぼ変わりありません。

更に詳しく知りたい方は
とほほのWWW入門 – HTML Living StandardとHTMLの歴史
をご参照ください。

2-2．バージョンの指定

HTMLのバージョンを指定するため、先頭に必ず明記する必要があります。

<!DOCTYPE html>

これがバージョン指定になります。HTML5以降、この１文で「最新のHTMLバージョンを使用する」ようになりました。

HTML5以前は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
のように複雑な指定が必要でした。

2-3．どのバージョンを使うべきか

考えるまでもなく最新のバージョンです。
ブラウザや検索エンジンは、最新バージョンに最適化されていきます。古いバージョンがいつサポート対象外になるかわかりませんし、「バージョンが古い＝昔の情報」と判断され検索結果に表示されない場合もあります。

3．HTMLを書いて表示してみよう

前回（#002）、VSCodeをインストールしてWebサイトの制作環境を準備しました。そして、ブラウザで表示できることも確認しました。

今回は、HTMLを使ってより正しいWebサイトが表示されることを確認していきましょう。

3-1．最低限記述するタグ

VSCodeを起動して、最低限記述するタグを書いていきます。

HTMLのバージョン
htmlタグ
headタグ
titleタグ
bodyタグ
h1タグ

です。

<!DOCTYPE html>
<html>
    <head>
        <title>表示確認</title>
    </head>
    <body>
        <h1>HTMLタグの表示確認</h1>
    </body>
</html>

3-2．実際にHTMLを書いてWebページを表示してみよう

これが、実際にVSCodeに記述したHTMLタグとLive Serverで表示した結果です。

記述したHTMLのタグについて１つ１つ説明していきます。

<!DOCTYPE html>（1行目の）

先述の通りHTMLのバージョンです。

<html>タグ（2行目／9行目）

htmlを記述する場合、htmlタグで全体を囲います。2行目の開始タグと9行目の終了タグに囲われた3～8行目が、1行目で指定したバージョンに則ったhtmlです、と言うことになります。

<head>タグ（3行目／5行目）

htmlでは、headタグにWebページの様々な情報を記述します。Webページのどのような情報を記述できるかについては、後々説明していきます。

<title>タグ（4行目）

headタグの情報要素の１つで、ブラウザのタイトルを指定します。実際の表示結果を見てもわかるように、titleタグに記述した文字が、ブラウザの上部に表示されます。

<body>タグ（6行目／8行目）

Webページに表示する内容をbodyタグで囲います。6行目の開始タグと8行目の終了タグに囲われた7行目が、このWebページの内容となります。

<h1>タグ（7行目）

こちらも先述の通り「大見出し」になります。基本的に１つのWebページに1つの大見出しとなりますが、複数大見出しがあっても問題はありまえん。なるべく1つにしましょう、程度です。そして、なるべく他のWebページと重複しないようにしましょう。

4．まとめ

今回は、HTMLの書き方について解説しました。

HTMLはタグによって意味付けされた文章
タグとは文章に意味を持たせる記号
タグによって意味付けされた文字がブラウザや検索エンジンに認識される
タグにはバージョンがある
バージョンの指定方法
HTMLに最低限記述する内容

これらをしっかりマスターしましょう。

次回は様々なタグを使って、より充実したWebページを作ってみたいと思います。

WEBデザイナーへの道#002

WEBデザイナーへの道#004

コメントはお気軽にどうぞコメントをキャンセル

- PR -

Google Adsense