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

*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とは？できることや初心者向けのタグの例、CSSについても紹介

**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の構造と構成要素を解説！

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