確実に書けるようになるHTML基礎講座

本記事を閲覧いただきありがとうございます。
この記事では初学者やHTMLに苦手意識を持っている人を対象として、確実にHTMLが書けるようになることをゴールとしたHTMLの基礎講座となっています。

上記のYouTube動画を一度見ていただけますと、より理解が深まると思いますので、是非一度ご覧ください
※ゆっくり動画となっています。

HTMLとは

HTML(エイチティーエムエル)とはHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称で、HyperText（すごいテキスト）を書くためのマークアップ言語です。

ようは、文章の中にリンクを付けたりメディア（画像や動画）を追加する事等可能となったテキスト(HyperText)をタグを使い文章に意味を付けていく（Markup）していく言語です。

世界中の殆どのWEBサイトがHTMLによって書かれています。
まず、HTMLがどのような物か一度見てみましょう。

これはYoutubeのHTMLとなっています。
難しそうと思いました？安心して下さい。これは殆どがjavascriptというプログラム言語です。
javascriptはHTMLに埋め込むことが出来ます。HTML自体はもっとシンプルで単純です。

シンプルなHTML

まずは非常にシンプルなHTMLを見てみましょう。
何を書いているのか一切理解できていなくても何も問題ありません。

画面左部分がHTMLです。
右側はHTMLを実際にブラウザによって読み込まれた際にレンダリングされて我々が目にするページとなっています。

レンダリングとは

レンダリングは表現や演出といった意味です。デザインやCGの世界では影を付けたり、遠近感を持たせることをレンダリングといいます。

WEBの世界におけるレンダリングはHTMLやCSSで書かれたコードを人が見やすいようにブラウザが内容の描写を行う事を指します。

例：<p>こんにちは</p>　→　こんにちは

ここからの内容は先に下記のYoutube内容を見てから読んでいただくほうが内容をより深く理解できます。

何故HTMLを書くのか

HTMLを学ぶ最大の目的はWEBサイトを作る為です。

人がWEBサイトを見てくれるためには二つの要素があります。
HTMLはそのために書いているといっても過言ではありません。

まず、一つ目の要素がブラウザです。
HTMLのコードをブラウザが読み取ってレンダリングした上で人が目にするWEBページとなります。

次がGoogle等の検索エンジンのロボットです。
ロボットといってもパッとイメージできるようなロボットではなく、例えばgoogleではgooglebotというクローラーがWEBサイトのリンクをたどっていき、サイトの情報をスキャンします。
スキャンしたサイト情報を元に検索サイトで表示される順番を決定します。

同じ内容のWEBサイトでも、HTMLを正しく書くといいことが沢山あります。

HTMLを正しく書かないと

HTMLを正しく書かかなった場合に起こるデメリットを解説していきます。
これは先ほど述べたHTMLを正しく書いたときに起こるいいことへの答えでもあります。

HTMLを正しく書かなかった場合、WEBサイトの表示が崩れたり、レンダリングの時に余計な負荷をブラウザにかけてしまい表示速度が遅くなってしまいます。

レンダリングエンジンは頑張り屋さん

レンダリングエンジンは頑張り屋さんです。HTMLが正しく書けていなくても、なるべくサイトが崩れないように自動的にコードを修正してくれた上でWEBページを表示してくれます。

上画像のHTMLを見てください。<p>タグは段落を表すタグで、<strong>タグは内容を強調させたい時に使うタグです。
勿論今は理解していなくて大丈夫です。

レンダリングされた結果「いってね」の部分が太字で表示されているのが分かります。
これは当然の結果ですね。

では次のHTMLを見てください。これはHTMLを正しく書けていません。HTMLは入れ子構造になっている必要があります。
先ほどのHTMLは<p>タグの中に<strong>タグが入っているので入れ子構造になっていますが、上画像のHTMLは<p>タグと<storong>タグの終了位置を間違って書いています。

普通のプログラミング言語なら、このような書き方をしてしまえば、問答無用でエラーとなるでしょう。
しかし、レンダリングエンジンは頑張り屋さんです。この程度の間違いならブラウザ側で自動で修正してくれます。
実際にブラウザで表示してみた結果がコチラです。

正しくHTMLを書いたときと全く同じ結果となります。

