ここでは、*HTML・CSSの基礎知識をまとめました*。**HTMLとCSSの違い**などについてまとめています。HTMLやCSSという言葉を初めて聞いた方は、まずはこちらから読み進めてください。

HTMLとは、*Webページを作成するための言語のこと*です。タグを使ってWebページの書式を表します。たとえば、表・画像・リンクなどのWebページに必要な部品を配置することが可能です。HTMLで書かれたソースコードをブラウザに読み込ませることで、**ブラウザがHTMLをWebページに変換して表示**してくれます。

CSSとは、主に*Webページのデザインを変更するための言語*です。CSSを使うことでWebページの文章の色を変更する、などの調整ができます。

HTMLだけでもデザインの調整は一応可能です。CSSがない頃はHTMLだけで全て行っていました。ただHTMLで全て行うと、ソースコードが長くなり、読みにくくなってしまいます。読みにくくなると、後でWebページを修正したいときに、かなりの労力がかかってしまいます。

そこで、**デザイン調整はCSSで行うようになりました**。デザイン関連の記述をCSSに移すことで、HTMLのソースコードが見やすくなります。今ではWeb制作をする際は、必ずと言って良いほどCSSが使われています。

CSSはHTMLに埋め込みで使うことも可能で、ただソースコードの可読性を上げるために別ファイルに記述することが多いです。

「HTML・CSSは難しい？」と気になる方もいるでしょう。*HTMLやCSSはそこまで難しくはありません*。少なくとも、PHPやJavaScriptに比べたらずっと簡単です。基本的な構造はシンプルですが、覚えることが少し多いので、きちんと学習時間を取る必要はあるでしょう。

続いて、*HTML・CSSの使い方を紹介*します。HTMLとCSSを使ってWebサイトをどのようにデサインするのか、手順をまとめました。HTMLとCSSのファイルの作り方やブラウザに表示する方法などが分からない方は、こちらを参考にしてください。

まずは、*HTML・CSSでWebサイトを作る際に必要なものを準備*します。HTML・CSSのソースコードを記述するために、テキストエディタが必要です。テキストエディタは普段使っているもので問題ありません。テキストエディタをインストールしていない方は、**メモ帳でも可能**です。

続いて、HTML・CSSの表示結果を確認するために、Webブラウザが必要です。Webブラウザも特に種類は関係なく、パソコンに最初から入っているもので大丈夫です。

以上の2つがあれば、Webサイトを作成することはできます。ただし、*作成したWebサイトをネット上に公開するためには、Webサーバーが必要*です。Webサーバーは自分で立てたり、レンタルしたりしないといけません。今回は自分のパソコンでWebサイトを確認するまでを解説するので、Webサイトの公開方法は割愛します。

次に、*HTMLの雛形を作ります*。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザが正しくHTMLのソースコードを読み込むことができません。テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。

~~~ 
<html> 
<head>
</head>
<body> 
</body>
</html>
~~~

雛形を記述したら、HTMLファイルを保存します。*ファイル名は「test.html」としましょう。*ファイルの拡張子を「html」にすることで、htmlファイルとして識別されます。

HTMLは、*html要素・head要素・body要素*、この3つが軸となっています。この3つのタグをまず記述しておきましょう。「html」は、この文書がHTMLの文書であることを示すタグです。このタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述していきます。

続いて、*Webページに表示する文章を記述*します。先程解説したように、Webページに表示する文章は、bodyタグの中に記述していきます。**bodyタグの中に、以下のように「Hello World」と記述**してください。

~~~ 
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
~~~

こうすることで、Webページに「Hello World」と表示させることが可能です。

本当に「Hello World」と表示されているか、確認を行いましょう。確認を行うためには、*ブラウザで作成したHTMLファイルを開く*必要があります。HTMLファイルを開くときは、**ファイル一覧から「test.html」をダブルクリック**します。これで、ブラウザが起動し、「test.html」を開いてくれます。「test.html」を開いたら、「Hello World」と表示されている筈です。これでひとまずHTMLファイルの作成・確認は完了しました。

続いて、*CSSファイルを作成*します。CSSファイルを作成する前に、HTMLにCSSを読み込ませるように設定しないといけません。CSSを読み込ませるには、**headタグにCSSのファイル名を指定**します。次のように記述してください。

~~~ 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
Hello World
</body>
</html>
~~~

linkタグは関連する文書を指定するためのものです。ここでは「test.css」を関連ファイルとして指定しています。このように記述することで、HTMLにCSSを読み込ませることが可能です。

最後に、*CSSファイルを作成*しましょう。テキストエディタを開き、以下のように記述してください。

記述したらファイルを保存します。ファイル名は「test.css」にしてください。先程同様、「test.html」を開いて確認しましょう。「Hello World」という文字が太字になっています。これはCSSファイルによって、Webページ上の文字を太字に変更したからです。

CSSは**「セレクタ{プロパティ:値;}」というように記述するのが基本**です。セレクタに「何を変更するのか」を記述します。上記の場合、「bodyタグ」を変更するようにしています。つまりbodyタグの中に書かれた文章全てを対象に変更しているのです。そしてプロパティと値に「どのように変更するのか」を記述します。上記の場合、文章を太字に変更しています。

これがCSSの書き方の基本になります。

最後に、*HTML・CSSの独学方法について解説*します。HTML・CSSはそこまで難しいものではありません。プログラミングスクールで学ぶ手もありますが、**HTML・CSSなら独学でも十分習得は可能**でしょう。おすすめのHTMl・CSS独学方法について解説していきます。

HTML・CSSは書籍が多く販売されています。書籍を購入することで、*HTML・CSSを体系的に身につけることが可能*です。書籍は内容が整理されており、イラストなども追加されています。文章を読むのが苦手な方でも分かりやすいように書かれているものもあります。

ただし注意点として、**書籍はなるべく最新のものを選びましょう**。古い書籍ですと、HTMLやCSSのバージョンが昔のままになっている場合があります。HTML・CSSはバージョンによって書き方が異なる場合があり、古いバージョンの書き方を学ぶと、混乱する恐れがあるでしょう。書籍の出版日は確認した方が良いです。

