【HTML入門】基本の書き方やよく使うタグを初心者向けに解説

【HTML入門】基本の書き方やよく使うタグを初心者向けに解説
近年IT人材の需要は急速に伸びており、プログラミングを学習することを検討する人も増えてきているでしょう。数多く存在するプログラミング言語の中でも、最も基本的なものと言われているのがHTMLです。 この記事では、これからHTMLを勉強しようとしている方に向けてHTMLの基本的な書き方やよく使われるタグ、勉強法などをご紹介します。HTMLの入門編としてぜひ参考にしてみてください。
無料

まずは登録してみる

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

1.HTMLとは

HTMLとは「HyperText Markup Language」の略称であり、ウェブサイトやアプリケーションの見た目である「フロントエンド（レイアウト）」を開発する最も基本的なマークアップ言語の一種です。マークアップ言語とは、文章の論理構造や修飾情報に関する指示を行う言語のことで、テキストエディタを使って作成します。
具体的には、Webページ制作、Webデザイン、アプリ制作などの際に使用されます。習得難易度は非常に低く、エンジニアやWebデザイナーなどにとっては、基礎的なスキルとして考えられています。
私たちが普段ブラウザ上で閲覧するウェブサイトのほとんどは、HTMLによって構築されています。実際に特定のウェブサイトのHTMLソースコードを確認したい場合は、そのウェブサイトのページ上で右クリックしましょう。そこで表示される「ページのソースを表示」を選択することで、簡単にHTMLのソースコードを閲覧することができます。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

2.HTMLを構成する3つの要素

実際にHTMLとはどのようなものなのか、次のサンプルをご覧ください。
<!DOCTYPE html>
<html>
<head>
 <title>ページタイトル</title>
</head>
<body>
 <h1>ここが見出し</h1>
 <p>本文</p>
</body>
</html>
このように、 「<」「>」などの記号とアルファベットと文字を組み合わせて構成されます。次に、もう少し分解して見てみましょう。

タグ

タグとは、ブラウザ上にコンテンツをどのように表示するかを決定するものです。上記のサンプルでは<title>や<body>などの塊がタグになります。
開始タグと終了タグという二つのタグに挟まれた情報がその間の要素の役割を定義し、一つの塊（ブロック）であることを意味します。例えば下記のコードの場合、間に挟まれた文字は「h1」という役割を持っているということです。h1とは、大見出しを表します。
〈h1〉大見出し〈/h1〉
このように、〈〉がタグの開始と終了を表し、終了タグの場合はタグの中に/を入れることで終了タグであることを示します。ただし、終了タグが存在しない場合もあります。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

要素・コンテンツ

要素とは、開始タグと終了タグに挟まれた内容までを含む全体のことを指します。以下の例だと、開始タグである<h1>から終了タグである</h1>までの一連の塊が「要素」であり、開始タグと終了タグに挟まれている「ここはコンテンツ」という文章は「コンテンツ」と呼ばれます。
 
〈h1〉ここはコンテンツ〈/h1〉
「コンテンツ」とは「中身」のことであり、文字だけでなく画像がくる場合もあります。

属性

属性とは、タグの性質を決める内容です。例えば、下記のタグ内に記述されている「href」はそのタグを「リンク」に変換する属性です。
 
〈a href=”http://www.〇〇.com/” 〉ここがリンクに変化します〈/a〉
このように、HTMLでは基本的に要素をタグで挟むことでブラウザに表示し、その要素の役割を属性が定義しているという仕組みで記述されています。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

3.HTMLの基本的な書き方

HTMLとは、タグと呼ばれるものを用いてブラウザに表示させる文章構成などを指示出しする言語であることが理解いただけたでしょうか。ではタグを用いていればどんな書き方でも良いのかというと、もちろんそうではありません。
HTMLファイル全体の基本的な書き方を解説します。

DOCTYPE宣言

「DOCYTYPE宣言（ドキュメントタイプ宣言）」とは、HTML文書ファイルの先頭に記述するもので、そのHTMLファイルで使用しているHTMLのバージョンを示します。
HTMLのバージョンには主に「HTML4.01」や「XHTML1.0」「HTML5」などがあり、現時点（2024年）での最新バージョンは「HTML Living Standard」です。DOCTYPE宣言がないと、ブラウザがどのモードで表示すればよいのか判別できず、レイアウトが崩れたりする可能性があるため、ルールとしてファイルの先頭に以下を記述するようにしましょう。
<!DOCTYPE html>
DOCTYPE宣言はHTML宣言とも呼ばれ、終了タグはありません。