これだけ聞くと、HTMLはある程度適当に書いてもいいんだ！という結論になりかねませんが、それは大きな間違いです。

レンダリングエンジンが間違ったHTMLを修正してくれる分、勿論ブラウザ側に負荷をかけている事になります。その結果として表示速度が遅れたり、クローラーにも大きな悪影響を与えてしまいます。

正しいタグを使う重要性

HTMLは様々なタグを使い内容を囲っていきます。

この時に適切なタグを使う事はSEOにとってとても重要なポイントです。
SEOは検索サイトの順位を決めるシステムと捉えておいてください。

この順番は検索エンジンがアルゴリズムによって様々な要素を解析して最終的な順位を決定します。

ただし、適切なタグを使ったからと言ってSEOの評価が上がるわけではありません。
あくまでページの内容がユーザーが目的している内容とマッチしているかを判断して決定されます。

だったらHTMLのタグってそこまで重要じゃない気がしますよね。ただし、適切なタグを使わないとロボットがページの中身を正しく判断してくれない可能性が高いです。

例えば、ラーメンの作り方を紹介するサイトを作成するとして話を進めていきます。
だけど、そのサイトは醤油ラーメンの作り方のページは沢山ありますが、味噌ラーメンの作り方のページは一つしかないものとします。

味噌ラーメンのページでは勿論、「味噌ラーメン　作り方」等の検索で上位表示を目指したいですね。

だけど、そのまま味噌ラーメンの作り方のページを作成しても、ヘッダーやフッター、サイドバーには醤油ラーメンの作り方の文言が沢山ちりばめられています。
このままではロボットもこのページは味噌ラーメンの作り方を紹介しているページなのか醤油ラーメンの作り方を紹介しているページなのか判断が付かず、上位表示されることはありません。

このページは味噌らメーンの作り方のみを紹介しているページです。と伝えるためにはメインコンテンツには<main>、ヘッダーには<haeder>タグフッターには<footer>タグ、サイドバーには<aside>タグを使って、醤油ラーメンの作り方を紹介しているページではないことを検索サイト側に理解してもらう必要があります。

この他にもページの内容をより細かく検索サイトに伝えるタグはいくつも存在します。

テキストをタグでコーディングしていく際に「このテキストにはこのタグが最適です！！」と第三者に対して説明できるように心がけながら書いていくことをおすすめします。

ただし、SEOで大事なのはあくまでもコンテンツです。HTMLに拘り過ぎて本質を見失わないようにしてください。

要素、内容、属性の違いをしっかりと理解する

HTMLにおける要素と内容、属性をしっかりと理解しておくことはHTMLを学ぶ上で非常に重要です。

ある程度HTMLを書ける！！と言える人にとっては意外なことかもしれませんが、HTMLに対して苦手意識を持っている、HTMLを難しく感じている人の大多数が要素、内容、属性について理解できていません。

要素、内容、属性の使い分けを口頭で説明できる程度には理解しておかないと書籍やサイトでHTMLを学ぼうとしても、しっかりと理解できているはずもなく、曖昧な認識で勉強をすすめる事になります。

要素とは

HTMLにおける要素の概念は少し複雑です。しかし、HTMLの学習を始めたばかりの方は下記の事だけ理解しておけば、今後の学習に困ることはありません。

HTMLにおける要素は開始タグから終了タグまでをすべて含んだ一つの塊と捉えておいてください。

つまり赤のマーカーで引かれている範囲全てが要素です。

要素と似ている単語としてタグがあります。

要素とタグは混同されがちですが別物です。
青のマーカーの範囲が開始タグと呼ばれるもので、黄色のマーカーの範囲が終了タグです。

要素とタグの違いは内容を含んでいるか否かで区別できます。

また、要素は英語でelement(エレメント)といいます。
わざわざ英語で覚える必要はないように思われますが、HTMLのリファレンス（参考資料）を読み解く為には、主要英単語を覚えておく必要があります。
何故なら、翻訳されている資料の場合でも、要素はエレメントと表記されていることが多々あるからです。

内容とは

HTMLにおける内容はタグによって囲われている中身の部分を指します。

赤のマーカーで引かれた範囲が内容となります。

内容は英単語でcontent（コンテンツ）といいます。
要素と同じようにコチラの英単語も必ず覚えておきましょう。