もう1つの方法は、学習サイトを使うことです。Progateやドットインストールなどには、*HTML・CSSの教材*があります。**学習サイトは月額1,000円程度で活用できるため、かなりコスパに優れています**。Progateはスライドで、ドットインストールは動画でHTML・CSSを学ぶことが可能です。どちらか自分にとって分かりやすい方を選択して、勉強していくのが良いでしょう。

## HTML・CSSはWeb系エンジニアやWebデザイナーを目指すなら必須！ぜひ習得しよう！

本記事では*HTML・CSSについてまとめました*。HTML・CSSとは何か、お分かり頂けたかと思います。HTMLやCSSはWebサイトをデザインする上で必ず使うものです。**Web系エンジニアやWebデザイナーを目指すなら、HTML・CSSはまず習得しましょう**。その上で、JavaScriptやPHPなどプログラミング言語も習得できると、より仕事の幅が広がるでしょう。本記事がHTML・CSSについて知りたい方にとって、有意義なものとなれば幸いです。

本記事では、HTML・CSSとは何かについて解説します。HTML・CSSはWebサイト制作において、必ず使われるものです。今回は、HTML・CSSの使い方や勉強方法についてまとめました。HTML・CSSに興味がある方はぜひお読みください。

HTMLとはWebページを作成するための言語

CSSとは主にWebページのデザインを変更するための言語

Web系エンジニアやWebデザイナーを目指すなら、HTML・CSSはまず習得すべき

HTML・CSSとは何か？使い方やできること、独学方法を解説！

HTMLとは「Hyper Text Markup Language」の略称であり、Webサイトの構造を定義するためのマークアップ言語です。HTMLではタグを使用してWebサイトの構造を作成することができます。その中でもdivタグはよく使用されるタグの1つです。ここでは、divタグの概要や書き方について詳しく紹介します。

divとは「division」の略称であり、読み方は一般的に「ディブ」もしくは「ディヴ」です。**divタグ単体では意味を持ちませんが、divで囲む部分をブロック要素としてまとめて扱えるのが特徴です。**align属性を使用して水平方向の配置を指定したり、スタイルシートを適用したりなどブロック化すればまとめて行うことができます。

**divタグを使用するときは一般的に```<div>テキスト</div>```と記載します。
**またdivタグにid属性やclass属性を追加し、```<div id="id名">テキスト</div>``` ```<div class="class名">テキスト</div>```と記載することも多いです。*id属性やclasの属性を付ければ、スタイルシートで装飾しやすくなるという特徴があります。*

なおidとclassの違いについてですが、*id属性は同じWebページ内でid名が重複してはいけないという決まりがあります。*一方*class属性は、同じWebページ内でclass名が重複しても問題ありません。*そのため同じ装飾を指定したいときに、class属性は使用されます。また1度しか使用しない場合でもclass属性を用いることは可能です。

divタグと同様でspanタグも単体では意味を持ちません。**divタグとspanタグの違いは、ブロックレベル要素かインライン要素かです。**divタグはブロックレベル要素の1つで、spanタグはインライン要素の1つです。
ここではdivタグの知識を深めるためにも、ブロックレベル要素とインライン要素の違いについて詳しく紹介します。また配置のルールについても解説します。

**ブロックレベル要素はテキストを構成する基本となる要素であり、1つのまとまりとして認識されるのが特徴です。ブロックレベル要素では余白や縦横のサイズなどを自由に定義できます。**しかし、ブロックレベル要素の前後には自動で改行が入ることもあるため注意が必要です。ブロックレベル要素の例として、pタグ・h1～h6タグ・tableタグ・divタグなどが挙げられます。

**インライン要素は、主にブロックレベル要素の中で使用される要素であり、文章の一部として扱われるのが特徴です。**そのためインライン要素の前後には改行は入りません。例えば、pタグの中でstrongタグを使用すれば、段落の中の一部を強調することができます。 インライン要素の例としてaタグ・bタグ・iタグ・imgタグ・strongタグ・uタグ・spanタグなどが挙げられます。

**ブロックレベル要素の中に、他のブロックレベル要素やインライン要素を配置することは可能です。 しかし、インライン要素の中にブロックレベル要素を配置することはできません。**ただし*インライン要素の中に、文字データや他のインライン要素を配置することはできます。*インライン要素は行の一部として扱われます。そのためspanタグのようなインライン要素では、一般的に「width」「height」というプロパティを使用してサイズの調整ができません。

ただし例外もあるため、spanタグを使用するときには、公式リファレンスなどを参照して確認しましょう。

## divタグを使用する目的・使い方

divタグはブロックレベル要素で、余白の調整やサイズの変更が自由にできることは理解できたでしょうか。ここでは、divタグを使用する目的・使い方について詳しく紹介します。

Webサイトを制作する場合、HTMLのソースコードが膨大になることもあります。そうすると、可読性やメンテナンス性が低下してしまいます。**そのためページ全体を区分して構成や構造をまとめる必要があり、そこでdivタグが使用されます。**

Webサイトのレイアウトに合わせてdivタグを配置するのが一般的で、必要に応じてdivタグを入れ子構造にして使用することも多いです。*ページ全体を構造化すれば、HTMLのソースコードを確認するのみでレイアウトを把握することができます。*また*Webサイトを修正する際に、比較的簡単に変更が可能です。*

**divタグは主にデザインの指定を行うときに利用されます。**デザインの装飾はHTMLではなく、CSSという言語を使用して指定します。CSSでは各タグに対して文字の色・サイズ・配置などを指定可能です。ここでdivタグを対象に装飾を行うと、ページに存在するdivタグ全てのデザインが変更されてしまいます。そのため*divタグに対してid属性やclass属性を付けるのが大切です。*

## divタグを他のタグで代用する

divタグはデザインを行う上で便利な要素のため、使いすぎてしまうことがあります。divタグを多用するとデメリットもあります。そのため**divタグの代わりに、構造の意味付けをするタグに置き換えることも重要です。**ここではdivタグを多用するとどうなるのかや、代用する際におすすめのタグについて詳しく紹介します。