htmlタグ

DOCTYPE宣言のあとには、htmlタグを用いて「ここからここまではhtmlで記述しています」として範囲を定義します。文章全体を<html>と</html>で囲み、その中でコードを記述していくことになります。
また、htmlタグでは言語を指示する「lang属性」を使用することもできます。例えば日本語を使用する場合は、以下のような記述になります。
<html lang=”ja”>
～～～～
</html>

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

head要素

htmlタグのなかは、大きく分けて「head要素」「body要素」の2つで構成されます。headタグは、ページに関する情報を記述する箇所です。検索エンジンやWebブラウザなど、画面上には表示されない部分に対する記述であり、titleタグやmetaタグ、scriptタグなどが使用されます。

body要素

bodyタグには、実際にページ上に表示する文章や画像などを記述します。hタグやaタグ、uiタグなどほとんどのhtmlはbodyタグ内で使用されます。
DOCTYPE宣言から始まり、htmlタグ内にhead要素、body要素の順で記述し、</html>で閉じる。これがHTMLの基本的な書き方です。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

4.HTMLでよく使うタグ

ここからは実際にHTMLでよく使われるタグとその役割を紹介していきます。

hタグ

hタグとは見出しを表すタグのことであり、h1からh6まであります。h1がいちばん大きい見出しで、数字が大きくなるほど見出しとしては小さくなります。
<h1>一番目に大きな見出し</h1>
<h2>二番目に大きな見出し</h2>
<h3>三番目に大きな見出し</h3>
<h4>四番目に大きな見出し</h4>
<h5>五番目に大きな見出し</h5>
<h6>六番目に大きな見出し</h6>
hタグはh1から順番に使うことが原則であり、h1の次にh3が来たり、いきなりh4から始めたりするのはNGです。また、一つのhtmlファイル内ではh1タグは一回のみの使用が基本となります。

pタグ

pタグとは段落を指定するためのタグです。文章構成の最小単位であり、見出しなどではない通常のテキストはすべてpタグで囲うのが一般的です。段落を表すタグであるため、<p>～</p>の前後で一行分改行されます。
また、テキストだけでなく、画像も一つの段落と考えてpタグで囲うことがあります。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

aタグ

リンクを作成するときに使用するのがaタグです。aタグは「href=”リンク先のURL”」という属性とセットで使用するのが一般的であり、リンクにしたいテキストや画像をaタグで囲みます。
<a href=”リンク先のURL”>リンクテキスト</a>

ul/ol/liタグ

HTMLで箇条書きを表現するときに使われるのが、ul、ol、liの3つのタグです。これらは「ulとli」のセット、もしくは「olとli」のセットで形式で使われるものであり、単純に箇条書きとして列挙したいときは「ulとli」のセットを使い、番号を振って表現したいときは「olとli」のセットを使います。
それぞれのサンプルとしては次の通りです。
【ulとliのセット】
<ul>
 <li>箇条書き1つ目</li>
 <li>箇条書き2つ目</li>
 <li>箇条書き3つ目</li>
</ul>
ulタグとliタグで記述すると、このように表示されます。
<ul>
 <li>箇条書き1つ目</li>
 <li>箇条書き2つ目</li>
 <li>箇条書き3つ目</li>
</ul>
次に、olタグとliタグで記述するとこのようになります。
【olとliのセット】
<ol>
 <li>箇条書き1つ目</li>
 <li>箇条書き2つ目</li>
 <li>箇条書き3つ目</li>
</ol>
<ol>
 <li>箇条書き1つ目</li>
 <li>箇条書き2つ目</li>
 <li>箇条書き3つ目</li>
</ol>
ulタグ、およびolタグの中に含まれるliタグの数には制限はありません。

imgタグ

imgタグは画像を表示させるときに使います。imgタグは「src=”画像ファイル名”」という属性とあわせて使用し、src内に書かれた画像ファイルが読み込まれます。また、altという属性もセットで記述されることが多く、「alt=”画像の代替テキスト”」のように画像が表示されなかったときにaltで記述したテキストが代わりに表示されます。
imgタグのサンプルとしては以下の通りです。
<img src=”画像ファイル名.jpg” alt=”画像の代替テキスト” />
imgタグはほかのタグとは異なり、終了タグは使いません。また、imgタグで表示させることができるファイル形式も決まっており、JPGやPNG、GIFなどの画像ファイルのみです。PDFファイルなどはimgタグでは表示できないため、注意してください。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

