自分でWebサイトを作ってみたいと思ったことはありませんか？そのWebサイトの基礎となるのが「HTML」です。
HTMLを学ぶことで、オリジナルのWebページを作成できるようになります。
本稿では、HTMLの基礎知識と基本構造を初心者の方にもわかりやすく解説します。
目次
HTMLとは？
HTMLとは、「Hyper Text Markup Language」の略で、Webページを作成するための基本的なマークアップ言語です。
マークアップ言語とは、文章に「この部分は見出し」「この部分はリンク」といった情報を加えるための言語のことです。
コンピュータは、日本語や英語など人間が使っている言葉をそのまま理解することはできません。
HTMLを使うことで、文章や画像などの情報をコンピュータが理解できる形に変換し、Webブラウザに表示させることができます。
そのため、HTMLを使うことで、ホームページなどのWebサイトを作ることができます。
「ホームページ」という言葉は身近なものですが、「ウェブサイト」との違いやその種類についてご存じですか？ 本稿では、ホームページとは何か、Webサイトとの違い、そして様々な種類のホームページとその役割について、初心者の方にもわかりやすく解説していきます。 ホームページとは？ ホー...
HTMLの歴史
HTMLは、1989年にスイスの欧州原子核研究機構（CERN）で、イギリスの計算機科学者であるティム・バーナーズ・リー氏によって開発されました。
当時の研究者たちは、世界中の研究成果を共有するための効率的な方法を模索していました。
ティム・バーナーズ・リー氏は、「ハイパーテキスト」という概念に着目し、文書同士をリンクで繋ぎ、世界中の情報を網羅的に繋ぐシステムを構想しました。
このアイデアがウェブの基本となるHTMLの開発に繋がりました。
HTMLは、ウェブの進化とともに常にバージョンアップされてきましたが、その理由として以下の3つが挙げられます。
- 機能の追加：新たな要素や属性を追加するため（動画や音声の埋め込みなど）
- 標準化と互換性の向上：異なるウェブブラウザでも同じように表示できるようにするため
- セキュリティの強化：古いバージョンにはセキュリティ上の脆弱性が存在する場合があるため
HTMLのバージョンアップとともに、ユーザーはより便利に使いやすく、安心して利用することができるようになりました。
HTMLの主なバージョン
今回は、初心者向けにHTMLの主なバージョンを簡潔に解説します。
- HTML 1.0（1993年）：最初のバージョンで、基本的な構造要素やリンク機能など
- HTML 2.0（1995年）：HTML 1.0の改良版で、フォームやテーブル（表）のサポートなど
- HTML 3.2（1997年）：スタイルシートのサポートや、より複雑なテーブル表示など
- HTML 4.0（1997年）：フレームやスクリプトのサポートなど
- HTML 4.01（1999年）：HTML 4.0の修正版で、バグ修正と小さな改良
- XHTML 1.0 (2000年)：HTMLをXML形式(※)に再定義したバージョン
- HTML5（2014年）：新しい要素や属性、マルチメディアのサポートなど
- HTML 5.1（2016年）：さらに新しい要素や属性の追加と、フォーム機能の改善など
- HTML 5.2（2017年）：さらに新しい要素や属性の追加と、セキュリティの強化
※XMLとは、データの構造を明確にし、異なるシステム間でのデータ交換を円滑にするためのマークアップ言語です。
HTML Living Standard
2021年以降、HTMLの標準仕様は「HTML Living Standard」に移行しました。
これは、Apple、Mozilla、Operaなどの主要ブラウザ開発者によって設立された組織であるWHATWG（ワット・ダブリュー・ジー）が策定するHTMLの仕様です。
※WHATWGは、Web Hypertext Application Technology Working Groupを意味する名称です。
>> HTML Living Standard｜WHATWG
従来のWeb技術の標準化団体である「W3C（World Wide Web Consortium）」が緩やかなペースで標準化を進めていたことに対し、WHATWGはより迅速かつ実用的なWeb技術の開発を目指して設立されました。
当初はW3CとHTMLの仕様で競合関係にありましたが、2019年にW3CとWHATWGの間で合意が成立し、HTML仕様はLiving Standardに一本化されました。
HTML Living Standardの特徴
- HTML5をベースに発展：HTML Living Standardは、HTML5をベースに、より多くの機能や改善が加えられています。
- バージョン番号がない：HTMLのバージョン番号がなく、常にHTMLの最新の仕様が採用されています。
- コミュニティ主導：WHATWGという組織が中心となり、世界中の開発者たちが共同で仕様を策定しています。
- ブラウザ開発元の協力：Google、Mozilla、Appleなど主要なブラウザ開発元が開発に貢献しています。
- 柔軟性と拡張性：新しい技術や活用事例に対応するために、柔軟かつ拡張性のある設計
HTML Living Standardは、常に最新のウェブ技術に対応しており、開発者はより自由に創造的なWebサイトを構築することができます。
HTMLの基礎知識
HTMLの基礎知識として、タグ、要素、属性の3つを解説します。
タグ
HTMLの「タグ」とは、要素の始まりと終わりを示す記号です。
< と> で囲まれた部分で、<p> や </p> のようにペアで使われることが多いです。
ウェブページを作成する際に、文章に意味を与え、ブラウザにどのように表示するかを指示するための「目印」のようなものです。
タグには、開始タグと終了タグがあります。
- 開始タグ：<〇〇> のように、要素の始まりを示す
- 終了タグ：</〇〇> のように、「/」を入れて要素の終わりを示す
要素
HTMLの「要素」とは、タグで囲まれた部分全体を指し、開始タグと終了タグ、そしてその間の内容で構成されます。
<p>これは段落です。</p>例えば、上記のコードの場合、<p> タグと </p> タグ、そして「これは段落です。」というテキストが組み合わさって、要素を構成しています。
※pタグは”Paragraph”（段落）を意味します。
つまり、タグは要素の一部であり、要素の種類を特定するためのものです。
属性
HTMLの「属性」とは、要素により詳細な情報を付与するためのものです。
例えば、リンク先のURLを指定したり、画像の大きさを変えたりすることができます。
以下、リンクするためのHTMLで解説します。
<a href="https://www.example.com">ここにURLやテキストを入れます。</a><a>：リンクを表す「要素」href：リンク先のURLを指定する「属性」https://www.example.com：リンク先のURL
このように、<a>の要素に対して、リンク先を指定するhrefが属性です。
HTMLの構造
HTMLでWebページを作成する際、必ず押さえておきたいのがその構造です。
HTMLの構造は、建物の設計図のように、ページの全体的な構成を決定します。
HTMLの構造を理解することで、Webページの全体像を把握でき、より複雑なWebページを作成できるようになります。
例えば、簡単なWebページの場合は、以下のように記述します。
<!DOCTYPE html>
<html>
<head>
<title>ここにタイトルを入力します。</title>
</head>
<body>
<h1>ここに見出しを入力します。</h1>
<p>ここに文章を入力します。</p>
</body>
</html>HTMLの構造は、主に以下の要素で構成されています。
DOCTYPE宣言
HTMLのDOCTYPE（ドックタイプ）宣言とは、HTML文書の先頭に記述するもので、ブラウザに対して「この文書はどのバージョンのHTMLで記述されているか」を宣言するものです。
ブラウザは、DOCTYPE宣言によって、HTML文書の解釈方法を決定します。
DOCTYPE宣言が正しく記述されていないと、ブラウザはHTMLを正しく表示できない可能性があります。
DOCTYPE宣言の記述は、HTML5以前のバージョンでは複雑でしたが、HTML Living Standardでは非常にシンプルで、以下のようになります。
<!DOCTYPE html>この1行で、ブラウザに対して、このHTML文書がHTML Living Standardに準拠していることを示します。
html要素
HTML文書全体を包み込む最も外側の要素のことを、html要素と言います。
html要素は、いわばHTML文書の根っこにあたる部分で、この要素の中にすべてのHTML要素が含まれます。
<html>タグで始まり、</html>タグで終わることで、ブラウザに「ここがHTML文書です」と伝えることができます。
<html>
</html>
見出し、段落、画像などのすべてのHTML要素は、html要素の中に記述されます。
head要素
HTMLのhead要素は、Webページの「頭」のような部分で、ページに関するメタデータを含む部分です。
メタデータとは、ページのタイトルや説明文、文字コード、外部リソースへのリンクなど、ページの内容を表示する以外の情報を指します。
例えば、以下のようなコードで記述されます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ここにページタイトルを入力します。</title>
<meta name="description" content="ここにページの説明文を入力します。">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png">
</head>要素の並び順は、厳密に決まっているわけではありませんが、一般的に上記のような並び順になっている事が多いです。
上記のコードの例を元に、このhead要素内に含まれる要素を、初心者向けに解説します。
meta要素
meta要素は、ページに関するメタ情報を記述します。
- charset属性：ページの文字コードを指定（世界中の言語に対応したUTF-8が使われることが多い）
- name属性：メタデータの種類を指定
- viewport：表示領域の設定
- description：検索エンジン向けのページの説明文を記述
- content属性：メタデータの内容を記述
title要素
title要素は、ページのタイトルを記述し、ブラウザのタブや検索結果に表示されます。
link要素
- rel属性：リンクの種類を指定
- stylesheet：CSS（※）へのリンク
- icon：ファビコン（ブラウザのバーに表示される小さな画像）へのリンク
- href属性：リンク先のファイルのURL
※CSSとは、Webページの見た目をデザインするためのプログラミング言語です。
head要素は、検索エンジンの上位対策（SEO対策）に影響しますので、アクセスアップをする上で重要な箇所といえます。
body要素
HTMLのbody要素は、実際にブラウザに表示されるページのコンテンツを記述します。
具体的には、見出し、段落、画像、表などがbody要素の中に記述されます。
head要素とは違い、実際にユーザーに見せる内容を記述する部分です。
<body>
<h1>ここに見出しを入力します。</h1>
<p>ここに文章を入力します。</p>
</body>上の例では、以下のようなタグを記述しています。
<h1>タグ：大きな見出し<p>タグ：段落
これらの要素はすべてbody要素の中に含まれています。
HTMLタグの種類と役割
一般的に使われる主なHTMLタグには、以下のようなものがあります。
基本構造
<html>：HTML文書全体を囲むタグ<head>：ページの内容に関する情報を記述するタグ<title>：ページタイトルを記述するタグ<body>：実際に表示されるページの内容を記述するタグ
コンテンツの構成
<h1>〜<h6>：見出しを表すタグ（h1が最も大きく、h6が最も小さな見出し）<div>：内容をグループ化するためのタグ<p>：段落を表すタグ<br>：改行を表すタグ<a>：リンクを表すタグ（他のページやファイルへリンクを貼ることができる）<img>：画像を表示するタグ<hr>：水平線を引くタグ
テキストの装飾
<strong>：強調したいテキストを太字にするタグ<em>：強調したいテキストを斜体にするタグ
ブログを書いていると、要点やポイントを強調することは多いですよね。WordPressユーザーならstrongタグやbタグなどを使ってテキストを太字にすることがあると思います。 ただし、場所によっては使わない方が良かったり、別の方法が推奨されているケースも存在します。 そこで今回はstro...
リストの作成
<ul>：箇条書きリストを表すタグ<ol>：番号付きリストを表すタグ<li>：リスト項目を表すタグで、<ul>や<ol>の中に記述する
表の作成
<table>：表を作成するタグ<tr>：表の行を表すタグ<td>：表のセルを表すタグ
WordPressは、投稿エディタでテーブル（table）が直感的に作成できます。 WordPressは直感的にテーブルが作成できる。 ただ、標準的なテーブルは作成できますが、例外的なテーブルの作成には向いていません。 見やすくて綺麗なテーブルにしようと思うと、どうしてもHTM...
HTMLとCSSの関係
HTMLとCSSは、Webページを作成する上で非常に重要な役割を果たす2つの言語です。
それぞれ異なる役割を持ちますが、連携することでキレイなWebページを作成することができます。
- HTMLの役割：Webページの構造を作る
- CSSの役割：Webページの見た目をデザインする
HTMLは、見出し、段落、リスト、画像、リンクなどの要素を配置し、Webページの骨組みを構築します。
一方で、CSSは、HTMLで作成された要素のフォント、色、サイズ、配置などを指定し、Webページの外観をデザインします。
つまり、HTMLで作った建物に、CSSで装飾を施すようなイメージです。
HTMLとCSSを分離することで、コンテンツとデザインをそれぞれ独立して管理できるようになります。
デザインを変更したい場合、CSSのみを修正すればよく、HTML全体を書き換える必要がありません。
複数のページで共通のデザインを適用したい場合、CSSを一括で変更するだけで、すべてのページのデザインを更新できます。
HTMLの書き方
HTMLのコードを書いて、ブラウザに表示させるには、以下の手順で行います。
- エディタを準備する
- エディタでHTMLコードを入力してファイルを保存
- HTMLファイルをブラウザで表示させる
以下、一つずつ解説していきます。
エディタの準備
HTMLのコードを書くには、「テキストエディタ」または「HTMLエディタ」を使います。
- テキストエディタ：文字を入力するためのシンプルなエディタ
- HTMLエディタ：HTMLを中心としたWeb開発に特化したエディタ
テキストエディタは、文章作成やメモをするためのエディタで、プログラミングコードも編集できます。
Windowのメモ帳もテキストエディタであり、HTMLコードを編集することができます。
HTMLエディタは、主にHTMLコードの編集に特化したエディタですが、他のプログラミング言語も編集できるエディタもあります。
タグの自動補完やエラーチェック機能など、プログラミングをする上で便利な機能が付いています。
また、エディタにはPCにインストールして編集するエディタと、ブラウザからオンライン上で編集できるエディタがあります。
主な無料のエディタ
| 名称 | 対応OS・ブラウザ | 特徴 |
|---|---|---|
| Visual Studio Code | Windows、macOS、Linux | ・Microsoftが開発 ・軽量、高速、高機能・多機能 ・多数のプログラミング言語に対応 |
| Visual Studio Code for Web | Chrome、Safari、Edge、 Firefox |
・インストール不要 ・ブラウザから編集できる ・Visual Studio Codeと同様の機能 |
| サクラエディタ | Windows | ・日本語環境向け ・高機能な検索・置換機能 ・プラグインによる拡張機能あり |
| TeraPad | Windows | ・日本語環境向け ・シンプル、軽量で使いやすい ・文字コード自動認識機能 |
| Text | Chrome OS | ・Chrome OSのみ利用可 ・Google Driveに保存できる ・軽量で起動が速い |
| mi | macOS | ・Mac専用エディタ ・日本人開発 ・起動が早く、非常に高速 |
エディタによって利用できるOSやブラウザが違いますので、対応しているエディタをご利用ください。
HTMLエディタは無料でも十分ホームページ作成に使えます。一般的にプロが使用している「Adobe Dreamweaver（ドリームウィーバー）」は本格的にWebデザイナーやHTMLコーダーとして働く段階になってからでも十分でしょう。
コードの作成と保存
エディタを用意したら、HTMLコードを作成して保存します。はじめに、エディタを立ち上げて、必要なHTMLコードを入力します。
注意点としては、<p>などの開始タグと、</p>などの終了タグを正しくペアにして記述してください。また、必須ではありませんが、必要に応じて要素ごとに字下げ（インデント）して見やすくします。
その後、エディタ内にある「名前を付けて保存」など、ファイルを保存する項目を選択してください。
ファイルを保存する際は「sample.html」など、必ず末尾にある拡張子を「.html」と変換した上で保存してください。テキストエディタで保存しようとする場合、末尾の拡張子が「.txt」と表示される場合が多いのでご注意ください。
ブラウザで表示する方法
HTMLファイルをブラウザで表示したい場合は、作成したHTMLファイル上で右クリックをし、「表示」などブラウザで表示させるための項目を押します。
Windowsの場合は、HTMLファイルを右クリックしたら「プログラムから選ぶ」を選択し、表示させたいブラウザを選択します。
すると、ブラウザにこのHTMLファイルの内容が表示されます。
今回は簡単なHTMLしか入力しておらず、簡素なWebページになっています。
実際は、ここに別の要素を入れたり、別途CSSファイルを作成して、Webページのデザインを整えます。
この時点では、インターネット上に公開されているわけではありません。
インターネット上に公開するには、Webページを保存・公開するためのサーバーにアップロードする必要があります。
自分でサーバーを構築するのは知識が技術がいるので、レンタルサーバーを契約するのが一般的です。
HTMLとWordPressはどちらが良い？
HTMLを学んでWebサイトを作成するのと、WordPressでWebサイトを作成するのは、どちらが良いのでしょうか？
WordPressとは、世界中で利用されているサイト作成ツールで、HTMLやCSSの知識がなくても直感的な操作でWebサイトを作成できます。
豊富なデザインテンプレートやプラグイン（拡張機能）を追加でき、記事の追加や修正も簡単に行えます。
一方で、HTMLでWebサイトを作成する場合、デザインや機能を自由に設計できますが、学習コストや制作コスト（時間）がかかります。デザインや機能の実装に時間がかかり、自身でコードを修正する必要があるため、更新や修正に手間がかかります。
そのため、一般企業のホームページやブログはWordPressが使われています。WordPressで簡単にWebサイトを作りたい方は、WordPressテーマ（デザインテンプレート）を使うのがおすすめです。
企業サイトから個人ブログまで、多様なWordPressテーマが用意していますので、チェックしてみてください。
>> WordPressテーマ一覧 | ワードプレステーマTCD
まとめ
本稿では、HTMLの基礎知識と基本構造について解説しました。
これから、CSSやその他のプログラミング言語を学ぶことで、より高度なWebサイトを作成できるようになります。
本稿を参考に、ぜひあなたもオリジナルのWebサイトを作ってみてください。
「ホームページを作りたいけど、どうすればいいかわからない・・・」 この記事では、ホームページを初めて作る初心者向けに、ホームページ作成の方法を以下の5ステップを解説しています。 ホームページのコンセプト決定 ドメイン取得とサーバー契約 CMSのインストール デザイン...
コメント