### divタグ使いすぎるとどうなるか

divタグを多用するデメリットとして、**Webブラウザのが各要素を特定する際に時間がかかり、Webサイトの読み込み速度の低下をもたらすことが挙げられます。**またid属性やclass属性を使用して、要素の特定をしやすくすることもできますが、その場合*スタイルシートによる装飾が煩雑になってしまう可能性があります。*そのためdivタグだけではなく、ulタグやliタグを使用して簡素化することも大切です。

**headerタグは一般的に、イントロダクションやナビゲーショングループを指定するときに使用します。** なお*ヘッダー情報を記述するheadタグとは異なるため注意が必要です。*headerタグの中には見出しを含めることが予想されますが、必須というわけではありません。またセクションの目次・ロゴ・検索フォームを配置するために、headerタグを使用することもできます。

**footerタグは一般的に、直近のセクションのフッターを指定するときに使用します。**フッターとは、そのセクションに関する情報を指し、基本的に誰が記載したのか・関連文献へのリンク・著作権などの情報が含まれていることが多いです。フッターはセクションの最後に指定することが多いですが、必須というわけではありません。 

**mainタグは一般的に、ページのメインコンテンツを指定するときに使用します。mainタグは1つのページに複数指定することはできません。**そのため重要なコンテンツにmainタグを使用するのが大切です。

**navタグは一般的に、ナビゲーションを指定するときに使用します。**なおナビゲーションとは、Webサイトの中における他ページへのリンクや、ページ内リンクなどのことです。他ページにリンクする箇所の全てをnavタグで囲む必要はありません。主要となるナビゲーションのセクションだけを指定したいときに、navタグを使用するのがおすすめです。またWebサイトの下部に、利用規約・著作権・トップページに戻る、などのリンクが配置されていることも多いですが、 このような場合は*navタグではなくfooterタグで十分と言えます。*

**articleタグは一般的に、単体で内容が完結するセクションを指定するとき使用します。**例えば、フォーラムでの投稿・雑誌や新聞の記事・コメントなどが挙げられます。

**asideタグは一般的に、補足的な情報を指定するときに使用します。**なお補足的情報とは、本文と関連しいるが、区別すべき内容のことです。例えば、広告エリアやサイドバーなどに使用されることが多いです。

**sectionタグは一般的に、章や区切りを指定するときに使用します。**例えばページ内にサービス内容・使い方・よくある質問・連絡先というセクションを指定したい場合には、それぞれをsectionタグで囲みます。

## HTMLのdivタグを上手く活用してWeb制作を行おう！

これまでに、HTMLのdivタグの概要・書き方・目的・使い方やブロックレベル要素とインライン要素の違い、divタグを代用できる他のタグ要素について解説しました。**divタグ（div要素）は単体では意味を持ちませんが、divで囲む部分をブロック要素としてまとめて扱えるのが特徴です。**また、divタグはブロックレベル要素の1つです。

*divタグはべージ全体を構造化させたり、デザインを指定したりする際に役立ちます。*またデザインを指定するときには、一般的にid属性やclass属性が必要です。*divタグを使いすぎると、Webサイトの読み込み速度の低下を招くこともあるため注意が必要です。*divタグではなく、他のタグで代用できることもあるため、上手くdivタグを活用してWeb制作を行いましょう。

divタグ（div要素）は単体では意味を持ちませんが、ブロック要素としてまとめて扱えるのが特徴です。当記事では、HTMLのdivタグの概要・書き方・目的・使い方やブロックレベル要素とインライン要素の違い、divタグを代用できる他のタグ要素について解説します。

divタグ単体では意味を持たないが、divで囲む部分をまとめて扱うことができる

divタグはブロックレベル要素であり、spanタグはインライン要素

divタグはべージ全体を構造化させたり、デザインを指定したりする際に役立つ

HTMLのdivタグとは？読み方・目的・使い方などを解説！ 

**HTMLとは「Hyper Text Markup Language」の略称であり、Webサイトを作成するために開発されたマークアップ言語です。**HTMLでWebサイトの本文部分などの構造を作成し、CSSやJavaScriptといった言語でWebサイトを装飾するのが一般的です。ここでは、HTMLの詳細やHTMLタグの使い方について初心者向けに紹介します。

**HTMLはWebサイトの構造を定義するためのマークアップ言語です。さらにCSSを使用すれば、Webサイトを装飾できます。**HTMLでWebサイトの装飾ができないということはありませんが、HTMLとCSSで用途を分けることで分業がしやすくなり、開発効率の向上が期待できます。Webサイトのメンテナンス性も向上したり、JavaScriptというプログラミング言語を使用すれば、Webサイトに動的な要素を追加したりすることが可能です。

HTMLそのものはテキストデータであるため、テキストエディタなどを使用して記述したテキストに拡張子「.html」を付ければ、一般的にWebブラウザでページの構造を確認できます。例えばメモ帳でも簡単にコーディング可能です。

また*HTMLを記述する場合には、タグ付けを行う必要があります。*例えば装飾を行いたい本文や画像などには、1つひとつタグ付けを行わなければなりません。

**HTMLではコンピュータに文書の意味を理解させるために、タグ付けを行う必要があります。**HTMLタグは検索エンジンが作成したWebサイトを認識するための要素の1つであり、検索エンジン最適化にもつながるでしょう。検索エンジン最適化への対策をすれば、検索結果の上位にWebサイトが表示されやすくなり、数多くのユーザーに自分のサイトを見てもらえる可能性は高まります。

また、タグ付けにはルールがあります。タグとは「<>」で囲った文字列を指し、*一般的なタグの記載方法は「<タグ名>テキスト</タグ名>」です。*なお最初の「<タグ名>」は開始タグと呼び、最後の「</タグ名>」は終了タグと呼びます。開始タグと終了タグでテキストを挟めばタグの作成が可能で、終了タグが必要ないタグ要素もあります。

開始タグの中には、必要に応じて「<タグ名 属性="属性値">テキスト</タグ名>」のように属性を記載できます。**属性を記載すれば、HTMLの要素に対して性質を与えることが可能です。**例えばimgタグを使用する場合、src属性を使用すれば、簡単に画像のパスを指定することができます。

