HTMLでWebページの文章を表現する際に、テキストを読みやすく整理するためには適切なタグの使用が欠かせません。特に、*pタグとbrタグは、基本的なテキストの整形に役立つ重要な要素です。*

pタグ\<p>は段落を表し、長い文章を適切に区切るのに適しています。一方、brタグ\<br>は、行内の強制的な改行に使われます。

この記事では、pタグとbrタグの違い、それぞれの役割や使い分け、具体的な使用方法について詳しく解説します。

【参考】：[MDN Web Docs](https://developer.mozilla.org/ja/)

HTMLとは？特徴やできることなど基礎知識を初心者向けに紹介

HTMLタグはWebページの構造や内容を記述するための要素です。構造や内容の整理に役立ちます。例えば、「見出し」や「段落」、「画像」といった要素をHTMLタグで囲むことで、*ブラウザにどのように表示するかを指示します。*

【参考】：[Search: "HTMLタグ"｜MDN Web Docs](https://developer.mozilla.org/ja/search?q=HTML%E3%82%BF%E3%82%B0)

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

HTMLタグは、**Webブラウザに「ここには見出しがあります」「ここは段落です」といった情報を伝えることで文章を構造化し、Webページの表示形式を決定します。**

またSEO※対策では非常に重要な役割を担っています。（※SEOは「検索エンジン最適化」のことであり、Googleなどで検索した時にサイトを上位に表示させるための方策を意味します。 ）

**タグは、「<」と「>」で囲まれた単語で表されます。**例えば、\<p>は段落を表すタグです。多くのタグには開始タグと終了タグのペアがあり、開始タグで要素の始まりを、終了タグで終わりを示します。

・開始タグ: \<tagname>
・終了タグ: \</tagname>

*【タグの実例】*
次のコードでは、pタグ\<p>で囲まれた部分が段落として表示されます。

```
html
<p>これは段落です。</p>
```

HTMLタグは、Webページに表示させる情報を指定する文字列です。タグを使用することで、文章に意味づけ（マークアップ）を行うことができ、Webページのテキストや画像、リンクなどを正しく表示できます。**HTMLタグには次に挙げるように、様々な種類のタグがあります。**

・構造を表すタグ：\<html>、\<head>、\<body>など、ページ全体の構造を定義するタグ
・見出しを表すタグ：\<h1>、\<h2>、\<h3>など、見出しレベルを指定するタグ
・文章を表すタグ：\<p>（段落）、\<a>（リンク）、\<img>（画像）など、文章や画像を表示するタグ
・リストを表すタグ：\<ul>（箇条書きリスト）、\<ol>（番号付きリスト）、\<li>（リスト項目）など、リストを作成するタグ
・表を表すタグ：\<table>、\<tr>、\<td>など、表を作成するタグ

HTMLのリスト要素とは？基本の書き方やカスタマイズ方法を解説

タグの中には、さらに詳細な情報を指定するための属性を持つものがあります。**属性は、開始タグの中に「=」と「値」を指定して設定します。**

下記の例では、\<a>タグのhref属性にリンク先のURLを指定しています。

```
html
<a href="https://example.com">リンク</a>
```

pタグ\<p>は「paragraph（段落）」を意味し、HTMLで段落を作成するためのタグです。ブラウザがこのタグを認識すると、*自動的に前後に空白（インデントやマージン）を挿入して、テキストが整った形で表示されます。*

【参考】：[Search: "pタグ"｜MDN Web Docs](https://developer.mozilla.org/ja/search?q=%EF%BD%90%E3%82%BF%E3%82%B0)

**HTMLでテキストを段落ごとに分ける際は、基本的にpタグを使います。**例えば、ブログ記事や説明文など、複数の段落で構成される文章の場合、各段落をpタグで囲むことで、視覚的に見やすい構成になります。

pタグ\<p>の使い方はシンプルです。以下に基本的な使い方を示します。

```
html
<!-- HTMLコード例 →
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
```

このように、pタグを使うと各段落が個別に分かれて表示され、読みやすい文章を作成できます。

pタグには、以下のようなalign属性、CSSを使用した中央揃え、class属性、id属性などの属性を使用できます。

*【align属性】*
align属性はテキストの整列（左揃え、右揃え、中央揃えなど）を設定するための属性ですが、align属性は非推奨であり、CSSを使用したスタイリングが一般的です。

```
html
<!-- 推奨されない方法 →
<p align="center">中央揃えの段落</p>

<!-- 推奨される方法（CSSを使用） →
<p style="text-align: center;">中央揃えの段落</p>
```

*【CSSを使用した中央揃え】*
外部のCSSファイルや\<style>タグを使用する場合は次のように書きます。

```
/* CSS */
p {
  text-align: center;
}
```

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

*【class属性、id属性】*
classやid属性はCSSと組み合わせてスタイリングやJavaScriptによる制御に使われます。

```
html
<p class="important">重要な情報を含む段落</p>
```

HTMLでJavaScriptを動かすには？Javaについても解説

### pタグを使っても改行しない

HTMLでpタグを用いても、意図したように改行しないケースがあります。以下に、**pタグを用いても改行しない場合の想定原因と対策について記します。**

*◼︎CSSのスタイルの影響*
・CSSで「line-height: 0;」などの設定がされていると、行間がつぶれてしまい、改行が視覚的に確認できなくなることがある
・width属性で要素の幅を固定した場合、内容が幅を超えると自動的に折り返されるが、意図した位置で改行されないことがある
・「display: inline」などの設定により、要素がインライン要素として扱われると、ブロックレベル要素であるpタグの特性が失われ、改行されなくなることがある

以上の対応としては、該当する要素のCSSスタイルを確認し、不要なスタイルを削除するか、修正します。

*◼︎HTML構造の誤り*
・pタグの閉じタグ\</p>が抜けていると、次のpタグまでが1つの段落として扱われてしまう可能性がある
・pタグの中に別のpタグを入れ子にすると、論理的に矛盾が生じたり、階層構造が崩れたりする

pタグの開きと閉じ、入れ子の有無などを確認して、正しい構造になっているかを確認しましょう。

*◼︎ブラウザの表示設定*
・フォントサイズが小さすぎると、1行が長くなり、改行すべきところで改行がされなくなる場合がある
・ブラウザには、HTML、CSS、JavaScriptなどのコードを読み込み、それを画面に表示するためのレンダリングエンジンがあるが、ブラウザによってエンジンが異なり、表示結果が異なる場合がある

この現象では、異なるブラウザで表示して、再現性があるかを確認しましょう。

### pタグを使わないで改行する方法

HTMLではpタグを使わないで改行する方法はあるのでしょうか？段落を区切るために一般的にpタグが使われますが、必ずしも必須ではありません。*状況に応じて、以下のような方法で改行を表現することができます。*

*◼︎brタグを使う*
特定の場所で強制的に改行したい場合には、 brタグ\<br>を使用します。

```
html
<p>これは1つの段落です。<br>
ここで改行します。<br>
新しい行になります。</p>
```

HTMLで改行する方法は？<br>タグや<p>タグの使い方を解説

*◼︎CSSで改行を制御する*
デザインに合わせて柔軟に改行を調整したい場合には、次のようにCSSを用いて改行を制御できます。

・white-space: pre：空白や改行をそのまま表示する
・word-wrap: break-word：長すぎる単語を途中で折り返す
・overflow: hidden; text-overflow: ellipsis;：テキストが要素の幅を超えた場合に省略する

```
css
/* CSSで改行を保持しつつ必要に応じて折り返す */
p {
  white-space: pre-wrap; /* 改行を保持しつつ、必要であれば折り返す */
}
```

*◼︎divタグを使う*
ブロック要素として扱いたい場合には、divタグ\<div>内にコンテンツを配置し、CSSでスタイルを調整します。

```
html
<div>
  これは<br>
  複数の<br>
  行に<br>
  渡る<br>
  テキストです。
</div>
```

pタグ以外にも、brタグやCSSを使って改行を表現できます。それぞれの方法の特徴を理解し、状況に合わせて使い分けることが重要です。

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

brタグ\<br>は「break（改行）」を意味し、強制的に改行を行うためのタグです。段落単位で改行を行うpタグとは異なり、同じ段落内で特定の箇所に改行が必要な場合に使われます。

例えば、詩のように行ごとに改行が必要な場合や、住所の表示などで改行が求められる場合に適しています。

```
html
<p>静かな湖<br>澄みわたる空<br>心安らぐひととき</p>
```

brタグ\<br>は単体で使用するタグであり、\</br>と閉じる必要はありません。また、過度に使用するとレイアウトが乱れる可能性があるため、適度に使うように注意が必要です。


HTMLで文章を記述する際、改行を表現するためにpタグとbrタグを使いますが、この2つのタグは、それぞれ異なる役割を持っています。ここでは、*pタグとbrタグを適切に使い分けるためのポイントを解説します。*

### それぞれのタグの役割を理解する

**pタグとbrタグのそれぞれの役割は次の通りです。**

pタグ\<p>：段落を区切るために使用します。文章の構成を明確にする役割があり、読みやすいテキストを実現します。
brタグ\<br>：行内での強制改行が必要な場合に使用します。

### 段落の区切りにはpタグを、行内の改行にはbrタグを使う

一般的な文章では、*段落ごとにpタグを使い、詩や住所などで行内改行が必要な場合にbrタグを使用します。*ただし、brタグの多用は避けるべきであり、適切な場所でのみ使用するべきです。特に、pタグを使うとブラウザが段落間にスペースを追加してしまうため、注意が必要です。

ここでは、**pタグやbrタグの正しい使い方、間違った使い方の具体例を見てみましょう。**

*【正しい使い方】*
最初に正しい使い方の具体例を紹介します。

HTMLでWebページの文章を表現する際に、適切なタグの使用が重要です。特に、pタグ<p>とbrタグ<br>は、基本的なテキストの整形に役立つ大切な要素です。当記事では、pタグとbrタグの役割と使い方を解説します。HTML入門者の方は参考にしてください。

pタグとbrタグの役割は、pタグ\<p>は段落の区切りに、brタグ\<br>は行内改行に使用

タグの使い分けは適切なタグ選択により、読みやすく整理されたページが作成できる

brタグを段落区切りに使うとレイアウトが乱れやすく、適切な使い分けが重要

HTMLのpタグの適切な使い方とは？brタグとの使い分けも解説

HTML/CSSはWeb制作において欠かせないものです。Webデザインに携わったことがなかったり、業務で目にするものの実際に記述はしたことがなかったりする場合、定義が曖昧になっている方も多いでしょう。

*そこで、まずはHTML・CSSの基礎知識について解説します。*HTMLとCSSの違いやそれぞれの役割・関係、使い方についてまとめていきます。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

HTMLとは、Webページを作成するための言語のことで、タグを使ってWebページの構造を定義します。たとえば、見出しや本文などテキストのレベル分け、表・画像・リンクなどの配置など、Webページに必要な要素を任意に組み立てることが可能です。

HTMLはWebページの骨組みとなる言語で、**HTMLで書かれたソースコードをブラウザに読み込ませることで、ブラウザがHTMLをWebページに変換して表示します。**

HTML入門！初心者向けに基礎コード・文法一覧・勉強方法を解説！

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

なお、HTMLのみでデザインを調整することもできます。CSSがなかった頃は、文章の構造設定・デザイン設定をHTMLだけで行っており、現在も技術的には可能です。

しかし、HTMLでデザイン設定を行うと、ソースコードが長くなり読みにくくなります。ソースコードが読みにくくなると、Webページを修正する際に該当箇所を探すのが困難になってしまいます。

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

CSSとは？概要や基本書式、具体的な記述方法について解説！

「HTML・CSSは難しいのでは？」と気になる方もいるでしょう。**ITエンジニアの方からすれば、HTMLやCSSはそこまで難しくはないと思われます。**基本的な構造がシンプルなので、少なくともPHPやJavaScriptと比べると習得は簡単です。

しかし、タグの種類やプロパティの書き方など覚えることが多いので、HTML・CSSを理解するためにはある程度の学習時間を確保する必要があります。

Web関連の仕事に就きたいと考えている方は、就職・転職活動を行う前に習得して、使いこなせるようになっておくと有利です。未経験からITエンジニアを目指すなら、自分のスキルに合った企業を探してくれる転職エージェントの活用をおすすめします。

<center>[あなたに合った企業選びをサポート致します。<br/>エンジニア転職のご相談はぜひ<br/>*『マイナビIT エージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

では、HTMLとCSSの基本文法を見ていきましょう。HTMLもCSSも基本文法は初心者でも覚えやすいです。実際によく使われる構成要素の例と合わせて解説していきます。

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

### HTMLの代表的なタグと書き方

HTMLは、タグを用いて記述していく言語です。**開きタグと閉じタグ<>を用いてタグの内容を囲み、それらを複数組み合わせることでWebページを構成していきます。**以下のようなものがHTMLタグの代表例です。

~~【図】基本構造を定義するタグ~~

*▪テキストを定義するタグ*（bodyタグ内で使う）

~~【図】テキストを定義するタグ~~

*▪リストを作成するタグ*（bodyタグ内で使う）

~~【図】リストを作成するタグ~~

*▪テーブル（表）を作成するタグ*（bodyタグ内で使う）

~~【図】テーブル（表）を作成するタグ~~

*▪メディアを表示するタグ*（bodyタグ内で使う）

~~【図】メディアを表示するタグ~~

CSSは、**「セレクタ」「プロパティ」「値」の3要素で記述するのが基本です。**基本形は、以下のようになります。

3つの要素はそれぞれ以下の内容を定義する役割を持っています。

▪セレクタ：どの箇所を調整するのか（HTMLタグの種類）
▪プロパティ：どのようなスタイル・デザインを適用させるか
▪値：どのスタイル・デザインにするか、どのくらい調整するか

一部ではありますが、プロパティや値には以下のようなものが使われます。よく使われる代表的な種類です。

*プロパティの種類*
▪font-family：文字の種類
▪font-size：文字サイズ
▪font-weight：文字の太さ
▪color：色
▪height：高さ
▪width：横幅
▪background-color：背景色

*値の種類*
▪blue：青
▪px：ピクセル
▪cm：センチメートル
▪pt：ポイント
▪s：秒

値には、blueなどスタイルの名前や数値が入ります。

例えば、見出し1（h1）の文字色を青にしたい場合、h1{color:blue;}、その段落の文字サイズを20ピクセルにしたい場合、p{font-size: 20px;}となります。複数のプロパティを使う場合は、p{font-size: 20px, color: blue;}のように「,」で区切ります。

CSSでできること一覧！HTMLやJavaScriptとの違い、メリットも解説

HTMLとCSSを組み合わせて使うには、骨子となるHTMLのソースコードにCSSを適用させる必要があります。HTMLにCSSを適用させる方法は次の3つです。

▪*HTMLタグに直接書き込む*（インラインスタイルシート）
▪*headタグに書き込む*（内部スタイルシート）
▪*CSSファイルを読み込む*（外部スタイルシート）

HTMLタグに直接書き込む方法では、CSSを適用させたい箇所に「style="〇〇"」（〇〇はCSSのプロパティと値）を追加してCSSとHTMLをつなげることができます。

```
<h1 style="color: blue;">〇〇</h1>
```

headタグ２を使う方法では、そのページに適用したいCSSのコードをheadタグ内にまとめて記述します。

```
<head>
<style>
h1{color: blue;}
</style>
</head>
```

ただし、CSSはソースコードの可読性を上げるために別ファイルに記述することが多いです。外部のCSSファイルを読み込むやり方については後ほど解説します。

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

### ①テキストエディタとWebブラウザを用意する

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

テキストエディタをインストールしていない方は、メモ帳でもソースコードを記述することができます。

続いて、*HTML・CSSの表示結果を確認するために、Webブラウザが必要です。*Webブラウザの種類はさまざまありますが、特に指定はありません。パソコンにあらかじめインストールされているもので問題ありません。

この2つがあれば、Webサイトを作成することができます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバが必要です。Webサーバは自分で構築したり、レンタルしたりして準備します。今回は作成したWebサイトをパソコンで確認する手順のみ説明しますので、Webサイトの公開方法は割愛します。

### ②HTMLの雛形を作り、ファイル保存する

次に、HTMLの雛形を作ります。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザがHTMLのソースコードを正しく読み込むことができません。

*HTMLには多くのタグがありますが、どのタグを利用する場合も基本的には以下の要素が必要になります。*テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。

```
<html>
<head>
</head>
<body>
</body>
</html>
```

**HTMLは、html要素・head要素・body要素の3要素が軸となっています。**「html」は、この文書がHTMLの文書であることを示すタグです。htmlタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。

「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述します。

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

### ③Webページの内容を記述する

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

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

上記のように記述することで、Webページに「Hello World」という文字列を表示させることができます。

### ④記述内容が正しく表示されるか確認する

**作成したHTMLファイルをブラウザで開き、先ほど記述した「Hello World」が正しく表示されるかどうかを確認します。**作成した「test.html」のファイルをダブルクリックするとブラウザが起動し、「test.html」の記述内容がブラウザで表示されます。

正しく記述できている場合、ブラウザ上に「Hello World」と表示されます。以上で、ここで解説する手順でのHTMLファイルの作成・確認は完了です。

### ⑤HTMLでCSS読み込みの設定を行う

次にCSSファイルを作成していきますが、ここではHTMLにCSSを適用させる方法として外部のCSSファイルを読み込む方法を紹介します。

CSSファイルを作成する前に、HTMLにCSSを読み込ませる設定をします。**CSSを読み込ませるには、HTMLのheadタグにCSSのファイル名を指定します。**ここでは、CSSのファイル名を「test.css」として、次のように記述します。

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

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

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

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

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

## HTMLはホームページを作成するマークアップ言語

**HTMLはホームページを作成するためのマークアップ言語です。**ホームページを表示する際には、HTMLファイルをWebブラウザが解釈して、テキスト、画像、リンクなどのさまざまな要素が組み合わされたページを表示します。

HTMLはホームページの構造を定義し、内容を表示するのに使います。一方、ホームページのレイアウトやデザインを調整するにはCSSが利用されます。

この記事では、HTMLを書いてホームページを作成したい方のために、HTML文書の基本構造や、実際のホームページの作成方法、CSSの概要などについて解説していきます。

HTMLは「HyperText Markup Language」の略で、Webページの基礎となるマークアップ言語であり、インターネット上のほとんどのホームページで使用されています。

*HTMLは、テキストや画像などを含む文書の構成要素に意味を付け、文書を構造化するために用いられます。*

例えば、\<h\>タグを使うと、その部分が見出しであること、\<p\>タグを使うことで、その部分が段落であることを示します。これにより、ホームページの構造やレイアウトを設計することが可能です。

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

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

近年ホームページ作成ソフトウェアや、ワードプレスなどのCMSツールなどの普及により、HTMLを直接書かなくてもホームページを作成することが可能になりました。しかし、これらのツールを使うことで作成者が意識していなくても、HTMLが使用されています。

*そのため、ホームページを作成する際、HTMLの知識を持っていると、自身のアイデアをより自由に表現でき、Webページ作成の幅が広がります。*

ホームページ作成ツールに頼るだけでなく、HTMLの知識を併せ持つことで、より柔軟にホームページを作成したり、問題が発生した場合の対処をしやすくなったりするでしょう。

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

HTMLでホームページを作成するにあたって、まずはHTMLの基礎知識を学びましょう。HTMLの基本的な構造や、さまざまなタグについて解説します。

HTMLは、一定の構造に基づいて記述されます。以下に、基本的な構造を持つHTMLコードを示します。まずは、HTML文書の土台となる要素を解説します。

HTML文書内では、「\<\>」で囲われた「タグ」を使って、文章をマークアップ（意味付け）していきます。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>タイトル</title>
</head>
<body>
  <h1>見出し</h1>
  <p>段落</p>
  <a href="リンク先のURL">リンク文字列</a>
</body>
</html>
```

*■\<!DOCTYPE html\>*
使用するHTMLのバージョンを宣言するためのものです。\<!DOCTYPE html\>と記載することで、現在主流となっているHTML5を使用することを宣言できます。

*■\<html\>~\</html\>*
\<html\>タグはHTML文書の始まりです。上記のコードでは\<html lang="ja"\>となっており、lang="ja"の部分でこのHTML文書で使われる言語が日本語であることも同時に示しています。

\</html\>は\<html\>と対応する閉じタグで、ここでHTMLの記述が終わることを意味しています。

*■\<head\>~\</head\>*
\<head\>タグ内はHTMLの設定を行う場所であり、文字コードの設定やタイトルの設定などが行われます。

*■\<body\>~\</body\>*
\<body\>タグ内は、実際に表示されるコンテンツが記述されます。ホームページを作成する上でメインとなる部分と言えます。例えば、見出しや段落、画像などの要素が\<body\>タグの中に記述され、Webブラウザ上で表示されます。

これらの要素は、HTML文書の基本となるものです。上記のコードをテンプレートにして、\<head\>タグ内の情報や\<body\>タグ内のコンテンツを記載していくのもよいでしょう。

HTMLでは、他にも多くのタグを使ってWebページの構造とコンテンツをマークアップします。よく使う代表的なタグをいくつか説明します。

*■\<h\>タグ*
\<h\>タグは見出しを定義します。実際には「h」の後ろに数字を付けて\<h1\>から\<h6\>という記述で使われ、数値が小さいほど見出しの重要度が高くなります。

*■\<p\>タグ*
\<p\>タグは段落を定義し、\<p\>～\</p\>で囲われた部分は1つの区切りを持つ文章のまとまりを意味します。

*■\<br\>タグ*
\<br\>タグは改行を意味します。記述することで文章を途中で区切って、次の行の頭から続きの文章が続きます。\<br\>タグには閉じタグはなく、\<br\>単体で改行を意味します。

*■\<img\>タグ*
\<img\>タグは、ホームページ内に画像を表示するためのタグです。src属性に画像のURLを指定します。\<img\>タグには、閉じタグはありません。

*■\<a\>タグ*
\<a\>はリンクを定義し、href属性にリンク先のURLを指定します。これを使うことで、ブラウザ上で文字列をクリックすると別のページへ移動する「ハイパーリンク」を実装できます。

*■\<table\>タグ*
\<table\>タグは、表形式のレイアウトであるテーブルを定義します。\<table\>～\</table\>内に、行を意味する<tr>タグ、セルを意味する\<td\>タグを並べてテーブルを構成します。

## HTMLでホームページを作成する手順

それでは、HTMLで実際にホームページを作成する方法を解説します。順を追って1つずつ行っていけば、思っていたより簡単にホームページが作成できることが分かるでしょう。

*HTMLでホームページを作成するためには、HTMLを書くためのテキストエディタが必要です。*

Windows標準アプリの「メモ帳」でも作成可能ですが、コードが見やすい色変更機能やエラー表示を持つテキストエディタを使用すると、より効率的にHTMLを作成できます。

例えば、HTML編集でよく使われるテキストエディタには、サクラエディタやTeraPad、Notepad++、Visual Studio Codeなどがあります。

また、HTMLの表示確認にはWebブラウザが必要です。作成したHTMLファイルの表示とコーディングの結果確認に使用します。

代表的なものにMicrosoft Edge、Google Chrome、Mozilla Firefox、Safariなどがあります。ブラウザにより表示が違う場合もあるため、できるだけ多くのブラウザで確認できることが望ましいでしょう。

テキストエディターとは？エンジニア初心者におすすめのエディタも紹介！

実際にHTMLファイルを作成してみましょう。

まずはテキストエディタを開いて、「HTMLの基本的な構造」で示したHTMLコードをコピーして貼り付けます。

次に、自分が作りたいホームページの内容を編集していきます。例えば、大見出しの文章の後に、中見出しと文章が続くページを作成する場合は、\<body\>～\</body\>内に以下のように書きます。

```
<body>
  <h1>大見出し</h1>
  　<p>段落</p>
　<h2>中見出し</h2>
  　<p>段落</p>
</body>
```

HTMLの記述が終わったら、ファイルを保存します。ファイル名は、例えば「sample.html」のように「（半角英数字の名前）.html」として保存します。これでHTMLファイルが作成されます。

HTMLファイルを作成したら、ブラウザで表示を確認しましょう。
作成したHTMLファイルをダブルクリックすると、既定のブラウザが起動し、HTMLファイルが表示されます。

表示されたページには、記述した大見出しと中身見出しの文章が表示されているでしょう。まだ文字だけでシンプルな表示ですが、ここからさらにHTMLを追記して、自分のホームページのコンテンツを充実させていくことができます。

*このように、HTMLを記述してブラウザで表示を確認することで、作業の結果を確認しながらホームページを作成していきます。*

### HTMLファイルをアップロードする

HTMLファイルを作成したら、次はインターネット上に公開します。*そのためには、作成したHTMLファイルを、サーバにアップロードする必要があります。*

一般的に、サーバはレンタルサーバを借りて利用します。レンタルサーバは、インターネット上にファイルを置いておくための場所です。

レンタルサーバは、作成するホームページの規模にもよりますが、個人向けの小規模なサイトであれば、まずは低価格のプランでも十分でしょう。レンタルサーバ会社によっては申し込み前の試用期間もあるので確認してみてください。

サーバをレンタルしたら、FTPソフトを使ってHTMLファイルをアップロードします。

FTPソフトは、ファイルをサーバに転送するためのソフトウェアです。FTPソフトにはさまざまな種類がありますが、広く使用されているものとして、Windows用のFFFTP、Win・Macどちらでも使えるFileZillaなどがあります。

サーバにファイルをアップロードしたら、ホームページを表示してみましょう。ホームページのURLは、レンタルしたサーバの管理画面で確認できます。

ブラウザにアップロードしたHTMLファイルの内容が正しく表示され、問題がなければ作業は完了です。

## HTMLでホームページを作成する際のポイント

ここでは、HTMLでホームページを作成するときのコツを説明します。これらを意識することで、よりスムーズにホームページ作成を進められるでしょう。

### 作りたいホームページを明確にする

HTMLの記事（1ページ目）