属性

属性は簡単に言うと追加情報の事です。

最もよく使われる属性としてclass属性があります。

マーカーで引かれた範囲が属性です。細かく区切ると＝より前の範囲を属性名と呼び、＝の後の範囲を属性値といいます。

属性には様々な種類がありますが、それは今後の学習で学んでいくでしょう。

属性は英語でattribute（アトリビュート）といいます。

要素、内容、属性の違いについては理解できましたか？
HTMLは内容をタグによって要素にしていき、内容では表せない部分を属性で補いながら書いていくのです。

HTMLの雛形

HTMLを書く前に簡単な雛形を用意しましょう。
当サイトではエディターとしてVisual Studio Code（以下VSCode）を使用します。

VScodeを用意する

In-Output

VSCodeの導入方法｜初期設定までを解説

VSCodeの導入方法と簡単な初期設定を解説しています。…

VScodeでhtmlファイルを作成し半角でビックリマークを入力してそのままエンターボタンを押してみてください。

すると上記画像のようなコードが現れたと思います。
これはVScodeのEmmet機能です。まったく１からHTMLを書いてもいいのですが、今表示されている内容はHTMLを書く上で重要な要素ですので、この状態からHTMLを書き始める事をおすすめします。

Emmet機能で表示された要素を理解する

とはいえ、理解していない要素を使っているのはあまり気持ちよくありませんね。

これらの要素がどのような役割で機能しているのかサラっと解説していきます。

DOCTYPE

<!DOCTYPE html>

DOCTYPE　htmlはこれからHTMLを書きますよと宣言している要素です。

DOCTYPEは大文字、htmlは小文字になっていますよね。実はHTMLのタグは大文字、小文字のどちらを使っても機能します。

極端な話、画像のように開始タグは大文字、終了タグは小文字のようにしてもタグとしての機能は果たしますが、小文字で統一するのが一般的です。あえて大文字を使う理由は皆無ですので、タグを書く時は小文字で統一して下さい。

ところが、DOCTYPEのみ、古い慣習的なもので大文字で書かれる場合が多いです。

画像の４パターンのDOCTYPEはどれも正解です。DOCTYPEは大文字、htmlは小文字で書かれているパターンが一番利用頻度は高いと思われます。

HTMLタグ

lang属性

lang属性はどの言語で書かれたHTMLなのかをブラウザやクローラーに伝える事ができます。

属性値はenとなっていますが、enは英語を表します。これから日本語でHTMLを書いていくので日本語を表す値に変えておきましょう。

値をjaにすると日本語で書かれたページだと伝えることが出来ます。
youtube等のサイトではja-JPと書かれている事がありますが、-（ハイフン）を付ける事により国の指定も出来るのです。
しかし、日本語は日本でしか使われていないので、lang属性値はjaのみで問題ありません。

属性は、どの要素にも使えるグローバル属性とその要素にしか使えない固有の属性があります。

lang属性はグローバル属性です。つまりどの要素にも付ける事ができますが、htmlファイルの全ての要素にlang属性を書く必要はありません。

属性には継承されるものがあります。lang属性は継承される属性となりますので、基点となる<html>要素にlang属性を記述する事で同一ファイル全ての要素がlang=“ja”を持っているのと同じになります。

head

VScodeのEmmet機能で記入されたheadタグの中身の要素を確認していきます。

head要素では主にメタデータを記述していきます。

メタデータ

メタデータは本体のデータに付帯するデータの事です。
例えば、CDからPCや周辺機器などに音楽を取り込んだ際に、歌手の名前やアルバム名等のデータも同時に取り込んでくれます。
これもメタデータです。

上画像がEmmet機能で表示されるheadタグの中身ですが、３つの<meta>要素と<title>要素となっています。
<meta>タグがメタデータを表しているのは容易に想像できますが、実は<title>もメタデータです。

<meta>タグは他のメタ関連タグで表すことのできないメタデータを表す際に用いるタグです。

それでは、headタグ内の各要素を解説していきます。

charset(キャラセット)は文字コードを宣言する為のメタタグです。
特に理由がないかぎりは「UTF-8」で指定しておけば大丈夫です。

