4/19(Fri)
Webページの制作や、ディレクションに携わる中で欠かせないのがHTMLに関する知識です。ここではHTMLの仕組みや用語をわかりやすく解説します。
また後半ではテキストエディタ「Visual Studio Code」を操作しながら、HTMLファイルを作成する様子もご紹介しているので、勉強の参考にしてくださいね。
HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略で、Webページを制作するためのマークアップ言語です。またマークアップ言語とは、Webページ内のテキスト情報の構成（タイトル・段落など）や役割をコンピュータが構造的に理解できるようにするための言語を意味します。
つまり人間がテキスト情報を目にした際に段落やタイトル、太字を識別できるのと同じように、コンピュータはHTMLをはじめとしたマークアップ言語を介してテキスト情報を識別しているのです。
HTMLの役割は、ただ単にテキスト情報をコンピュータに解釈させるだけではありません。例えば正しいマークアップが行われていれば目の不自由な人でも音声読み上げソフトによって、ページに記載された文章や画像の情報を得られます。
またWebデザインの観点からも、HTMLは重要です。基本的にWebページの見た目は、HTMLとCSS（色や文字サイズなどの装飾を設定する言語）によって作られています。そのためHTMLによって正しくマークアップされた情報は視認性が高く、利用者にとってコンテンツ内容も理解しやすくなります。
HTMLはタグ・要素・属性の3つで構成されるマークアップ言語です。ここではWebページが表示される際のHTMLの役割が理解できるよう、HTMLの基本用語である「タグ・要素・属性」の意味を解説します。
タグとは、HTMLの記述に意味を与える印です。タグによって、コンピュータはテキスト情報を表示する形式が理解できるようになります。
例えば上の図は、段落を定義する意味を持つ「pタグ」を示していますが、他にも様々な種類があります。通常はテキスト情報の冒頭に「開始タグ」を、末尾に「終了タグ」をセットで記述し、テキスト情報の範囲を指定します。終了タグがなくても範囲が指定できるタグを「空タグ」と呼びます。
要素（element）とは、Webページを構成するテキスト情報のかたまりを指す用語です。さらに解説すると、前述のようにHTMLの開始タグと終了タグはセットで扱われ、開始タグと終了タグの間にテキスト情報が記載されます。タグとテキスト情報の組み合わせで構成されたかたまりが「要素」なのです。
また、要素は入れ子構造で使用されます。例えばHTMLではWebページの中身が「head要素」と「body要素」の2つに大別され、head要素にはコンピュータ向けの記述、body要素に実際にブラウザ表示させる記述をします。図のp要素や、hタグ等の見出し要素はブラウザに表示させる記述なので、body要素の中に入れ子構造で記述をすることになるのです。
属性（attribute）とは、個々のタグに特定の性質や動作を与える記述です。属性を記述する際はそれに対する「属性値」も記載します。例えば上の図では、aタグは他ページへのリンクを意味するタグですが、それだけではどのページへのリンクなのかは分かりません。そのため、aタグにhref属性を追加し、その中でリンク先の指定をするという形式になっています。
また複数の属性を記述することも可能で、例えばテキスト情報をリンク化させた上で、リンク先の開き方を指定するtarget属性を追加することができます。上の図では、target属性を使って別タブにリンク先ページを表示させることを示しています。
ここまで解説したように、HTMLはWebページ上のテキスト情報をコンピュータが解析できるように構造化する役割を持つ言語です。Web制作に携わる上でHTMLと同じく欠かせない言語の1つにCSS（Cascading Style Sheets）があります。HTMLがページの構造を記述する言語であるのに対し、CSSはページのレイアウトや装飾を記述する言語です。
HTMLにもレイアウトや装飾をコントロールするための記述は存在しますが、文書構造（HTML）とスタイリング（CSS）を分離させることで、レイアウトの変更がしやすくなるため、Web制作の効率も向上します。そのため、Web制作を学ぶ際はHTMLとCSSはセットで学ぶことが多いです。
HTMLにはいくつかの種類が存在しており、それぞれ特徴が異なります。現在はHTML Living StandardがHTMLの標準規格となっています。
一方、2021年に廃止されたHTML5や2018年に廃止されたHTML4・XHTMLなどの規格も制作現場では耳にする機会があります。またHTML Living Standardの要素はほとんどHTML5と同じなので、ここではHTML5・HTML4・XHTMLの特徴を整理した上で解説します。
HTML5は2014年に発表されたHTMLのバージョンで、後述するHTML4と比較すると、テキスト構造を表す新しい要素が追加されたことによってコンピュータにより明確に構造が伝えられるようになっています。
また、Flashなどのプラグインを利用するのが一般的だった動画や音声がHTMLで扱えるようになった点が大きな特徴だと言われています。
HTML4は1997年に発表されたHTMLのバージョンで、対応ブラウザが多い点が大きな特徴です。HTML5とは異なり、動画や音声を組み込んだ動的なページを制作する際にはHTMLではなくJavaScriptを用いる必要があります。
XHTMLはxmiとhtmlを組み合わせたマークアップ言語であり、記述ルールが順守されていない場合にページが正しく表示されない点が大きな特徴です。
例えばHTMLでは閉じタグの記述を忘れていてもブラウザは記述されているものとして補足した上でページを表示しますが、XHTMLでは閉じタグの記述がなければページがエラー表示になってしまいます。またHTMLと比較すると普及範囲が狭いため、学習が難しいと言えるでしょう。
ここからはHTMLの記述でよく用いられるタグの概要を解説します。
hタグとは「headingタグ」の略で、見出しを作成する際に用いるタグです。h2～h6があり、見出しの数字が大きくなるにつれて表示サイズが小さくなります。h1タグが大見出しで最も大きなサイズの見出しとなり、サイトのメインとなる見出しに使われるタグです。文章やページ内の情報を構造的に示す目的で使用されます。
pタグとは「paragraphタグ」の略で、テキストの段落を作成する際に用いるタグです。Webページ内でテキストを表示する際に頻繁に使用されます。
また、pタグを使用した個所はブロックレベル要素となり、その部分は一つのかたまり（ブロック）として認識されます。そのため、一般的なブラウザではpタグで囲ったテキストの前後に改行が入ります。
aタグとは「anchorタグ」の略で、ページ内にリンクを埋め込む際に用いるタグです。aタグを用いる場合は性質を付与する「href属性」を記述した上で、属性値にはリンクさせるWebページのURLやファイルの格納場所・名前を記述します。
そのため、a要素の開始タグと終了タグの間にはテキストを記述したり、画像を挿入することになります。
liタグとは「list itemタグ」の略で、リスト項目を記述する際に用いるタグです。順序のないリストを作成する際に用いる「ul（unodered list）タグ」や順序のあるリストを作成する際に用いる「ol（ordered list）タグ」に対して入れ子状に記述されます。
よくWebサイトで見かける箇条書きの表示などはリストタグを使用して書かれていることが多いです。
imgタグとはWebページに画像を表示させる際によく用いるタグです。src属性とalt属性をセットで記述します。
src属性は画像ファイルが格納されている場所と画像ファイル名を指定する属性で、これによってどの画像を表示するのかを指定します。またalt属性は画像の説明を記述し、画像が表示できない際の代替情報として使用します。imgタグは内容を持たない空タグなので、終了タグの記述は不要です。
tableタグは表を作成する際に用いるタグです。表の中の行を作成する「tr（table row）タグ」や表の見出しセルを作成する「th（table header）タグ」、表の見出しに対するデータセルを作成する「td（table data）タグ」と組み合わせて記述します。
tableタグを用いることで、テキストだけでは伝わりにくい情報を整理して伝えることができます。
divタグとは「divisionタグ」の略で、要素をグループにする（レイアウトを施す）際に用いるタグです。divタグはそれ自体に意味を持たず、div内に入れ子状に設置された各要素をまとめて整理したり、装飾する役割を担います。
styleタグとはHTMLファイルでCSSを指定して装飾を施す際に用いるタグです。ユーザーには表示されないhead要素内に記述し、開始タグと終了タグの間にCSSを記述します。styleタグによってHTMLとCSSを1つのファイルで管理できるようになるのです。
strongタグとは開始タグと終了タグの間にあるテキスト情報が重要である際に用いるタグです。strongタグを用いることで、テキスト内容が太字で表示され、GoogleやYahoo!などの検索エンジン、ユーザーに対して重要な情報であることを伝えられます。
テキスト内容を太字にするタグにbタグがありますが、bタグが太字表示にする効果のみであるのに対して、strongタグは内容の重要性を示す効果がある点で異なります。
hrタグとは「horizon ruleタグ」の略で、水平方向の罫線を引く際に用いるタグです。width属性を追加して横の長さを調整したり、size属性を追加することで高さを調整することも可能です。また改行のbrタグと同じように、終了タグが不要の空タグに分類されます。
ここからは無料のテキストエディタアプリ「Visual Studio Code」でHTMLファイルを作成していきましょう。
前述したHTMLタグを使って簡易的なWebページを作成します。作成したHTMLファイルは最終的にブラウザで確認するため、fireafoxやGoogleChromeなどのブラウザアプリを事前にインストールしておきましょう。
またVisual Studio Codeでのコーディングがしやすくなるよう、HTMLの開始タグと終了タグをハイライト表示する「Highlight Matching Tag」やHTMLの入力補完機能がある「HTML CSS Support」をはじめとした拡張機能のインストールもおすすめです。
まずはVisual Studio Codeをダウンロードしましょう。Visual Studio CodeはMIcrosoft社が無償で提供するテキストエディタなので、ダウンロードする際に料金が発生することはありません。
ファイル＞新しいテキストファイルを選択した後に「名前を付けて保存」をクリックし、html拡張子に設定した上で任意の名称を設定した後、保存します（index.htmlとするのが慣例）。
ファイルを作成したら、HTML記述でhead要素 ・body要素・ main要素の作成、headerとfooterの枠を作成します。Visual Studio Codeでhtmlファイルを作成したら、まずは「html」と入力しましょう。
入力候補に前述のHTMLの種類がいくつか表示されます。ここでは「HTML5」を選択すると、基本の構成（head要素・body要素・main要素）が自動入力されます。
次に自動入力された項目のうち、表示言語を日本語に設定するため、以下のような記述に修正しましょう（※自動入力時は英語表示（en）で記述されています）。
言語の設定が完了したら念のためhtml、head・bodyが開始タグと終了タグのセットで記述されているか確認しておきましょう。
次にWebページのコンテンツに当たるbody要素の構造を次の画像で例示します。設定する文章は任意ですが、次のようにタイトル、見出しタグ、テキストを入力してみてください。
また、今回は簡易的な例示をしていますが、実際にbody要素の構造を考える際は以下がポイントになります。
コンテンツのグルーピングの段階では、headerとfooterにどのような情報を記述するか、どのようにコンテンツをまとめるのかを決めます。
また画像の設置段階では店舗や商品に関する情報をテキストで表示するか、画像で表示するのかを決めます。最後に見出しの構造段階では、検索エンジンが正しくページの情報を読み込めるよう、hタグ（見出しタグ）やpタグの構造を入れ子状に記述します。
ここまで解説してきた手順で上記のようにHTMLの記述を終えたら、Visual Studio CodeでHTMLファイルを上書き保存します。次に、保存していたHTMLファイルをChromeなどのブラウザで開いてみましょう。すると次のようにページがブラウザに表示されます。
最後にこの記事で解説したHTMLの基礎知識やHTMLの記述方法を実践しながら学べるSchooのおすすめ講座をご紹介します。
個人でHTML/CSSを使ったWebサイトを制作したいと考えている方や、業務でHTMLに関する知識が必要な方はぜひ、気軽に受講してみてくださいね。
＜ コース概要 ＞
このコース授業では、全10回の授業を通してHTML・CSSを使ったコーディング方法を学びます。授業では無料コードエディタ「Visual Studio Code」を使ってデモサイトを制作しながら、HTML・CSSコーディングの基礎やWeb制作の流れを学べます。Webディレクターやフロントエンドエンジニアを目指す方におすすめのコース授業です。
先生プロフィール
こばやす
Webデザイナー/Webディレクター。独学からIT企業インハウスのWebデザイナーへ転身。個人では講師業や初学者のメンターとして制作アドバイスも行っている。印刷・Webサイトデザイン、コーディング、ディレクター、採用担当、フリーランスを一通り経験。twitterでは様々な立場になって分かったWeb制作実務の話やデザイン初学者に向けた学習のヒントを発信。
HTMLはWeb制作の現場で働く際に基礎知識として必要になるマークアップ言語です。実際にコードを記述するコーダーやWebデザイナーだけではなく、制作現場に指示を出したりWebページの企画を担当する場合にも現場との円滑なコミュニケーションを実現する上で役立つ知識だと言えるでしょう。
