【HTML入門】基礎から書き方まで順を追って解説

2025年3月31日

将来SEを目指す人にとってHTMLは基本中の基本になります。 HTMLとは「HyperText Markup Language」の略称であり、ウェブサイトやアプリケーションの見た目である「フロントエンド（レイアウト）」を開発する最も基本的なマークアップ言語の一種です。本記事ではHTML入門としてHTMLの基礎から実際にテキストエディタを使った書き方までわかりやすく解説します。

無料

まずは登録してみる

1.HTML入門！基礎編
2.HTMLを構成する3つの要素
3.HTMLを書くのに必要なアプリ
4.HTMLを使ってファイルを作成してみよう！
5.HTMLでよく使うタグ
6.HTMLを学習する方法3選
7.まとめ

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

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

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

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

1.HTML入門！基礎編

1章ではHTMLの用語の説明に加え、CSSとの違いについても解説します。

HTMLとは

HTMLとは「HyperText Markup Language」の略称であり、ウェブサイトやアプリケーションの見た目である「フロントエンド（レイアウト）」を開発する最も基本的なマークアップ言語の一種です。

マークアップ言語とは、文章の論理構造や修飾情報に関する指示を行う言語のことで、テキストエディタを使って作成します。

具体的には、Webページ制作、Webデザイン、アプリ制作などの際に使用されます。習得難易度は非常に低く、エンジニアやWebデザイナーなどにとっては、基礎的なスキルとして考えられています。

私たちが普段ブラウザ上で閲覧するウェブサイトのほとんどは、HTMLによって構築されています。実際に特定のウェブサイトのHTMLソースコードを確認したい場合は、そのウェブサイトのページ上で右クリックしましょう。

そこで表示される「ページのソースを表示」を選択することで、簡単にHTMLのソースコードを閲覧することができます。

CSSとの違い

また、HTMLを習得するうえで欠かせないのがCSSです。

CSSとは「Cascading Style Sheets」の省略であり、HTMLを装飾しサイトをきれいに見せる役割があります。

HTMLは文書を構造化するのに対して、CSSは色やサイズなど装飾を指定します。また、CSSはHTMLのように単体では使用できず、HTMLとセットで使用されます。

HTMLだけでもレイアウトは可能ですが、HTMLとCSSを分離させることで、変更がしやすくなります。

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

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

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

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

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

HTMLは、「タグ・要素・属性」の3つで構成されます。ここではそれぞれの要素について詳しく解説していきます。

タグとは、ブラウザ上にコンテンツをどのように表示するかを決定するものです。

「開始タグ」と「終了タグ」という二つのタグに挟まれた情報がその間の要素の役割を定義し、一つの塊（ブロック）であることを意味します。

例えば上記のコードの場合、間に挟まれた文字は「h1」という役割を持っているということです。h1とは、大見出しを表します。

このように、〈〉がタグの開始と終了を表し、終了タグの場合はタグの中に/を入れることで終了タグであることを示します。ただし、終了タグが存在しない場合もあります。

要素

要素とは、開始タグと終了タグに挟まれた内容までを含む全体のことを指します。

以上の例だと、開始タグである<h1>から終了タグである</h1>までの一連の塊が「要素」であり、開始タグと終了タグに挟まれている「ここはコンテンツ」という文章は「コンテンツ」と呼ばれます。

「コンテンツ」とは「中身」のことであり、文字だけでなく画像がくる場合もあります。

属性

属性とは、タグの性質を決める内容です。

例えば、上記のタグ内に記述されている「href」はそのタグを「リンク」に変換する属性です。また、実際のリンクページのURLを属性値といいます。

このように、HTMLでは基本的に要素をタグで挟むことでブラウザに表示し、その要素の役割を属性が定義しているという仕組みで記述されています。

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

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

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

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

3.HTMLを書くのに必要なアプリ

HTMLを書くためには「テキストエディタアプリ」と「ブラウザ」をPCにインストールする必要があります。

Visual Studio Code

出典：Microsoft

htmlを書くのに必要なテキストエディタアプリは「Visual Studio Code」です。無料で使用できます。

GoogleChrome

出典：chrome

作成したHTMLファイルはブラウザで確認できます。おすすめのブラウザは「GoogleChrome」です。

htmlを作成する前に必ず以上のアプリはインストールしておくようにしましょう。

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

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

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

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

4.HTMLを使ってファイルを作成してみよう！

HTMLとは、タグと呼ばれるものを用いてブラウザに表示させる文章構成などを指示出しする言語であることが理解いただけたでしょうか。

ここでは実際にテキストエディタを使って簡易的なwebサイトを作成してみましょう。

STEP1：ファイルを作成する

エディタアプリを開きファイル＞新しいテキストファイルを選択した後に「名前を付けて保存」をクリックし、名前をつけて保存します。

STEP2：サイトの枠を作成する

ファイルを作成し「html」と入力すると、入力候補に複数のHTMLが表示されます。その際に、「HTML5」を選択すると基本の構成要素が入力され、サイトの枠となる部分が作成できます。

基本の構成要素については以下で詳しく説明します。

初期設定では、表示言語が英語になっています。表示言語を日本語にするには<html lang=“en”>の「en」を「ja」に変更します。

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>

head要素

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

body要素

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

STEP3：コンテンツの作成

次に、サイト上のコンテンツ部分（body要素)を作成していきます。

<title></title>はタイトル、<h1></h1>は見出し1、<p></p>はテキストタグになります。開始タグと終了タグの間にテキストを入力します。

STEP4：ブラウザで確認する

ここまで入力が終えたらHTMLファイルを上書き保存します。次に保存したHTMLファイルをChromeなどのブラウザで開くと、上記のようにページがブラウザに表示されます。

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

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

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

関連記事：【新卒就活】AWS（アマゾンウェブサービス）の就職難易度は？募集職種や対策を解説
関連記事：ネットワークエンジニアの将来性とは？評価される人材になるためのキャリアパス
関連記事：HTML5とは？言語の特徴や学習方法からおすすめ資格3選を解説

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

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

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

エンジニア就活ノウハウ記事一覧へ

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