meta http-equivはHTML初心者は特に覚える必要がありません。
今はこの一行がどんな働きをしているのか頭の片隅にでも入れておいて下さい。

http-equiv属性はブラウザやクローラーに指示を与える属性です。

例えば、画像のように値をrifreshとして、content=”300″と属性を追加すると、ブラウザが300秒に一回自動的にリロードします。

この一行は、もしIEブラウザを使っている場合、互換モードで表示してね。と指示してます。

viewportもかなり複雑な属性です。http-equiv同様、この記事ではEmmet機能で表示されたviewportがどのような役割をしているのかだけ簡単に説明します。

viewportはスマホやタブレットでそのページをどのように表示させるのかを指示している属性です。

スマホでWEBサイトを見た時にPC画面で表示される画面をそのまま縮小された表示すると、文字が小さくなりすぎてかなり読みにくいですね。
それを解消する為にviewportを書くことで、スマホやタブレットで見た際に自動的にサイズ調整を行ってくれます。

title

title要素でWEBページのタイトルを指定できます。
注意点としては、WEBサイトのタイトルを記述するのではなく、WEBページ毎に異なるtitleを用意する必要があることです。

HTMLを書きながら各要素を学ぶ

ここからは実際にHTMLを書きながら学んでいきましょう。
これから覚えていく各要素は全てbodyタグの中に記述していきます。

見出しを表すhタグ

画面のようにh〇と書かれたタグが見出しを表すhタグです。

hは見出しを表す英単語のheading（ヘディング）の頭文字です。

hタグはh1からh6までの6段階のレベルがあります。
h1が最もレベルが高く、h6が最もレベルが低くなります。

<h1>は一つのページに対して１回のみ使うようにしてください。画像のように何度も<h1>を使用するのはSEOの観点からかなり不利になります。

<h1>はページ全体に対する見出しと捉えて記述して下さい。つまり、hタグの直下だけに関連している書き方は好ましくありません。
少し深堀していきます。

先ほど、例えとして出した味噌ラーメンの作り方のページを作成するとしましょう。
このページにふさわしい<h1>要素は<h1>味噌ラーメンの作り方</h1>のような内容です。

このページの内容は大きく分けて、下準備、スープの作り方、麺の茹で方の３つに分かれているとして、下準備に関する見出しタグとして<h1>を使ってしまうのは、タグ直下の内容にしか触れていない為、<h1>としてはふさわしくないという事です。

これらの要素に対して使いたいのが<h2>タグです。

下準備の項目の中で更に「材料」「下処理」等と項目が分かれているなら一つレベルが低い<h3>タグを使いましょう。

<h2>や<h3>タグは一つのページで何度使っても大丈夫ですが、画像のように見出しレベルを飛ばすのは不適切な書き方です。

上画像は正しいｈタグの配置例です。このままでは感覚が伝わりにくいので味噌ラーメンの作り方に置き換えます。

このようにhタグを見ただけで、このページは何について書かれたページだと分かるように記述するとSEOの観点から見てもプラスに作用する可能性が高いです。

段落を表すpタグ

<p>タグは段落を表すタグで最も使用頻度の高いブロックレベル要素の一つです。

正確にはブロックレベル要素という呼び方はHTML4.01まで使われており、今ではより複雑なコンテンツカテゴリに分けられています。
しかし、ブロックレベル要素とインライン要素の概念はレイアウトを整える上で非常に重要です。

ブロックレベル要素とインライン要素の詳しい解説はCSSの記事で解説を行いますが、このHTMLの基礎講座の中でも度々ブロックレベル要素とインライン要素という単語が出てきますので、基礎的な概念を説明します。

ブロックレベル要素をより分かりやすくする為にpタグの背景をピンク色にするCSSを適応させます。

先ほどのHTMLをブラウザ等で表示させてみると<p>要素の背景がピンク色になっているのが確認できます。
ここで注目してほしいのが、テキストにのみ背景が表示されているわけではなく、四角形のブロックのようなものが出来ているのが分かります。

ブロックレベル要素は全てこのような四角のブロックが生成されます。

インライン要素の解説を行う前にテキストを改行する<br>タグを解説します。

テキストの間に<br>タグを挿入すると、そこからテキストが改行されます。
ここで注目してほしいのが<br>タグには閉じタグ（終了タグ）を記述する必要がない事です。