5.学生がHTMLを学習するメリット

次に、学生がHTMLを学習するメリット3選について解説します。

Webページの仕組みが理解できる

上述した通り、私たちが普段ブラウザ上で閲覧するウェブサイトのほとんどがHTMLを使って構築されています。したがってHTMLを学習することで、文章、画像、リンクなどのコンテンツをどのようにそのウェブサイトに組み込んで表示しているかを理解できます。エンジニアやデザイナーのようなIT関連の仕事に就いている人ではない場合でも、知識として頭に入れておくことは有益でしょう。

簡単なWebデザインが習得できる

HTMLを学習することで、簡単なWebデザインができるようになります。コーダーを始めとしたエンジニア職を志望している学生の場合、HTMLを習得することで就職活動を有利に進めることができるでしょう。また、Webとは直接関係がない場合でも、仕事の幅を広げることができるなどのメリットがあります。

難易度が低いため習得がしやすい

HTMLは、数多く存在するプログラミング言語の中でも最も入門的なレベルであり、初心者にも習得しやすい言語です。加えて、標準のWebブラウザが使える環境があれば誰でもHTMLを使った開発を行うことができます。つまり、習得しやすく、すぐに実践できるという点において、プログラミングに挑戦してみたいと考えている人にはまず勉強することをおすすめできる言語です。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

6.HTMLを学習する方法3選

最後に、学生におすすめのHTMLを学習する方法3選について解説します。

書籍

まず、書籍を使って学習する方法があります。書籍は情報が体系的にまとめられているため、幅広い知識を学ぶことができることや、情報の信憑性が担保されているなどのメリットがあります。ただし、書籍を通して学んだことは、実際に手を動かして実践しなければスキルを身に付けたとは言えない点には注意が必要です。
書籍を選ぶ際には、「発行日」に注意しましょう。あまりに古い本であった場合、開発環境のバージョンが異なっているため、指示通りにコーディングを行っても機能しない危険性があったり、文法が大幅に変更されていたりする可能性があります。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

オンライン学習サイト

次に、オンライン学習サイトを使って学習する方法があります。提示された問題を解くなどして実際にコーディングを行い、実践的な経験値を積みながら勉強を進めることができるメリットがあります。書籍と同様に、時間や場所に関係なく学習できるという点も魅力的です。しかし、基本的な内容は無料で学習することができますが、応用的な内容は原則有料になるため注意が必要です。
具体的には、「Progate」「ドットインストール」「Schoo」などがおすすめのオンライン学習サイトです。

プログラミングスクール

最後に、プログラミングスクールに通って学習するという方法があります。実は、上述した「書籍」や「オンライン学習サイトを」使った独学の場合、プログラミング学習を途中で挫折してしまう人が非常に多いという事実があります。
プログラミングは、少しでもソースコードに問題があるとエラーになってしまい、思うように表示されなくなってしまいます。その際に気軽に質問できる人がいないこと、行き詰まった時に一人では学習のモチベーションを保つことができないなどが理由として挙げられます。
その点、プログラミングスクールではインストラクターにいつでも質問ができる環境で、一定期間内に実践的なスキルを確実に身に付けることができます。プログラミングスキルを習得する最も確かな方法であると言えるでしょう。しかし、プログラミングスクールは独学と比較すると費用が高額であること、また学習する場所や時間を制限されてしまう場合もあるなどのデメリットも存在します。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

まとめ

HTMLはプログラミング言語の中でも最も基本的なものの一つと考えられており、身近なブラウザ上のWebサイトなどはほとんどこの言語でできています。ITエンジニアにとってはほぼ必須のスキルだといえるでしょう。エンジニア志望の学生は、学生のうちに触れておくことで、就職活動においてアピールできるポイントの一つになります。是非自分で触れてみることをおすすめします。

ITエンジニアを目指す新卒学生向け就活エージェントならレバテックルーキー

レバテックルーキーは、レバテックが運営するITエンジニア専門の就活エージェントです。多数のITエンジニアのキャリア支援経験のあるアドバイザーが、あなたのスキルと希望に合わせた企業の紹介から、人事目線での面接対策など、就職までを一貫してサポートします。ES添削、面接対策、ポートフォリオ作成サポートなども実施していますので、まずは一度カウンセリングにお越しください。

就活アドバイザーに相談してみる

関連記事

エンジニア就活ノウハウ記事一覧へ
レバテックカレッジ 就活まで支援するエンジニア志望学生のためのプログラミングスクール