- [HTML・CSSとは何か？使い方やできること、独学方法を解説！](https://and-engineer.com/articles/YUbmNRAAACUAyIm5)

- [HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間](https://and-engineer.com/articles/YXpquhUAACsAivlG)

- [HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！](https://and-engineer.com/articles/YTsTCBAAACIAk0be)

まず始めに、*HTMLとは何か*について初心者の方でも分かりやすいように解説します。HTMLは何をするためのものなのか、どういった場面で使われるのかみていきましょう。

### HTMLはWebサイトを作成するための言語

*HTMLはWebサイトを作成するための言語*です。Webページ上に表示される文章・写真・リンクなどの情報は、HTMLによって作成されています。HTMLによって「この文章を表示する」「画像を挿入する」などを具体的に表現することが可能です。

また、HTMLでWebページの構造を書き表したファイルを「HTMLファイル」と呼び、**HTMLファイルをサーバにアップロードすることで、Webページをネット上に公開することが可能**です。

### HTMLはタグを使ってWebページの構造を表す

**HTMLでは「タグ」というものを使って、Webページの構造を表します**。タグとは文章や画像をどのように表示するか、コンピュータに指示を出すためのものです。たとえば、```<b>```というタグがHTMLにはあります。特定の文章にこれを使用してタグ付けすることにより、その文章を太字にして表示することができます。このように、*タグを使うことでコンピュータに表示方法の指示を出すことが可能*です。

ここでは、*HTMLでできることの一覧*をまとめました。Webアプリケーション開発において、HTMLがどのように活躍するのか解説しています。これからHTMLを勉強する方は、HTMLでできることを予め抑えておくと良いでしょう。

まずできることが、*Webページ上に記載された文章の作成*です。コンテンツの文章、ヘッダーやフッターに記載されている文章などは、全てHTMLによって作成されています。また、**Webページのタイトルやその他のメタ情報など、表には出ない文章もHTMLで作成可能**です。

HTMLを使うことで、*Webページをデザインする*ことも可能です。たとえば、Webページを2分割し、それぞれ別内容のコンテンツを表示させることができます。さらに、Webページの文章を太字にしたり、文字色を変えたりといった調整も可能です。

ただし、こういったデザイン調整は**HTMLではなくCSSが使われることもあります**。CSSは、Webページのデザイン調整を専門に担当する言語です。HTMLだけでもデザイン調整は可能ですが、CSSを使った方が調整にかかる時間を減らすことができます。そのため、HTMLを習得する場合、CSSも合わせて習得しておくと良いでしょう。多くのHTMLの書籍には、CSSの使い方も合わせて記載されていることが多いです。

HTMLはWebアプリ開発以外でも活躍します。たとえば、HTMLをメールで使用することができ、**メールの文章の色を付けたり、画像や動画をメール上に埋め込んだりする**ことができます。こういったデザイン調整を行うことで、より多くの情報を視覚的に伝えることが可能です。普段の業務でHTMLメールを使うことは少ないかもしれませんが、ユーザーにメール配信を行う場合などで活用できます。

## HTMLだけではできないこと一覧

続いて、*HTMLだけではできないこと*を解説します。HTMLだけではどうしても限界があり、JavaScriptなど他のプログラミング言語の力を借りないと難しいことも多くあります。

HTMLだけでは動的なWebページを作成することはできません。動的なWebページとは、*ページを開く度に表示内容が変更されているページ*のことです。具体的には掲示板やSNSなどが挙げられ、掲示板はページを開く度に書き込み内容が変更されています。

動的なWebページを作成する場合、Webページ上の変更されるデータを別途作らないといけません。データの作成はブラウザではなく、Webページを管理するサーバ上で行われます。サーバでプログラムが動いてデータ作成を行い、そのデータをブラウザに渡しているのです。

**サーバで動かせるプログラミング言語には、PHP・Python・Rubyなどがあります**。動的なWebページを作るなら、これらの言語の知識が必要です。

### アニメーションがあるWebページ

*Webページにスライドショーなどのアニメーションをつける*のも、HTML単体では難しいです。Webページにアニメーションをつける場合は、JavaScriptという言語を使います。そのため、Webページ制作の業務に就く場合、**HTMLだけではなくJavaScriptの知識も必要**です。JavaScriptはHTMLよりも難易度が高く、習得に時間がかかるため、HTMLの勉強に時間を取られすぎないよう注意が必要です。

### ユーザーが入力できるWebページ

お問い合わせフォームなど、*ユーザーに入力させるページもHTMLだけでは作成できません*。お問い合わせフォームは、入力された内容に問題がないかチェックする必要があります。入力内容のチェックはJavaScriptによって行われ、**HTMLだけでは入力内容のチェックはできません。**

続いて、*HTMLの代表的なタグを解説*します。HTMLのタグを活用して、Webページの見た目を整えます。HTMLはタグの使い方さえ覚えてしまえば、ほとんど使いこなせてしまいます。今回は、*初心者が最低限覚えたいHTMLタグをまとめました*。HTML初心者の方は、まずはこちらのタグをマスターしてください。

Webページに大きな文字で見出しが書かれているのを見たことがあるでしょう。*見出しはHTMLのh2タグを使うことでつけることが可能*です。たとえば、

と記述することで「タイトル」という見出しを作ることができます。また、**見出しの中に小さい見出しを作りたい場合はh3タグ**を使います。さらに小さい見出しを作りたいなら、h4、h5、h6タグも用意されています。

HTMLには文字のレイアウトを変更できるタグが多くあります。たとえば、*bタグを使うことで太字にすることが可能*です。また**iタグを使えば文字を斜体にできたり、uタグを使えば文字に下線を引いたり**できます。これらのタグはWebページ制作だけでなく、HTMLメールを作成する場合にも使えるでしょう。具体的には次のように書きます。

~~~ 
<b>太字</b>
<i>斜体</i>
<u>下線</u>
~~~ 


Webページ上に箇条書きを用意するためのタグもあります。*箇条書きを作る場合は、ulタグを使います*。ulタグは先頭に記号を付ける箇条書きを作成できます。さらに、olタグを使うことで、先頭に数字がつく箇条書きも可能です。また、**それぞれの箇条書きはliタグで囲う**必要があります。具体的には次のように書きます。
~~~ 
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
~~~ 


Webページ上にリンクをつけて、*他のWebページに飛ばしたい場合はaタグを使います*。具体的には、次のように書く必要があります。

~~~ 
<a href="https://www.google.com/">Google</a>
~~~ 

こうすることで、Googleのページに飛ばす**リンクを作成できます。**

最後に、*HTMLを学習する方法をまとめました*。HTMLの習得は容易ではあるものの、タグの数が多く、覚えるのに時間を要します。また、Webアプリ開発を行う場合、HTMLだけでなくCSSやJavaScriptもマスターしないといけません。そのため、*なるべく効率的な方法でHTMLを素速く習得しましょう。*今回は、時間がない方でもHTMLを習得できる方法を解説します。

書籍を購入するのは、一般的な学習方法と言えます。*HTMLの書籍はWeb制作初心者向けのものが多く*、Webサイトの仕組みから丁寧に解説しているものが多いです。こういった書籍を1冊マスターすることで、Webサイト制作者としての基礎知識を身につけられます。

おすすめは**「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」**です。本書は、HTMLやCSSの基礎を体系的に学べる本です。また、レスポンシブ対応やFlexbox・CSSグリッドのレイアウトなど、最近流行中の技術についても解説されており、中級者以上にもおすすめできます。

[1冊ですべて身につくHTML & CSSとWebデザイン入門講座](https://www.sbcr.jp/product/4797398892/)

2つ目の方法は、学習サイトを活用することです。*Progateやドットインストールなどのサイトなら、HTMLを手軽に学ぶことが可能*です。学習サイトは、月額1,000円程度で利用できるため、**プログラミングスクールに入会するよりもリーズナブル**でしょう。Progateやドットインストールは教材が分かりやすいのに加え、練習問題が多く掲載されているためおすすめです。

## HTMLでWebページの作成が可能！動的なページを作るなら他の言語も習得しよう

本記事では、*HTMLでできることについてまとめました*。HTMLを使うことで何ができるのか、お分かり頂けたかと思います。HTMLを使うことで、静的なWebページを作成することが可能です。ただし、入力フォームを作ったりアニメーションを作ったりするなどの動的なWebページは、HTMLだけでは作成することができません。

**Webアプリケーション開発に携わりたい場合、HTMLの知識だけでは不十分**なため、CSSやJavaScriptのスキルも抑えておくと良いでしょう。HTMLの勉強はなるべく時間をかけず、効率的に行いましょう。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。

今回はHTMLでできることについて解説します。HTMLはWebアプリ開発で使われる言語の1つですが、具体的にWebアプリのどの部分の開発ができるか、ご存知ない方は多いでしょう。本記事ではHTMLでできること・できないことをまとめました。

HTMLはWebページの文章の作成やデザイン調整ができる

HTMLだけでは動的なWebページの作成はできない

HTMLでできることは少ない？できないことやタグも一覧でまとめた

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

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

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

この記事ではHTMLの勉強法について解説しますが、その前にHTMLを学ぶ必要性や目的について確認しておきましょう。学ぶには明確な目的が必要です。「何となく」「後学のために」といった軽い気持ちで学んでも身に付きません。
学ぶ以上は、「*HTMLを学んで何をしたいのか*」「*自らの人生設計にどう役立てるのか*」を明らかにすることが先決です。

### エンジニアにHTMLの知識が必要な理由

*Webサイトは基本的にHTMLで作られています*。「ブログを作ったことはあるけれど、HTMLは使わなかった」という方は多いです。最近はCMSと呼ばれる、テキスト入力やWord操作の感覚でWebサイトの作成や更新ができるツールが増えました。
誰もが知っているWordPressではHTMLの知識が皆無でもWebページを作れますが、WordPressのアウトプットはHTMLです。つまり、Webページを作るだけなら、HTMLの知識は無くとも困ることはありませんが、次の理由から*ITエンジニアにとってHTMLは必要不可欠の知識*と分かります。

**1.Webページの最終調整にはHTMLスキルが求められる**

WordPressの操作で、シンプルなWebページは作れますが、特徴的なWebページを作るのに限界があります。仮にWordPressで作成できても、最終的な*Webページの微調整・動き・色合い整など、デリケートな調整はHTMLで直接記述することがあります*。

**2.HTMLの知識があると具体的な指示を出せる**

システムエンジニアがWebプログラマーやWebデザイナーに開発の指示・修正・微調整の指示を出す際に、*HTMLを知っているか否かによって、指示の具体性が大きく変わります*。

**3.フルスタックエンジニアへの近道**

複数の領域のスキルを持ち、オールラウンドに活躍できるエンジニアをフルスタックエンジニアと称しますが、*HTMLのスキルを持ったエンジニアは、フルスタックエンジニアを目指せる可能性*があります。
例えば、*フロントエンド開発の領域ではHTML・CSS・JavaScriptの3つを習得していれば、ほぼ独力でフロントエンド開発を担えます*。
さらにPHPやPythonなどの言語スキルを身に付け、*フロントエンド開発に加えてバックエンド開発を担えると、フルスタックエンジニアとして活躍の機会*が広がるでしょう。

HTMLは"Hyper Text Markup Language"の略語です。Languageは言語と訳されることが多いため、プログラム言語の一種と思いがちですが、プログラム言語ではありません。

HTMLのLanguageは言語の意味ではなく、文法やルールの意味合いです。*HTMLはプログラミング言語ではなく、マークアップ言語なのです*。

私たちが日常利用しているWebページは、視覚的に分かりやすくタイトル・文字・画像などが配置されています。一方、コンピューター側からWebページを見てみると、単なるコードの羅列です。
実は**HTMLがコンピューターと人間を取り持ち、翻訳者の役割を果たしています。**
HTMLがコンピューターに対して、Webページに表示する文字・画像のサイズ・配置を教え、その指示を受けたコンピューターが人間の視覚に訴えるページを作成します。
次に、HTMLのHyper Text （ハイパーテキスト）について確認しておきましょう。

### ハイパーテキスト（HyperText）とは

「HyperText」のHyperは直訳すると「超」です。「HyperText」はテキストを超越するテキストという意味になります。では、何が「超」なのでしょうか？

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

HTMLがハイパーテキストで構成されていることは理解できました。ではマークアップ"Markup"とは何を意味するのでしょうか？

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

*「タグ」（Tag）とはWebページ上での表示のさせ方を指定する「命令文」*であり、テキストをその意味ごとに"&lt;&gt;"で囲みます。

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

たとえば、見出しであれば階層の上から&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ページの作成において、HTMLと切ってもきれない関係にあるのがCSSで、CSSは"Cascading Style Sheets"の略語です。
CSSは化粧に近いものと考えてください。**HTMLだけで作られたWebページに見栄えよく化粧を施したり、動きを付ける役目**を持ちます。HTMLを学習する際には、ぜひCSSも学びましょう。

HTMLが主にWebページの作成に使われていることは理解できましたが、実はHTMLはWebページ以外にも活用されています。ここでは、*HTMLが利用されている主な3つの領域*について紹介していきます。

世界中のWebサイトのほとんどがHTMLによって開発されています。それを確認する方法があります。

HTMLで記述されているソースコードを確認するには、*Windowsパソコンなら「Ctrl+U」、Macの場合は「⌘+Option+U」を同時に押すことでソースコードが現れます。*

**Webサイトの裏側はすべてHTMLで記述されている**のです。

普段利用している*EメールでもHTMLが使われているケースが増えています*。特に多いのは、広告メールです。メールを開くと、あたかもWebページのように画像やアニメーションが見られるメールを受け取ったことがあるでしょう。
ビジネスメールではテキストメールが主流ですが、**メルマガや登録サイトのお知らせメールなども「HTMLメール」が大半**です。

HTMLはOSに制限されない点が強みです。iOSやAndroidOSに関わらず、HTMLは共通の言語です。スマホアプリの開発では、iOSはObjective-CやSwiftなどを利用し、Androidは主にJavaを使います。iOSとAndroidの双方に対応できるスマホアプリを開発する場合は、基本的に二重開発を余儀なくされます。

しかし、**JavaScriptと、HTML（HTML5）を使うことで、iOSとAndoroid兼用のスマホアプリの開発が可能**です。
このようなアプリを*ハイブリッドアプリと言い、開発コストの低減が図れる*ことから注目を浴びましたが、動作面やパフォーマンス面の弱点があり、必ずしもスタンダードにはなっていません。

ここまででHTMLの概略は理解できたでしょうか。ここからは*HTMLの勉強法について紹介*していきます。何から勉強を始めるのか迷うところですね。

スクールに通う、オンラインスクールを受講するといった方法も選択肢としてはありますが、本格的にスクールに通う場合は、数十万円の受講料が必要です。オンラインスクールも有料のスクールは数万円程度かかります。
しかしHTMLやCSSは、さほど難易度は高くないため、独学が可能です。以上の理由から、ここでは独学をおすすめします。

### 難易度や習得に必要な勉強時間

*ITスキルのある方*（ITの基礎知識がある人、プログラミング言語を1つ程度習得している人）であれば、**1日1時間の学習で、半月から1カ月もあれば独力でブログサイトが作れる程度のレベルには達する**ことができるでしょう。

HTML・CSSの作成で、特別なものを用意する必要はありません。普段使っている*パソコン・Webブラウザ・テキストエディタ（ex.メモ帳）*があれば、すぐにでも作業は始められます。

テキストエディタがあればHTMLのコーディングは可能ですが、できれば**HTMLエディタを利用した方が、コーディングがはかどります**。
コードの記述ミスをチェックしてくれたり、タグの種類ごとに色分けしてくれたり、作業をサポートしてくれるため、フロントエンドエンジニアは必ずといっていいほど、それぞれが気に入ったHTMLエディタを活用しています。初めての方におすすめしたいHTMLエディタは以下の3つです。

*1.[Atom](https://atom.io/)*
定番ともいうべきHTMLエディタです。ベースは英語ですが、日本語化プラグインもあり、初心者から熟練者まで幅広く使えます。

*2.[サクラエディタ](https://sakura-editor.github.io/)*
日本人が開発したエディタです。日本語の解説サイトもあり、使い方に困った際には大きな力になります。

*3.[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)*
マイクロソフト社提供の無料のエディタです。さまざまなプログラム開発で重宝します。

ここでは、おすすめの独学法として2つ紹介します。もちろんすべてを選んでも構いませんし、1つに集中しても構いません。どちらも、*「一方的に講義を聞く」「ただ単にテキストを読む」という方法ではなく、手を動かして覚える実践的な方法*です。
いずれの学習法でも終了する頃には、独力で簡単なWebページを作れるだけのスキルが身についているはずです。

### 無料でプログラミング学習サービスを利用する

プログラミング学習サービスの1つに*[Progate](https://prog-8.com/)*というサービスがあります。この中に*[「HTML & CSS 初級編」](https://prog-8.com/lessons/html/study/1)*という学習コースがあり、**会員登録をすると誰でも無料で受講**ができます。中級以上でも月額1,078円で受講できるため、書籍代よりも安上がりかもしれません。Progateは初心者に優しいサービスが作られているので、飽きずに続けられるのがおすすめポイントです。

### 入門者向けのテキストで学ぶ

*[1冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座（ ＳＢクリエイティブ）](https://honto.jp/netstore/pd-book_29559725.html)*

その名の通り、**この1冊でHTMLとCSS、さらにはWebデザインまで学べます**。テキストに従って、*実際に1つのサイトを作るので、実践を交えながら基礎を学ぶため、習熟は早い*でしょう。
テキストに従って最後まで進めていくと、お洒落なサイトが出来上がりますので、学習の達成感が倍増します。ちなみに著者はMana（マナ）という方で、「マナブログ」で有名な人気ブロガーの坂内学さんではないかと考える人がいますが、別人のようです。

スマホでスキマ時間にHTMLを学べるようなアプリがあると便利です。一時期、*「Trico-Hello world without PC」というHTML学習アプリがiPhoneアプリとして存在していましたが、残念ながら現在は提供されていません*。

HTML/CSSはどこまで勉強すればよいのか、誰もが不安に感じる点でしょう。とりあえず簡単なブログサイトを作れればそれで良いという方は、ひと月も学習すれば十分です。一方、**フロントエンドエンジニアを志す方は次の認定資格の取得**を目指しましょう。

*[HTML5プロフェッショナル認定試験](https://html5exam.jp/)*

エルピーアイジャパン（LPI-Japan）という特定非営利活動法人の認定資格で、*HTML5以外にCSSやJavaScriptなどに関する技術や知識も必要な試験*です。
レベルは1と2があり、*エンジニアレベルのスキルが求められます*。合格率は不明ですが、合格には70%の正当率が求められるため、決して易しくはありません。

以上、HTMLの勉強法について解説してきました。ここまで読まれたエンジニアの皆さんは、HTMLを習得し、もうワンランク上のエンジニアを目指してみてください。

Web全盛の時代を迎え、Webの基本であるHTMLはITエンジニアにとって必須知識・スキルといっても過言ではありません。ではHTMLはどう学べばよいのでしょう。ここではHTMLの習得を目指すエンジニアの方に向けて、HTMLの基本から勉強法まで解説していきます。

世界中のWebがHTMLによって作られていることから、ITエンジニアにとってHTMLは必須知識となっている。

HTMLはOSに左右されにくいWebアプリの開発にも利用されており、CSSとセットで学ぶことが望ましい。

HTMLは比較的易しい言語であり、教材も多く揃っていることから費用をかけず独学でも学べる。

HTMLは独学で学べる？勉強法や初級エンジニアに必要な習得時間

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とは「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宣言が簡単に記述できる

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の記事（4ページ目）