またtitle属性を使用すれば、画像のタイトルを指定することが可能です。さらにalt属性を使用すれば、画像の代替のテキストを入力でき、検索エンジンが画像の中身を理解する際などに利用されます。他にも属性を記述すれば、様々なことができるようになります。

HTMLやHTMLタグの概要については理解できたでしょうか。ここでは、一般的なWebサイトの構成について初心者向けに紹介します。

**HTML文書を書き始める際に、まずはDOCTYPE宣言を記述します。DOCTYPE宣言は「HTML文書を記述する」という宣言文を意味します。**DOCTYPE宣言部分を修正すれば、使用するHTMLのバージョンを変更することができます。例えば、HTML5では「<!DOCTYPE html>」と簡単に記述可能です。大文字と小文字は区別されません。

*HTML5以前のDOCTYPE宣言の書き方は、HTM5とは異なるため、使用したい方は公式リファレンスなどを参照しましょう。*そして記述したテキストファイルは、拡張子を「.html」にしてHTMLファイルにしましょう。

**DOCTYPE宣言が指定できたら言語を指定しましょう。```<html lang="言語名">```の言語名の部分に使用したい言語を記述すれば、言語の指定が可能です。**例えば言語名に「ja」を入力すれば、日本語のWebサイトにすることができます。また「en」を入力すれば、英語のWebサイトにすることが可能です。

**言語の指定ができたらhead要素に、metaタグ・linkタグ・titleタグなどを記述しましょう。**head要素には、一般的にコンピュータが認識するデータを記述します。

```<meta charset="文字コード">```*の文字コードの部分に、使用したい文字コードを記述すれば、文字コードの指定ができます。*一般的に「UTF-8」を使用することが多いです。他には「Shift_JIS」「EUC-JP」などがあります。

```<meta name="description" content="要約">```*に、記事本文の要約を記述すれば、要約の指定が可能です。*指定した要約は検索結果に表示されるため、文字数などユーザーに配慮して記述するのが大切と言えます。

**linkタグを使用すれば、自身のファイルと別のファイルを関連付けることが可能です。**例えばCSSファイルと関連付けるときには```<link rel="stylesheet" href="style.css">```などと記載します。なお「style.css」はCSSファイルの名称になるため、「style」という部分はファイル名に合わせて自由に変更可能です。また、linkタグとaタグは異なるため注意する必要があります。

```<title>タイトル名</title>```*のタイトル名の部分に、使用したいタイトル名を記述すれば、タイトルの指定が可能です。*ここで記述したタイトル名は、Webサイトを開いたときのタブに表示されます。タイトルは検索エンジン最適化において重要な要素の1つになるため、必ず記述しましょう。

**head要素が記述できたら、body要素にコンテンツの中身を記載しましょう。bodyタグの中に記述された本文や画像は、Webブラウザの画面上に表示されます。**bodyタグには色を指定する属性がいくつかありますが、いずれも非推奨とされているため、色を指定したいときにはスタイルシートを使用しましょう。

一般的なHTMLファイルで記述する内容については理解できたでしょうか。ここでは、HTMLタグ一覧ということで、よく使用されるHTMLタグについて初心者向けに紹介します。

**一般的に見出しにはhタグを使用します。hタグには「h1」から「h6」までの6種類があります。**見出しを付けることで、文章の構成が理解しやすくなるというメリットがあります。例えばWordPressで見出しタグを使用すれば、プラグインを入れて自動で目次を生成させることも可能です。また、検索エンジン最適化への対策にもつながります。

**aタグとはリンク先を指定するHTMLタグです。**これまでにも説明しましたが、linkタグとaタグは異なるため注意が必要です。また*リンク先を指定するhref属性、リンクを開く方法を指定するtarget属性など様々な属性があります。*例えば```<a href="リンク先">こちらへ</a>```と記述すると、「こちらへ」をクリックすればリンク先へ飛ぶことができるようになります。

### 画像を挿入するタグ（imgタグ）

**画像を挿入するには、imgタグを使用しましょう。imgタグには終了タグは必要ありません。**表示する画像ファイルは、src属性で指定できます。またwidth属性やheight属性を付ければ、画像の縦横のサイズを変更することが可能です。さらにalt属性を付ければ、画像が出力されなかったときの代わりに表示させるテキストを指定することができます。例えば```<img src="サンプル.png" width="100" height="100" alt="サンプル">```と記述すれば、「サンプル.png」という画像を縦100px、横100pxで表示させることが可能です。また画像が出力されなかったら、「サンプル」というテキストが表示されます。

**文章を明示的に改行したいときには、brタグ使用しましょう。brタグには終了タグは必要ありません。**brタグは一般的に余白を作りたいときに使用されますが、*スタイルシートを使用する方がおすすめです。*brタグでデザインを作成したとしても、ユーザーの閲覧する環境によって行間が変わってしまうことは少なくありません。また文字サイズによって改行の位置が変わり、本文が読みづらくなってしまうこともあるため、brタグの使い方には注意が必要です。

## HTMLタグの使い方をマスターして効率よくWebサイトを作成しよう！

これまでに、HTMLやHTMLタグの概要・Webサイトの構成・HTMLタグ一覧について初心者向けに解説しました。**HTMLはWebサイトの構造を定義するためのマークアップ言語です。**CSSやJavaScriptといった言語を使用すれば、Webサイトに装飾を加えることができます。

さらに*HTMLタグを使用してWebサイトの構造を作成することが可能です。DOCTYPE宣言・言語の指定・head要素・body要素などのWeb制作における一般的な部分はきちんと押さえておきましょう。*またHTMLタグには様々なものがあります。この記事ではよく使用されるタグを紹介しましたが、まだまだあらゆるタグがあります。Web制作に興味がある方は書籍・学習サイト・公式リファレンスなどを活用して、HTMLやCSSの言語から勉強を始めてみましょう。

HTMLはWebサイトの構造を定義するためのマークアップ言語です。そしてHTMLタグを使用してWebサイトの構造を作成することができます。当記事ではHTMLやHTMLタグの概要・Webサイトの構成・HTMLタグ一覧について初心者向けに解説します。