<br>のような内容が存在しないタグを空要素といいます。
先ほど解説した<head>の中身をもう一度見てみましょう。

<meta>タグには閉じタグがありませんね。
これも空要素となります。他にも代表的な空要素のタグとしては<img>タグがあります。
空要素に関する詳しい解説は<img>タグの解説で行います。

<br>はインライン要素です。しかし、インライン要素の解説を<br>で行うのは少し都合が悪いです。
そこで、次に紹介する<a>タグでインライン要素について解説します。

リンクを作るaタグ

<a>タグのaはアンカーの頭文字です。

#の箇所を任意のURLに置き換える事で<a>要素で囲われた内容をクリックする事で指定のURLにアクセスできるようになります。

例えば、このように味噌ラーメンのWIKIペディアのサイトへのリンクを追加して

味噌ラーメンのテキストをクリックすると

味噌ラーメンのWIKIペディアのサイトにアクセスします。

インライン要素

<a>タグはインライン要素です。

<p>要素の背景はピンクに、<a>要素の背景は赤にするCSSを用意して先ほどのHTMLを見てみましょう。

<a>タグで囲われた内容の背景が赤色になっているのが確認できます。インライン要素はボックスレベル要素の中で使用することが出来ます。しかし、反対にインライン要素の中にボックスレベル要素を使用する事はできません。

試しに、<a>タグと<p>タグの位置を逆にしてみます。この書き方は正しくありませんが、この状態だとブラウザではこのように表示されます。

ブラウザが頑張って表示させようとレンダリングしてくれてますが、やはりおかしなことになっています。

次はシンプルにボックスレベル要素とインライン要素を並べてブラウザで見てみます。

ボックスレベル要素はブラウザの横幅いっぱいまでに背景が付いているのに対して、インライン要素はテキストにのみ背景が付いています。
先ほども述べましたが、ブロックレベル要素とインライン要素の概念はCSSの学習を始めた段階でより深く学んでいくことになるでしょう。この記事で取り扱うのはここまでにしてHTMLの要素の解説に戻ります。

<a>タグでリンクを作れるのはテキストに対してのみではありません。例えば画像を表示される<img>タグに対して使用すれば画像リンクを作成する事ができます。

画像を表示させるimgタグ

先ほど述べた通り<img>タグは空要素です。

今から解説する内容は厳密には正しくありません。しかし、なぜ<img>タグは内容がないから要素なのか理解するには十分です。

<img>タグではsrc（ソース）属性の値としてimgファイルまでのパスを記述する事で、画像を表示させることが出来ます。
しかし、表示されたのは画像であり、どこにもテキスト(内容)が存在しません。
つまり、表示させる内容がないから<img>は空要素なのです。

しかし、先ほど述べた通り、この説明は厳密には正しくありません。

src属性の後にalt属性がありますが、このalt属性は様々な場面で使われており、例えばクローラーに対して画像の意味を伝えたり、何らかの理由で画像が表示できなかった場合の代替えテキストとしてブラウザで表示されます。

audioタグ

<audio>タグは今は特別覚える必要はありません。<img>タグとの対比の為に用いています。

先にaudio要素をブラウザで見てみるとこのような音楽や音声が再生できる機能が追加されます。
このaudioプレイヤーにも、どこにもテキスト（内容）は存在していませんね。
でわ、audioタグは空要素なのでしょうか？

しかし、audioタグにはalt属性のようなものは用意されていません。その為、内容として代替えテキストを入れています。
内容があるからaudioタグは空要素ではありません。
何故このようになっているかというと、audio要素が対応していないブラウザではalt属性を追加したところで勿論表示されません。
そこで、代替えテキストを内容として入れておくことで、audioタグ未対応のブラウザではテキストを表示するようにしている為です。

このようなタグはいくつか存在します。現状、この要素は空要素！この要素は空要素ではない！と覚えていくほかありません。

imgタグはインライン要素

<img>タグはインライン要素です。インライン要素はブロックレベル要素の中に入れるべき要素ですので、親要素としてブロックレベル要素を用意してあげる必要があります。
※CSSのdisplayプロパティでブロックレベル要素にすることが出来ますが、それは別の話として・・・

