HTMLは、Webページの基本となる言語であり、Webページを作成するためには欠かせないスキルです。HTMLの基本構造を理解し、代表的なタグを使いこなすことで、自分の思い描くWebページを実現することができます。ただし、必要以上に複雑なHTMLコードを書く必要はなく、適切なタグを使い分けることが大切です。
Webページを作る際に必要なHTMLは、誰でも手軽に学ぶことができます。しかし、独学で学ぶ方にとってはHTMLの基礎から学ぶことが難しいことも事実です。そこで本記事では、HTMLの基本的なタグを中心に解説していきます。
Webページを作る上で、必要不可欠なのはタグの理解です。タグはHTMLで要素を表現するための記号のことで、ページのレイアウトや装飾、コンテンツを追加することができます。まずは基礎となるテキストタグやリストタグを理解し、次にフォームタグやテーブルタグ、埋め込みタグなど、より高度なタグの使い方を学んでいきましょう。
また、Webページを作る上で重要なのはユーザーの利便性を考えたデザインです。HTMLには、レスポンシブデザインという機能があり、スマートフォンやタブレット端末など、さまざまなデバイスに対応したWebページを作ることができます。これらの機能についても解説します。
さらに、HTMLの応用タグを駆使して、魅力的なWebページを作ることができます。例えば、フォームタグを使えばユーザーからの情報を収集することができ、埋め込みタグを使えば、動画や地図をWebページ内に表示することができます。WordPressの場合は、ブロックエディタの機能を使えば簡単に設置できます。
HTMLは、Webページを作る上で必要不可欠な知識です。しかし、独学で学ぶ方にとってはわかりにくい部分もあるかもしれません。本記事では、独学で学ぶ方でもわかりやすいように、基礎から応用まで幅広く解説しています。Webページを作る際には、ぜひ本記事を参考にしてみてください。
HTMLとは
Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、インターネット上の情報を共有する為に各個人のコンピュータ環境に依存しない統一した規格の言語になります。簡単に言うとWebページを書く為の言語です。
「ハイパーテキスト」とは情報を結びつけるハイパーリンク機能を持ったテキスト文書の事。またはその仕組みの事です。
【リンクについてはこちら】
HTMLの文書には様々な内容が部品のように組み合わされて出来ています。HTMLではこの部品をそれぞれ「要素」として分類し、該当の箇所がどの要素なのかを分かるように「タグ」という印をつけて示しています。タグ付けされた文書を解読し、定義に沿って適切に表示をするのが「ブラウザ（Google、Safariなど）」の役割となります。
HTMLのタグの種類
HTMLでは、テキストを表示するためにさまざまなタグを使用します。テキストタグには、ヘッダータグとパラグラフタグがあります。
1. ヘッダータグ
ヘッダータグは、見出しを作成するために使用されます。h1からh6までの6つのレベルがあり、h1が最も大きな見出し、h6が最も小さい見出しとなります。見出しは、ページの構造化や読みやすさを向上させるために重要です。
2. パラグラフタグ
パラグラフタグは、文章を表示するために使用されます。pタグを使用することで、文章を区切り、段落を作成することができます。また、pタグは、文章のスタイルを設定するために使用することもできます。
3. リストタグ
HTMLでは、箇条書きリストと番号付きリストの2種類のリストがあります。リストタグを使用することで、項目を一覧表示することができます。
4. 箇条書きリスト
箇条書きリストは、項目を点や記号で表記するリストです。ulタグを使用し、liタグでリストの項目を記述します。
5. 番号付きリスト
番号付きリストは、項目を数字で表記するリストです。olタグを使用し、liタグでリストの項目を記述します。
6. リンクタグ
リンクタグは、他のページへのリンクを作成するために使用されます。aタグを使用し、href属性にリンク先のURLを指定することで、リンクを作成することができます。
7. 画像タグ
画像タグは、画像を表示するために使用されます。imgタグを使用し、src属性に画像のURLを指定することで、画像を表示することができます。また、alt属性を使用することで、画像が表示されなかった場合に代替テキストを表示することができます。
8. フォームタグ
フォームタグは、ユーザーからの入力を受け付けるために使用されます。フォームタグには、テキスト入力欄、チェックボックス、ラジオボタン、プルダウンメニュー、送信ボタンなどの入力フォームがあります。
9. テキスト入力欄
テキスト入力欄は、ユーザーがテキストを入力するためのフォームです。inputタグを使用し、type属性に”text”を指定することで、テキスト入力欄を作成することができます。
10. チェックボックス
チェックボックスは、複数の選択肢から複数選択できるフォームです。inputタグを使用し、type属性に”checkbox”を指定することで、チェックボックスを作成することができます。
11. ラジオボタン
ラジオボタンは、複数の選択肢から1つだけ選択できるフォームです。inputタグを使用し、type属性に”radio”を指定することで、ラジオボタンを作成することができます。
12. プルダウンメニュー
プルダウンメニューは、複数の選択肢から1つだけ選択できるフォームです。selectタグを使用し、optionタグで選択肢を記述することで、プルダウンメニューを作成することができます。
13. 送信ボタン
送信ボタンは、フォームに入力した情報をサーバーに送信するためのボタンです。inputタグを使用し、type属性に”submit”を指定することで、送信ボタンを作成することができます。
14. テーブルタグ
テーブルタグは、表を作成するために使用されます。tableタグを使用し、trタグで行を、tdタグでセルを記述することで、テーブルを作成することができます。
15. 埋め込みタグ
埋め込みタグは、外部コンテンツをHTMLページに埋め込むために使用されます。埋め込みタグには、YouTube動画の埋め込みやGoogleマップの埋め込みがあります。
HTMLタグの応用
埋め込みタグ Webページには、YouTubeの動画やGoogleマップなど、他のウェブサイトで提供されているコンテンツを埋め込むことができます。そのために、HTMLにはいくつかの埋め込みタグが用意されています。
1. YouTube動画の埋め込み
YouTube動画を自分のウェブサイトに埋め込むには、<iframe>タグを使用します。YouTube動画ページで「共有」をクリックし、「埋め込みコードを取得」をクリックすると、iframeタグが表示されます。このタグをコピーして自分のHTMLコードに貼り付けるだけで、YouTube動画を埋め込むことができます。
2. Googleマップの埋め込み
Googleマップを自分のウェブサイトに埋め込むには、<iframe>タグを使用します。Googleマップのページで、「共有」をクリックし、「地図を埋め込む」をクリックすると、iframeタグが表示されます。このタグをコピーして自分のHTMLコードに貼り付けるだけで、Googleマップを埋め込むことができます。また、<iframe>タグの中には、地図の表示範囲や拡大率を指定する属性などを指定することもできます。
以上が、HTMLの応用タグについての説明です。これらのタグを使用することで、より高度なWebページを作成することができます。ただし、必ずしもすべてのタグを使用する必要はありません。WordPressにはブロックエディタの機能で対応が可能ですが、基本的なタグ構造を理解することが必要です。自分が作成したいWebページに必要なタグを適宜使用し、適度に使い分けることでカスタマイズが可能になります。
HTMLの標準仕様とは
今までは、HTMLの標準仕様の策定は「W3C」＝（World Wide Web Consortium）という非営利団体が行っていました。Webを考案し、Webに関わるシステムを開発、実装したティム・バーナーズ＝リーによって1994年創設された機関です。「HTML5」より以前の「HTML４/4.01」までは、W3Cが中心となって仕様の協議決定をおこなっていました。現在のHTMLの標準仕様の策定機関は、「WHATWG」＝（Web Hypertext Application Technology Working Group）で、Apple、Mozilla、Opera Softwareが2004年に設立しました。2017年にはMicrosoftも加わりました。
今まではHTMLの仕様は、W3Cが勧告する「HTML５/5.1」と、WHATWGが策定を定める「HTML Living Standard」の２つの標準に分離した状態が続いていました。その後、GoogleやSafari、Firefoxなど主要のブラウザが「HTML Living Standard」を標準仕様として採用するなどの流れから「W3C」は独自のHTMLの標準化を断念し「WHATWG」に委ねることになりました。結果、2021年に「WHATWG」はHTMLの標準仕様を「HTML5」から「HTML Living standard」に完全統一し策定しました。
「HTML5」の最終版「HTML5.2」から「HTML Living standard」が標準仕様になって要素や属性が新しく追加、変更、廃止されました。しかし、「HTML Living standard」と「HTML5」の基本的な要素や属性の扱いは同じです。一部のタグの扱いが違うくらいで大きな違いはありません。
ヒナちゃん「HTML5」はなくなっちゃったの？
トシリン「HTML5」をベースにした「HTML Living standard」に変わったというだけで基本構造は「HTML5」とほとんど一緒だよ。
「HTML5」の資格は役に立つのか
ヒナちゃん「HTML5」の認定資格を持っているけど無駄になっちゃうの？
トシリン決して無駄にはならないよ。「HTML5」の基本構造を知ることは、今の「HTML Living standard」を理解する事になるから、結果的に「HTMLの標準仕様」を理解してスキルアップに繋がると思うよ。
サイト構築に至っては、誤った、要素や属性を使っているとクローラーが理解しづらく、又ブラウザによってはレイアウト表示が崩れ、結果的にコンテンツの品質が落ちてしまいSEO評価の低下になりかねません。
CSSとは
Cascading Style Sheet（カスケーディング・スタイル・シート）の略で「HTML」の各要素に対して、文字サイズや色の指定、背景色などの書式を指定する言語です。また、各要素のサイズや周囲に枠線をつける指定もできます。又、「CSS」をうまく利用すると複数ページのデザインを一括で設定や変更が可能になります。「CSS」の記述の基本ルールは「プロパティ」と「値」を「：（コロン）」で区切ります。記述の最後は「；（セミコロン）」で「プロパティの区切り」を示す記号となります。プロパティを列記する際は、その間に「；（セミコロン）」を記述します。
CSSはどこに記述するのか
ヒナちゃんCSSはどこに書いたらいいの？
トシリンCSSを読み込ませる方法はいくつかあります。よく利用される方法を紹介しますね。
①外部参照
Webサイトの場合はほとんどこの形式で使用されます。「HTML」のヘッド要素の内にlink要素を記述し、外部の「CSSファイル」にCSSをまとめて記述する方法です。「CSSファイル」を編集することで複数ページを一括で装飾することが出来ます。
②ヘッダー埋め込み形式
「HTML」のhead要素の内にスタイルを記述する方法です。<head>～</head>の中に<style></style>を追加します。「CSSファイル」は不要になりますが、そのページだけしか「CSSの記述内容」が適用されないとうデメリットがあります。
「CSS」を扱えるようになれば Webページを好きなようにデザインできるようになります。
以上のようなプログラミングの知識がなくてもサイトを作れるシステム（WordPressなど）がありますが、基本の「HTML」や「CSS」を理解していれば、WordPressで制作するサイトも好きなようにカスタマイズ出来るようになります。
【ディベロッパーツールを使ったカスタマイズにつてはこちら】
ヒナちゃん「HTML」「CSS」などの基本用語を知り内容を理解することは、サイト制作の最適化に繋がります。又、サイトのカスタマイズも容易になりますね。
独学でWebサイト制作されている方の参考になれば幸いです。