HTMLとはWebサイトの構造を定義するためのマークアップ言語

HTMLタグは検索エンジン最適化に対して影響を与える

HTML5であればDOCTYPE宣言が簡単に記述できる

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

HTML5とは、**ハイパーテキスト記述言語（HyperText Markup Language）の5回目の改訂版**を指します。HTMLの仕様は*Web Hypertext Application Technology Working Group（WHATWG）*が策定し、*World Wide Web Consortium（W3C）*で勧告されています。
参考：[WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/)

HTML 5.1以降は*HTML Living Standard*に基づいており、現在最新の仕様はHTML 5.2を勧告後、*HTML Living Standardに統合され仕様統一*されています。
参考：[HTML 5.2 W3C Recommendation](https://www.w3.org/TR/html52/)

HTML5のベースとなっているHTMLは、**ハイパーテキスト記述言語**です。ハイパーテキストとは、複数の文書を*相互参照するためのリンク（ハイパーリンク）機能*を有する仕組みを指します。

ハイパーテキストは*Web（World Wide Web）*を始めとするウェブ系システムで**標準利用**されています。ウェブ系システムで使用するウェブコンテンツはHTMLで記述されており、コンテンツの通信や表示をしたり、直接PCに格納されたHTML文書をブラウザで表示したりすることができます。

HTMLは登場以来*文書（コンテンツ）の構造と見栄え*を指定できました。その後、煩雑な言語仕様を整理するために*文書構造をHTMLが担当*し、*見栄えをCSSが担当*することで**役割を分離**しました。それからHTML4では文書構造を表すために利用されていたものの、ウェブサイトの高機能化により*リッチウェブアプリケーション*のプラットフォームとしてのニーズが強まりました。

リッチウェブアプリケーションでは、*視覚的なリッチコンテンツやマルチメディア機能*が必要とされます。HTML4では十分とは言えないために各ベンダーが独自拡張を進めました。この*バラバラの実装を整理した*ものが**HTML5**です。HTML5は検索エンジン向けのタグが用意され、利便性が向上しました。

さらに、*ビデオやオーディオの再生*や*オフライン表示*のAPI等が追加されており、アプリケーションプラットフォームとしての機能追加が特徴です。

### Flashとの関係は？2020年末Flash終了の影響は？

Adobe Flashは、長らく*Macromedia Flash*として*リッチコンテンツのプラグイン*として活用されていました。FlashはHTMLで用いるプラグインで動画やゲームで利用されていました。しかしながら**脆弱性**が多数発見され、*ブラウザがクラッシュする*ことが多かったのが実態です。

上記理由から、Apple社の当時のCEO*スティーブ・ジョブズ*氏はFlashを使用せずに**HTML5を強力に推進**しました。このためAdobe社はFlash継続をあきらめ、*2020年末にFlash Playerの開発と配布を終了*しました。ブラウザ提供各社は2015年から2016年にFlashのブロックを開始しており、*2020年末のFlash終了への影響*は**ほとんどありません**でした。

HTML5 プレイヤーとは、*Flash Playerで提供していた動画再生機能*を**HTML5に置き換えたもの**です。HTML5ではプラグインなしで動画やアニメーションを再生できます。そのため、HTML5 プレイヤーとは*\<video\>要素*を用いて動画再生機能を実装したものを指します。

HTML5 プレイヤーの実装例は、*YouTube*が有名です。YouTubeでは2015年からHTML5 プレイヤーをデフォルトの動画プレイヤーとしています。その他にも、JavaScriptのライブラリーとして提供する*Video.js*も数多く利用されています。
参考：[Video.js](https://videojs.com/)

HTML5 ゲームとは、主に*モバイル向けゲーム*で用いる用語です。従来のスマホアプリは*App StoreやGoogle Play*にアプリを登録し、Apple社やGoogle社のコントロールの下、アプリ配信を行っていました。主にアプリはゲームエンジンやライブラリ等を用いて開発する*ネイティブアプリ*となります。理由は当時のスマホの性能が追いつかなかったためです。

近年**スマホの性能向上が著しい**ために、ネイティブアプリではなく*HTML5を用いてゲームを提供する*ことが増えています。理由は性能向上の他にも、Apple社やGoogle社のコントロールを受けないで配信や課金をしたいことが背景にあります。そのため*HTML5 ゲーム市場*は**今後の成長が見込まれる**領域となります。

HTML5の最初の企画となるHTML 5.0は2008年にドラフトが公開され、2014年に勧告されました。*2014年から2015年に*かけて**HTML5対応ブラウザが整備**されています。そのため代表的なブラウザである*Edge・Firefox・Chrome・Operaは問題なく動作*しますし、そのほかのブラウザも順次対応機能が実装されています。

ブラウザの対応状況を確認するには、*Can I use*や*HTML5TEST*等でHTML5の実装状況やお使いのブラウザの機能適合が確認できます。さらに、*YouTube*でも対応ブラウザかどうかを表示してくれます。
参考：[Can I use](https://caniuse.com/)
参考：[HTML5TEST](https://html5test.com/index.html)
参考：[YouTube サポートブラウザ](https://www.youtube.com/supported_browsers)

*HTML5の開発*はマークアップ言語に沿ったコンテンツを*テキスト形式*として作成します。したがって、**テキスト文書を作成する環境**があればすぐにでも開始できます。具体的には、テキスト編集するための*エディタ*、およびHTML5を表示する*ブラウザ*の準備ができれば問題ありません。

なおHTML5に対応する*統合開発環境（IDE）*があるとさらに簡単に開発を行うことができます。具体的にはMicrosoft社の*Visual Studio*、オープンソースソフトウェアの*NetbeansやEclipse*の利用者が多いです。いずれも日本語に対応しています。
参考：[Microsoft Visual Studio](https://visualstudio.microsoft.com/ja/)
参考：[Apache NetBeans](https://netbeans.apache.org)
参考：[Netbeans 日本語化](https://github.com/junichi11/netbeans-translations-ja/releases)
参考：[ECLIPSE](https://www.eclipse.org/)
参考：[Pleiades All in One Eclipse日本語化](https://mergedoc.osdn.jp/)

*HTML5*はブラウザ機能とテキストエディタを用いるため特に**追加インストールは必要ありません**。もし*統合開発環境（IDE）*を使用する場合はそれぞれ*ダウンロード・インストール*を行い利用していきます。

*動画編集ソフト*によっては、*ブラウザの拡張機能*を使用するためにインストールが求められる場合がありますが、通常は必要としません。

### HTML4からHTML5への変更点は？

*HTML5*は*HTML4と後方互換性を維持しながら*、**機能改善が図られています**。以下に代表的な変更点を記載しておきます。

・*文字エンコーディング*
従来の指定に加えて、以下のシンプルな指定が可能となり使いやすくなりました。
HTML4：\<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"\> 
HTML5：\<meta charset="UTF-8"\>
・*DOCTYPE*
こちらも従来の記述をシンプル化し、\<!DOCTYPE html\>と簡略化されました。
・*言語要素*
section、article、aside、hgroup、header、footer、nav、figure、の要素が追加されました。従来div要素で行っていた文書構造がより分かりやすく整理されました。
・*マルチメディアコンテンツ用言語要素*
audio、videoの要素が追加されました。ともにAPIが提供されており独自のインターフェイスを開発可能です。その他グラフィックス用canvas要素や、ダウンロード管理用progress要素等が追加されました。

上記のほかにも追加された要素や変更された要素があります。詳細はW3Cのドキュメントで定義されています。
参考：[W3C HTML5 Differences from HTML4](https://www.w3.org/TR/html5-diff/)
参考：[W3C HTML5 における HTML4 からの変更点](https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/)

冒頭で記述した通り、*HTMLの仕様*は*Web Hypertext Application Technology Working Group（WHATWG）*が策定し、*World Wide Web Consortium（W3C）*で勧告されています。HTML 5.1以降は*HTML Living Standard*に基づいており、現在最新の仕様は、HTML 5.2まで勧告されています。

この標準化の過程の中で、HTML5を*W3Cがしっかり仕様策定する*流れと、*機能拡張を順次実施したいWHATWG*で**仕様の差異**が生じてしまいました。そのため、ウェブブラウザ開発ベンダにより立ち上げられたWHATWGの*HTML Living Standard*が**HTMLの標準規格として存続する**ことになりました。

現在、2021年1月にWHATWGの*HTML Living StandardがW3Cによって勧告されて*おり、ダブルスタンダードが廃止されたことで**統一化**がなされました。HTML Living Standardの仕様ドキュメントを見ると*HTML Living Standardは一言で言うとHTML5である*、と説明しています。

## HTML5を理解して多様なウェブアプリケーションに活用しましょう

*HTML5*は*文書構文がシンプル化*され、*リッチコンテンツや動画配信等広範囲に活用*されています。特にスマホの動画再生やすきま時間のゲームや学習コンテンツは市場拡大が続いています。このためHTML5を理解したら*多様なウェブアプリケーションに活用*し、**スキルアップを図る**ことをおすすめします。

HTML5とはハイパーテキスト記述言語の5回目の改訂版を指します。Flashの終了に伴いHTML5で動画やアニメーションへの用途が拡大しています。ここでは、HTML5の特徴やHTML4からの変更点、さらに関連用語や対応ブラウザ等多岐にわかり解説していきます。

HTML5とはHTMLの5回目の改訂版を指し、マルチメディアやリッチコンテンツに対応します

HTML5は、現在HTML Living Standardにおいて仕様化と機能拡張を行っています

HTML5では構文の簡略化がされており、多用途に活用が期待されています

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

*HTML*は、*ハイパーテキスト記述言語*（HyperText Markup Language）です。*ハイパーテキスト*とは、複数の文書を相互参照するための*リンク（ハイパーリンク）機能を有する仕組み*を指します。*ハイパーテキスト*はWeb（World Wide Web）を始めとするウェブ系システムで**標準利用**されています。

*ウェブコンテンツ*は*HTML*で記述されており、*HTTP通信プロトコル*を用いて、ウェブサーバーとウェブクライアント間でコンテンツの通信を行います。また、直接*PCに格納されたHTML文書*をブラウザで表示することも可能です。

*HTMLの仕様*は*Web Hypertext Application Technology Working Group*（WHATWG）が策定し、*World Wide Web Consortium*（W3C）で勧告されています。現在最新の仕様は、**HTML 5.2**まで勧告されています。
参考：[WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/)
参考：[HTML 5.2 W3C Recommendation](https://www.w3.org/TR/html52/)

*HTML*はハイパーテキストを記述する言語ですので、**テキスト文書を作成する環境**があればすぐにでも開始できます。具体的にはHTMLを編集するための*エディタ*、およびHTMLを表示する*ブラウザ*の準備ができれば問題ありません。動作環境は*クライアントPC*で作業できれば十分です。

**HTMLの基本構造**は以下の要素からなります。
・*文書型宣言*
　タグは\<!DOCTYPE html>
　このテキストが最新HTMLであることを表します（他のバージョンを指定することも可能）
・*html要素*
　タグは\<html>\</html>
　head要素とbody要素からなります
・*head要素*
　タグは\<head>\</head>
　文書ヘッダーの明示（ブラウザに表示されない部分）
　meta要素（文書情報）、link要素（他との関連情報）、title要素（タイトル情報）からなります
・*body要素*
　タグは\<body>\</body>
　文書内容の明示（ブラウザに表示される部分）
　article要素からなります（記事であることを明示）

各要素は<要素>として宣言し、</要素>として括ります。

*使用例：*
\<!DOCTYPE html>
\<html>
　\<head>
　　\<title>この文章のタイトル\</title>
　\</head>
　\<body>
　　ここに必要な文書内容を書きます
　\</body>
\</html>

残る作業は必要な体裁を整えたり見栄えを良くしたりする処理を行うだけです。なお\はコメントを表しますので適宜利用します。

### HTMLで使う要素とタグとは？

*HTMLの要素*とは*HTMLの文書を構成する*ものです。*タグ*とはその*要素を認識するための記号（\<>\</>）*を意味します。各要素は開始タグ（\<>）と内容そして終了タグ（\</>）からなります。

さらに要素に属性を追加指定することも可能です。*属性*とは要素で用いる*各種設定を変更*したり、*動作を微調整*したりするものを指します。

これまでにHTMLの基本構造の要素をお話ししました。あとは*必要な要素を組み合わせる*だけで、**HTML文書が簡単に作成できます**。

*HTML文書の体裁を整えるため*に以下の**代表的な要素**が用意されています。

・*段落（ページレイアウト）の構成要素*
　段落（ページレイアウト）の構成要素は、文書を構成する基本要素を指します
　*主要な要素：*
　　p　　段落構成を明示します
　　pre　整形済みテキストとします
　　hr 　 水平線を引きます（終了タグはありません）
　　br 　 明示的な改行を行います（終了タグはありません）
　*使用例：*
　　\<p> \
　　 文章を入力します
　　\<pre>整形済み文章です\</pre>
　　文章を入力します\<br>ここから次の行に改行されます
　　\<hr>
　　\</p> \

・*見出しの構成要素*
　見出しの構成要素は、見出しの種類を宣言します
　*主要な要素：*
　　h1～h6　見出しの指定、h1が最上位となります
　*使用例：*
　　\<p> \
　　\<h1>大見出しです\</h1>
　　\<h2>2番目の見出しです\</h2>
　　中見出しの文章を入力します
　　中見出しの文章を入力します
　　\<h3>3番目の見出しです\</h3>
　　小見出しの文章を入力します
　　小見出しの文章を入力します
　　\</p> \

・*リスト（項目表示）の構成要素*
　リストの構成要素は、リスト化された項目を指定した項目番号あり・なしで表示します
　*主要な要素：*
　　li　　リスト項目を指定します（終了タグは省略可能です）
　　ol 　 順序付きリスト、typeでリスト項目番号（1、A、a、I）を指定できます
　　ul 　 順序なしリスト、typeでリスト項目マーク（disc、circle、sqare）を指定できます
　*使用例：*
　　\<p> \
　　\<h2>リスト表示です\</h2>
　　　\<ul>
　　　　  \<li>リスト項目の1番目です（項目番号なし）\</li>
　　 　　 \<li>リスト項目の2番目です（項目番号なし）\</li>
　　 　　 \<li>リスト項目の3番目です（項目番号なし）\</li>
　　　\</ul>
　　　\<ol>
　　　　  \<li>リスト項目の1番目です（項目番号あり）\</li>
　　　　  \<li>リスト項目の2番目です（項目番号あり）\</li>
　　　　  \<li>リスト項目の3番目です（項目番号あり）\</li>
　　　\</ol>
　　\</p> \

・*表（テーブル）の構成要素*
　表の構成要素は、表形式データ等の情報を表示します
　本構成要素はHTML5で非推奨属性や廃止属性があり、CSSで代替可能です
　*主要な要素：*
　　table　表の構成要素を宣言します
　　tr 　　 表の行を示します
　　th 　　ヘッダのセルを示します
　　td 　　データのセルを示します
　*使用例：*
　　\<p> \
　　\<h2>表の表示です\</h2>
　　\<table>
　　　\<tr>
　　　　\<th>表の項目\</th>
　　　　\<th>列1の項目\</th>
　　　　\<th>列2の項目\</th>
　　　\</tr>
　　　\<tr>
　　　　\<td>行1の項目\</td>
　　　　\<td>行1列1の情報を書きます\</td>
　　　　\<td>行1列2の情報を書きます\</td>
　　　\</tr>
　　　\<tr>
　　　　\<td>行2の項目</td>
　　　　\<td>行2列1の情報を書きます\</td>
　　　　\<td>行2列2の情報を書きます\</td>
　　　\</tr>
　　\</table>
　　\</p> \

### HTMLの見栄え調整や関連情報を追加するには？

*HTML文書の見栄え調整や情報追加*のために、以下の**代表的な要素**が用意されています。

・*フォントの構成要素*
　フォントの構成要素は、フォントを装飾します
　*主要な要素：*
　　i 　斜体（イタリック）を指定します
　　b　太字（ボールド）を指定します
　　big　 文字を拡大します（HTML5で廃止）
　　small 文字を縮小します
　*使用例：*
　　\<p> \
　　このフォントは\<i>斜体\</i>です
　　このフォントは\<b>太字\</b>です
　　このフォントは\<big>大文字\</big>です
　　このフォントは\<small>小文字\</small>です
　　\</p> \

・*リンク構成要素*
　リンク構成要素はハイパーリンクを作成します
　*主要な要素：*
　　a　アンカーを指定し、ハイパーリンクを作成します
　*使用例：*
　　\<p> \
　　\<a href="https://sample.sample-domain.com/sample" >Sample URLのリンクです</a>
　　\</p> \

・*画像構成要素*
　画像構成要素は、画像を文書に埋め込む指示を行います
　*主要な要素：*
　　img　埋め込み画像の表示し、終了タグはありません
　*使用例：*
　　\<p> \
　　\<img src="sample_picture.jpg" alt="サンプル画像">
　　\</p> \

### HTMLの見栄えをさらに良くするには？

*HTMLの見栄え*をさらに良くするために、*CSS*が用いられています。*CSS*とはCascading Style Sheetsの略で、*構造化文書の見た目を記述するための言語*を指します。*CSS*はHTMLに代表される*マークアップ言語*で記述された*文書のスタイルを指定*します。具体的には、文書の*フォントやレイアウト・色*等を指定し**文書の表現力を高めます**。

*使用方法*は、*\<style>\</style>*で括ったタグの間をstyle要素として処理する他、style属性やlink要素を用います。ここでは、*フォントの指定や文字色・背景色、幅*等が詳細に指定できます。

*HTML5*では、文字の大きさや種類・色等の*見栄えの指定はCSSが担当*します。同様に、*HTML5*では文書の*情報構造をHTMLが担当*します。そのため、見栄えに関連する要素や属性については非推奨項目や廃止項目が増えています。*HTMLとCSSを併用する*ことで**デザイン性の高いウェブページが作成可能**です。

## HTMLの基本を理解し、一歩進んだウェブドキュメント作成に取り掛かりましょう

*HTML*は**ウェブコンテンツに必須の記述言語**です。HTMLの基本構造は複雑なものではありません。HTMLに慣れたら次はコンテンツの見栄えを高めるためにCSSに挑戦しましょう。実際の*ウェブコンテンツ作成*には、**HTMLとCSSをセットでメンテナンスする**必要がありますので、さらに理解を深めることをおすすめします。

HTMLはウェブコンテンツで用いられる記述言語で、ハイパーテキスト記述言語と呼ばれています。基本構造は要素をタグで指定するだけのシンプルな構造をとっています。ここでは初心者向けにHTMLの構造と構成要素を基礎から解説していきます。

HTMLはウェブコンテンツで標準的に利用されている記述言語を指します

HTML文書はテキスト形式ですのでテキストエディタがあれば編集可能です

HTMLに加えてCSSを併用することでコンテンツの見栄えが良くなります

HTML入門：基本から学ぶHTMLの構造と構成要素を解説！

## HTMLとは？改めて整理してみよう

ITエンジニアの皆さんの多くは、1度はHTMLについて学んでいるはず。また、実際にWebプログラマーとして、日常的にHTMLを使いこなしている方もいるでしょう。しかし、後輩たちからHTMLについて尋ねられた時に、正しく説明できる方は実はあまり多くはありません。
今さらと思うかもしれませんが、ここで**HTMLについて初心者の目線で改めて整理**してみましょう。特に、*フロントエンドエンジニアを目指す方は必読です*。

### なぜHTMLの知識が必要なのか

*世界中のWebサイトのほとんどはHTMLで作られています*。Webページは作ったことはあるけれど、HTMLは使わなかったという方も多いでしょう。

実は、皆さんがよくご存知のWordPressも生成されるのはHTMLです。最近はHTMLに関する知識が皆無でも、簡単にWebページを作れるようになっていますが、HTMLを使えると何かと便利です。**Webページの微調整、色の調整など、細かい部分ではHTMLで直接記述するケースもあります。**

HTMLは、"Hyper Text Markup Language"の略語です。

これをそのまま直訳すると「高度なテキストに目印を付けるための約束事」です。Languageは言語を意味しますが、ここでは文法やルールと考えてください。

HTMLをプログラミング言語だと勘違いしている人もいますが、*HTMLはマークアップ言語であり、プログラミング言語ではありません*。私たちが日常に目にするWebページは、WebデザイナーやWebプログラマーが視覚的に分かりやすく、タイトル・文字・画像などを配置しています。

しかし、コンピューターからすれば単なるコードの羅列でしかありません。そこで登場するのがHTMLです。**HTMLがコンピューターと人間の間を取り持つ、翻訳者の役割を果たしています。**HTMLはWebページに表示する画像サイズの指定や、文字のフォント・サイズ・配置を指示するといった役割を担ってくれます。

次にハイパーテキストについて、おさらいしておきましょう。

ハイパーテキスト"HyperText"は、直訳すると「超テキスト」です。通常のテキストを超越したテキストということになりますが、何が「超」なのでしょうか？

Webページはハイパーリンクが頻繁に登場します。このハイパーリンクは、ある語句に関してさらに深く知りたい時に、その語句から直接、関連文章や説明文書を呼び出すという機能を持っています。このように*語句や文書を「関連づける」ことをハイパーリンク*と称し、**ハイパーリンクの機能を持つ文書を「ハイパーテキスト」と呼んでいます**。

HTMLの特徴がハイパーテキストであることは理解できましたが、ではマークアップ"Markup"とは何のことを指すのでしょう？

マークアップとは*タグと呼ばれる記号で文章を囲い、文章に「目印をつけて」意味を持たせること*です。

*タグはWebページ上で何をどう表示させるかを指定する「命令文」*であり、テキストをその意味ごとに<>で囲んで作成していきます。

この**タグをコンピューターが読み取って、人に分かりやすい表示に変えてくれる**のです。

例えば、見出しであれば階層の上から&lt;h1&gt;~&lt;h6&gt;を用います。大見出しの場合は&lt;h1&gt;大見出し&lt;/h1&gt;と記述します。

本文であれば、段落を表す&lt;p&gt;本文&lt;/p&gt;を用います。

他、画像は&lt;img&gt;タグを用います。&lt;img src="画像ファイル名"/&gt;の様に記述します。

### 簡単なWebページを作ってみよう

以上確認したことを、実習しながらおさらいしてみましょう。**WebページはHTMLで構成され、HTMLはテキストの羅列であり、タグによってマークアップされ、意味のあるものになっていました**。

ここでは、Windowsのメモ帳で簡単なWebページを作ってみましょう。以下をメモ帳で記述してみてください。

&lt;title&gt;タイトル-世界の山&lt;/title&gt;

&lt;h1&gt;大見出し-富士山&lt;/h1&gt;

&lt;h2&gt;中見出し-富士山の画像&lt;/h2&gt;

&lt;p&gt;本文-富士山の画像をフリー画像のpixaby.comから拾ってきました。&lt;/p&gt;

&lt;img src="https://cdn.pixabay.com/photo/2014/10/07/13/48/mountain-477832_1280.jpg" &gt;

メモ帳に入力したら、ファイル名を”富士山”、拡張子はhtmlとして保存してみてください。
次に保存した"富士山.html"という*HTMLファイル*をWクリックすると、次のように表示されます。

いかがですか？とても簡単だということが分かったと思います。


メモ帳のような**テキストエディタを用いて、文章や画像にタグを付けるだけで簡単にWebページを作れる**ことが分かったと思います。

このようにHTMLは主にWebページ作成に使われていますが、実は他にもHTMLが活用されているものがあります。*Webページを含めて、大きく3つの場所でHTMLが利用されている*ので、順に見ていきましょう。

世界中のWebサイトのほぼすべてがHTMLによって作られています。では実際のWebサイトを見てみましょう。今ご覧になっているこのサイトでも構いません。

マークアップ言語の記事（1ページ目）