<img>の親要素としてふさわしいブロックレベル要素を３つ紹介します。

一つ目が<p>タグです。一時期Twitterでも<img>は<p>で囲むべきかその他のタグでもいいのか論争が起きたこともあります。

この論争に対して持論を述べるつもりはありませんが、筆者自身はページの内容とマッチしている画像を使用する場合、<p>タグで囲むようにしています。

<p>タグを使うべきと主張している人達の言い分としては、alt属性を使う以上文脈として適切な画像を使用しているのだから<p>タグが適切という主張があります。

２つ目が<div>タグです。

汎用コンテナーのdivタグ

<div>タグは汎用コンテナーとなるブロックレベル要素で<p>タグと並び、最も使用されているブロックレベル要素です。

<div>自体は特別な役割を持っていない要素です。しかしCSSでスタイリングしやすくしたり、lang属性等を付けて<div>タグ内の要素に固有の意味を持たせることができます。

単に画像をWEBページのスタイリングの為に使用するのであれば<div>タグを使うのも有りだと思います。

キャプションを付けるfigureタグ

最後が<figure>（フィギュア）タグです。<figure>タグは図表等の自己完結型のコンテンツに使用するタグです。

<figure>タグを使う場面としては、本文に関係している画像ではあるけど、別に配置する場所はそこじゃなくてもいいよね！！といった画像に対してしようします。例えば、挿絵等ですね。

ざっくりしているように感じますが、HTMLの公式ドキュメントでもある、MDNのサイトにもこのように記述されています。

<figure>タグは<figcaption>を使用して画像にキャプションを添える事が可能です。

キャプションには二つの意味があります、一つが見出し、もう一つが説明文です。<figcaption>は必ず<figure>タグ内の先頭か末尾に配置する必要があります。

画像のように<figcaption>を末尾に配置した場合は説明文のようにキャプションを付けることが出来ます。

対して、<figcaption>を先頭に配置した場合は見出しのようにキャプションを添える事ができます。

いよいよHTML基礎講座最後の要素です。

listタグ

まずは、シンプルな序列なしリストです。

<ul>要素を親要素として、子要素に<li>要素を配置すると

リストとなります。
<ul>はunordered listの略で、<li>はlist itemの略です。

余談ですが、listでラーメンｗｐ並べるとメニューみたいですよね？

実は<menu>タグもあります。しかし、使い方は<ul>とほぼ同じで、対応しているブラウザの少なさから滅多に使われることはありません。

<ul>要素の中に<ul>を入れる事も出来ます。

<li>要素の左に黒い丸や白い丸が付いていますが、これはCSSで指定しない限り自動的に付与されます。

<ul>要素にtype属性を付けると行頭記号の形状を指定することが出来ますが、この方法は現在非推奨となっています。

なぜtype属性が非推奨になったのか

少し脱線しますが、type属性が非推奨になった理由は、HTMLやCSSを学ぶ上で非常に有用な情報です。

HTML4.01まではtype属性のようなHTMLに記述しす事でスタイリングに影響を及ぼす属性はいくつも存在していました。
しかし、現在のHTMLの考え方はあくまで文章構造をブラウザやクローラーに伝えるために書くべきとされており、レイアウトはCSSによってのみ整えるべきとされています。

その結果、type属性のような見た目に影響を与える属性はことごとく現在は非推奨となっています。

CSSの書き方はCSSの基礎講座で解説いたしますが、リスト関連のCSSのみこちらで軽く説明します。
この理由はCSSの基礎講座としてリストのCSSは取り扱わない為です。

list-style-typeをnoneにする事で行頭記号を非表示にすることが出来ます。

list-style-typeプロパティは継承させることが出来ます。
親要素の<ul>要素にnoneを指定する事で、全ての子要素の<li>の行頭記号が非表示になります。

序列付リスト

次は序列付リストの<ol>タグです。

基本的な使い方は<ul>要素とは変わりませんが、<ol>要素固有の二つの属性があります。

一つ目がstart属性です。これは指定した値から順に数字がカウントされていきます。

二つ目がreversed属性です。これは数字が逆順になります。

序列付リストは例えば、ラーメンの作り方の手順等に使用する場合<ul>要素よりも適切です。