## HTMLのコメントアウトの書き方

*HTML（HyperText Markup Language）は、マークアップ言語の1つでウェブサイトのコンテンツを作成するために用いる言語です。*HTMLはそれぞれのタグに意味合いを持たせて、コンテンツを構成しています。ここでは、HTMLで用いるコメントアウトについて、学んでいきます。

【参考】：[MDN Docs: HTML: ハイパーテキストマークアップ言語](https://developer.mozilla.org/ja/docs/Web/HTML)
【参考】：[MDN Docs: Comment](https://developer.mozilla.org/ja/docs/Web/API/Comment)

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

### そもそもコメントアウトとは

*コメントアウトとは、プログラミング言語などにおいて注釈を追記するために定義される文法上の規約を指します。*

プログラム実行時に解釈から除外されるため、プログラムコードの使い方や説明などを記載する際に使用します。プログラムが複雑になるとデバッグも大変になることから、デバッグコードを埋め込んで使用し、仕様終了後はコメントアウトすることで無効化させることもできます。

### HTMLのコメントアウトの実際の使い方

*HTMLは、マークアップ言語で文書の構造を定義するものですが、注釈を残す目的でコメント機能を使用することができます。*使い方は簡単で、 ”<!\-\-” と ”\-\->” で囲んだ部分はコメントと解釈されます。具体的には、次のように使用します。

```
```

コメント機能で記述したテキストは、ブラウザなどの通常の閲覧時には、表示されない特徴があります。ただし、ソースビューで表示した場合は、コメント部分を閲覧することができます。

ソースビューで表示させないためには、コメントを難読化したりJavaScriptの外部ファイル呼び出しに代えたりなどの工夫が必要です。

### HTMLのコメントアウトを複数行で使うには

HTMLのコメントアウトは、単純な構造で ”<!\-\-” と ”\-\->” で囲んだ部分がコメントです。*そのため、1行だけコメントアウトする場合と複数行のコメントアウトとの違いがありません。*複数行のコメントアウトに用いるには、次のように使います。

```
```

もちろん次のように、タグを含むHTMLをまとめてコメントアウトすることもできます。

```
<html>
 <head>
 <title>ウェブのタイトル</title>
 </head>
 <body>
  
 </body>
</html>```

### HTMLのコメントアウトの注意点

*HTMLのコメントアウトは単純なので、基本を理解し注意して使用する必要があります。*具体的には次の2点を抑えておきましょう。

・*HTMLのコメント機能はソースビューで閲覧できる*
最初に理解しておくことは、HTMLのコメント機能はソースビューで閲覧できることです。コメント機能にHTMLの概要を入れておくと保全性が高まりますが、社内の機密情報となるデータソースやアクセス情報などはコメントを残すと情報漏洩リスクがあります。

個人情報などの機微情報についても、うっかり記載しないように注意しましょう。

・*コメントのタグは入れ子ができない*
コメントのタグは、 ”<!\-\-” と ”\-\->” で囲むだけです。シンプルな構造のため、コメントアウトしている部分をさらにコメントアウトするなどの入れ子には対応しません。入れ子にしてしまうと最初の ”<!\-\-” でコメントが開始し、最初の ”\-\->” でコメントが終了します。

それ以降の記述はブラウザにそのまま表示されるため、不要なコメント内容がブラウザに表示されることに繋がります。

・*ハイフン2つをコメント内に記述しない*
HTMLと類似するXMLではハイフン2つは、コメントに記述できません。共通するパーサーを用いるブラウザでは、規約上のエラーとなり、コメント終了など予期しない表示となる場合があります。HTMLにおいても、このエラーを避けるために、ハイフン2つの使用は避けるのが良いでしょう。

また最新のHTML仕様Living Standardでは、コメントのテキスト部分は ”>” や ”->” で始めてはならないとしています。関連して覚えておくと良いでしょう。

【参考】：[HTML Living Standard: Comments](https://html.spec.whatwg.org/multipage/syntax.html#comments)

XMLとは？詳細や特徴、メリット・デメリットを徹底解説！

## HTMLのコメントアウトの高度な利用方法

ウェブページはこれまでの静的なコンテンツ表示から、動的なコンテンツを装飾しながら表示させるなどインタラクティブな用途に用いられています。このことから、HTML単体で使用されるのではなく、CSSやJavaScriptと組み合わせて用いることが多いでしょう。

*特にHTML5からは、HTMLが文書の構造を示し、CSSはテキストの表示や装飾を担当していることからコメントアウトの組み合わせについても理解しておくと良いでしょう。*

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

### HTMLのコメントアウトをCSSと組み合わせて使用する

*CSSは、スタイルシートなどでテキストを装飾するために使います。*コメントアウトは、 ”/\*” でコメントが始まり、 ”\*\/” でコメントが終了します。単一行、複数行それぞれに用いることができます。コメント機能の文法は、タグではなくC言語の形式をとります。

```
/* これは単一行のコメントです */
 
/*
 これは複数行のコメントです
 これも複数行のコメントです
*/```

実際の使い方は、次のようにHTMLとCSSを一緒に使います。

```
<!DOCTYPE html>
<html>
<head>
<title>HTMLとCSSのコメント機能の使い方</title>
<style>
body {
  background-color: lightblue;
}
/* 次のh1の色はページの表示でどちらかを選択します */
/*
h1 {
  color: white;
  text-align: center;
}
*/
h1 {
  color: blue;
  text-align: center;
}
 
</style>
</head>
<body>
 
<h1>HTMLとCSSのコメント機能</h1>

<p>テキストが表示されます</p>
 
</body>
</html>```

上の例では、 ”\<style\>” と ”\</style\>” の間がCSSです。その中では ”/\*” と ”*/” の間にコメントを記述します。上記タグ以外は、HTMLの規約にしたがってコメントを記述しています。

【参考】：[MDN Docs: CSS コメント](https://developer.mozilla.org/ja/docs/Web/CSS/Comments)

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

### HTMLのコメントアウトをJavaScriptと組み合わせて使用する

*JavaScriptは、動的なコンテンツを生成するために用います。*コメントアウトは、単一行向けと複数行向けにそれぞれ機能が提供されています。単一行は ”\/\/” 、複数行は ”/\*” から ”\*\/” までで表します。C++のコメント機能と同じ用法をとります。単一行のコメント機能は、以下の通りです。

```
// コメントです
// コメントです```

複数行のコメント機能は、以下の通りです。

```
/*
 この行はコメントです
 この行もコメントです
*/```

```
<!DOCTYPE html>
<html>
<head>
<title>HTMLとJavaScriptのコメント機能の使い方</title>
</head>
<body>
 
<h1>HTMLとJavaScriptのコメント機能</h1>

<p>テキストが表示されます</p>
<button type="button" onclick="check_click()">

クリックしてみて!
</button>
<script>
  function check_click() {
    /*
     次のように文章をいくつかの候補から選んでください
     */
    //alert('クリックされたよ！');
    alert('クリックしたのは誰だ？');
  }
</script>
</body>
</html>```

上の例では、 ”\<script\>” と ”\</script\>” の間がJavaScriptで、コメントアウトの使い方はJavaScriptの用法に従います。上記以外の場所では、HTMLの規約に従います。

【参考】：[MDN Docs: JavaScript 字句文法](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Lexical_grammar)

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

JavaScriptの入門！その概要や文法の基礎について解説！

### HTMLのコメントアウトをCSSとJavaScriptと組み合わせて使用する

*HTMLを動的に見栄えが良いウェブサイトにするには、HTMLとCSS・JavaScriptを組み合わせて使います。*ここでは仕上げとして、HTMLのコメントアウトをCSSとJavaScriptと組み合わせて使用します。使い方は、ここまでに紹介したサンプルの組み合わせを見ていきましょう。

```
<!DOCTYPE html>
<html>
<head>
<title>HTMLとCSS・JavaScriptのコメント機能の使い方</title>
<style>
body {
  background-color: lightblue;
}
/* 次のh1の色はページの表示でどちらかを選択します */
/*
h1 {
  color: white;
  text-align: center;
}
*/
h1 {
  color: blue;
  text-align: center;
}
 
</style>
</head>
<body>
 
<h1>HTMLとCSS・JavaScriptのコメント機能</h1>

クリックしてみて!
</button>
<script>
  function check_click() {
    /*
     次のように文章をいくつかの候補から選んでください
     */
    //alert('クリックされたよ！');
    alert('クリックしたのは誰だ？');
  }
</script>
</body>
</html>```

この場合は、HTMLの記述と、CSS・JavaScriptが混在します。 ”\<style\>” から ”\</style\>” までがCSS、 ”\<script\>” から ”\</script\>” までがJavaScriptです。混同しないように用法の違いに注意しましょう。

## HTMLのコメントアウトは簡単で使い勝手が良い

HTMLは、ウェブサイトのコンテンツ作成には欠かせない言語です。動的なコンテンツにはJavaScriptを、見栄えの調整はCSSを組み合わせます。**組み合わせて使用することから、コメントアウトに関してもそれぞれの用法や規約を理解しておくと、手際よくコンテンツ作成が可能となるでしょう。**

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

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

HTMLエラーチェッカーは必須？ミスの予防＆品質向上に最適！

ウェブサイトのリッチコンテンツ化にともなって、HTMLのみならずCSSやJavaScriptに関しても知識が必要となってきます。ここでは、HTMLのコメントアウトの使い方や注意事項を、CSSやJavaScriptの使い方も交えて解説していきます。

HTMLのコメントアウトはシンプルで、単一行や複数行に使用できます

CSSやJavaScriptもそれぞれの規約に従ってコメントアウトを行います

HTMLとCSS・JavaScriptを組み合わせて使用することもできます

HTMLのコメントアウトの書き方は？使い方と注意事項を解説

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

- [HTMLでできることは少ない？できないことやタグも一覧でまとめた](https://and-engineer.com/articles/YV1ZtxAAACn9LtD9)

- [HTMLのdivタグとは？読み方・目的・使い方などを解説！](https://and-engineer.com/articles/YUmP1hAAACUA1NVs)

**HTML5は2021年1月28日に廃止されました。**この記事を見てドキッとした人もいるのではないでしょうか。廃止の影響があるのか？あるいは今後も使えるのか？と、大変気になります。HTML5の廃止により、今後の影響がどうなるのか心配な人に向けて解説します。

HTMLとは？今さら人に聞けないその概略や役割を解説！

**HTML5とは、ハイパーテキスト記述言語（HyperText Markup Language）の5回目の改訂版**を指します。HTMLの仕様はWeb Hypertext Application Technology Working Group（WHATWG）が策定し、World Wide Web Consortium（W3C）で勧告されています。

HTML 5.1以降はHTML Living Standardに基づいており、現在最新の仕様はHTML 5.2を勧告後、HTML Living Standardに統合され仕様統一されています。

【参考】[WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/)

HTMLは5回の仕様改訂を重ね、5回目の仕様改定でHTML5となりました。以下はオリジナル版からの仕様バージョンの変遷です。

・*オリジナルHTML*
　1989年にCERNで考案され、1990年にコードが開発されました。

・*HTML 1.0*
　1993年IETFによりオリジナルHTMLに従い、仕様化されました。

・*HTML 2.0*
　1995年IETFにより、RFC1866後にRFC2854として仕様化されました。
　以降のバージョンはW3Cが管理することになりました。

・*HTML 3.2*
　1997年W3C勧告により仕様化されました。

・*HTML 4.0、4.01*
　それぞれ1997年・2018年W3C勧告により仕様化されました。

・*HTML 5.0、5.1、5.2*
　それぞれ2014年・2016年・2017年W3C勧告により仕様化されました。

上記の通り、オリジナルHTMLからHTML 4.01までは定期的に仕様が改定されています。しかし、HTML 4.0からHTML5までは7年経過しています。**W3CはHTMLの仕様変更を望まなかったため、その間2004年にWHATWGが開発と仕様化を進めました。**

【参考】[W3C Hypertext Markup Language (HTML)](https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt)
【参考】[ITEF Hypertext Markup Language - 2.0](https://datatracker.ietf.org/doc/html/rfc1866)
【参考】[W3C HTML 3.2 Reference Specification](https://www.w3.org/TR/2018/SPSD-html32-20180315/)
【参考】[W3C HTML 4.0 Specification](https://www.w3.org/TR/REC-html40-971218/)
【参考】[W3C HTML 4.01 Specification](https://www.w3.org/TR/html40/)
【参考】[W3C HTML5](https://www.w3.org/TR/2018/SPSD-html5-20180327/)

*WHATWGとは、Web Hypertext Application Technology Working Groupの略です。*WHATWGはアップル社・Mozilla Foundation・オペラソフトウェア社が設立したコミュニティで、開発ベンダ視点でHTMLを改善する活動を行っています。

2007年からはアップル社・グーグル社・マイクロソフト社・Mozilla社が共同運営しており、**ウェブブラウザに実装する技術の標準化作業を担当**しています。

【参考】[Welcome to the WHATWG community](https://whatwg.org/)

HTML Living Standardとは、WHATWGによって策定されたHTMLの規格です。**W3CのHTML5は2021年1月28日に廃止されたので、HTML Living Standardが唯一の標準規格**となります。

【参考】[HTML Living Standard](https://html.spec.whatwg.org/multipage/)

これまでの仕様一元化の流れをおさらいします。

W3CがHTML5でWHATWGと異なる仕様を盛り込んだことや、開発者寄りではない仕様化を進めたために、両団体の仕様がそれぞれ存在することになりました。これを解消するため、ウェブブラウザ開発ベンダが中心となり立ち上げられたWHATWGのHTML Living StandardがHTMLの標準規格として存続することになりました。

両団体は2019年5月、**仕様を統合し単一化することに合意し発表しました。**合わせて*利用者・開発者の視点に立ったオープンウェブプラットフォームに向けた活動を行うことを表明*しました。

【参考】[W3C AND THE WHATWG SIGNED AN AGREEMENT TO COLLABORATE ON A SINGLE VERSION OF HTML AND DOM](https://www.w3.org/blog/news/archives/7753)

【参考】[W3C AND WHATWG TO WORK TOGETHER TO ADVANCE THE OPEN WEB PLATFORM](https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/)

*HTML5のベースとなっているHTMLは、ハイパーテキスト記述言語です。*ハイパーテキストとは、複数の文書を相互参照するためのリンク（ハイパーリンク）機能を有する仕組みを指します。ハイパーテキストはWeb（World Wide Web）を始めとするウェブ系システムで標準利用されています。

現在、2021年1月にWHATWGのHTML Living StandardがW3Cによって勧告されており、ダブルスタンダードが廃止されたことで統一化がなされました。HTML Living Standardの仕様ドキュメントを見ると**「HTML Living Standardは一言で言うとHTML5である」**と説明しています。

つまり、HTML Living StandardはHTML5の代替規格ではなく、「広義のHTML5である」と言えます。

### HTML5とHTML4のそもそもの違い

HTMLは従来コンテンツの構造と見栄えを合わせて指定できましたが、現在は**文書構造をHTMLが担当し、見栄えをCSSが担当する**ことで役割を分離しました。

HTML4ではこれまで同様文書構造を表すために利用されていたものの、ウェブサイトの高機能化によりリッチウェブアプリケーションとして用いられることが増えました。そこでHTML5はHTML4と後方互換性を維持しながら、文字エンコーディング・DOCTYPE・言語要素・マルチメディアコンテンツ用言語要素の多くの機能改善が図られています。詳細は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/)

### HTML5とHTML Living Standardの違い

これまでに**HTML Living StandardはHTML5である、と言いましたが、実はHTML5.2と比べるといくつか違いがあります。**HTML Living Standardは日々改訂されているため、最新の仕様は公式サイトで確認してください。

公式サイト以外でも、Mozillaのデベロッパーサイトではタグで用いる要素や属性がどの仕様に基づいているのかを公開しています。MozillaはWHATWGの設立メンバーのため、正確な情報が得られます。

【参考】[MDN Web Docs HTML: HyperText Markup Language](https://developer.mozilla.org/ja/docs/Web/HTML)

HTML5以前を含めHTML Living Standardで廃止または非推奨となっている要素は、Mozillaデベロッパーサイトで公開されています。

【参考】[HTML 要素リファレンス 廃止または非推奨の要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element#obsolete_and_deprecated_elements)

以下に、Mozillaデベロッパーサイトに掲載されているタグで用いる要素の中で、2022年3月現在、廃止または非推奨となっている要素を分類しました。廃止タグに加えて代替の要素・回避策も記載しましたので、参考にしてください。

・*HTML Living Standardで仕様化された要素*
　\<hgroup>→アウトラインアルゴリズムは実装されておらず、影響なし

・*HTML 5.2の仕様に基づく要素*
　\<applet>→\<object>で代替
　\<rtc>→\<rt>で代替

・*HTML 5.1の仕様に基づく要素*
　\<keygen>→ほとんどブラウザで実装されていないため影響なし
　\<menuitem>→\<input>で代替

・*HTML 5.0の仕様に基づく要素*
　\<noframes>→\<iframe>を推奨
　\<rb>→\<rt>で代替
　\<tt>→ \<code> \<kbd> \<samp>\<var>あるいは\<pre>を使用

・*HTML 4.01の仕様に基づく要素*
　\<acronym>→\<abbr>で代替
　\<big>→CSSプロパティのfont-sizeで代替
　\<frame>\<frameset>→\<iframe>を推奨
　\<noembed>→\<object>を使用

・*HTML 3.2の仕様に基づく要素*
　\<basefont>→\<font>\<font-family>\<font-size>\<color>で代替
　\<center>→CSSプロパティのtext-align・margin-left・margin-rightで代替
　\<dir>→\<ul>で代替
　\<font>→CSSのFontを使用
　\<strike>→\<del>\<s>で代替

・*HTML 2.0の仕様に基づく要素*
　\<xmp>→\<pre>や\<code>の使用

・*HTML 1.0の仕様に基づく要素*
　\<plaintext>→\<pre>や\<code>の使用

・*DOMの仕様*
　\<marquee>→後方互換性維持のため現状動作します

・*IEのみで使用*
　\<bgsound>→\<audio>で代替

・*Netscape Navigatorのみで使用*
　\<nobr>→CSSプロパティのwhite-spaceで実装

・*仕様外の要素*
　\<blink>→CSSコード記述で代替
　\<content>→DOMの\<slot>で代替
　\<image>→\<img>で代替
　\<shadow>→ほとんどのブラウザで実装されていないため影響なし
　\<spacer>→CSSで代替

## 新標準のHTML Living Standardが学べるおすすめの本

ここでは、**新標準であるHTML Living Standardについて学べるおすすめの本を紹介**します。新規で追加されたタグや廃止されたタグの代替方法はもちろん、Webページ制作の基本についても学べます。これからWebページの作成やデザインを学びたい方にもおすすめです。

### できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応

**HTML Living Standardの仕様に基づいたタグに加えて、CSS3・CSS4のプロパティがすべて掲載されています。**500ページ以上というボリュームですが、目次以外にも要素名・プロパティ名のインデックスがあるため、調べたい情報を探しやすいです。

また、サンプルコードも多数掲載されているため、実際にWebページを作成してデザインや動作を確認できます。なお、読者限定特典でサンプルコードを無料でダウンロード可能です。

【参考】[できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応 - インプレスブックス](https://book.impress.co.jp/books/1119101084)

### これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本

**豊富なイラストや図解でわかりやすくHTML・CSSの基本が学べる、Webデザインの初心者の方におすすめの本**です。HTML Living Standardの新標準に基づいた内容となっており、Webデザインの基礎知識がない方でもWebサイトを0から作成できるようになります。実際にWebサイトを作成する手順が記載されており、楽しく学べるので挫折しにくいでしょう。

【参考】[これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本（Capybara Design 竹内 直人 竹内 瑠美）｜翔泳社の本](https://www.shoeisha.co.jp/book/detail/9784798170114)

HTML/CSSを費用をかけずに学べるおすすめの入門書5選！

## HTML5廃止は仕様統一の始まり、しっかりと最新仕様を理解しましょう

HTML5の廃止はこれまでの仕様策定の混乱を抑えるために、W3CとWHATWGが合意の上で**HTML Living Standardに仕様を一本化**しました。しかし、WHATWGが「HTML Living StandardはHTML5である」と説明していることや、HTML5が広く認知されていることなどから今後もHTML5と呼ばれることが多いでしょう。

なお、*HTML Living Standardは頻繁に仕様が改訂されるため、開発者としてはしっかりと仕様を理解することをおすすめします。*

HTML5は2021年1月28日に廃止されました。これまではW3CとWHATWGの仕様がそれぞれ存在していました。今回はHTML5廃止では何が起きているのか？なぜ廃止され、いつからなのか、今後の影響があるのか？等について、廃止に関連する仕様統一の流れについて解説します。

W3Cが規格勧告したHTML5は、2021年1月28日に廃止されました

以降はWHATWGが規格策定するHTML Living Standardに仕様が一本化します

WHATWGではHTML Living Standardの仕様はHTML5であると説明しており、今後も仕様改訂がされます

HTML5はなぜ廃止された？いつからなのか、仕様変遷も紹介！

HTMLを記述する場合に、改行する方法がいくつかあります。
主な方法として\<br>タグを使用して改行する方法がありますが、br以外にも\<p>タグなどのブロック要素タグを使う方法や、\<pre>タグで改行する方法などがあります。

これらの改行の方法は、HTML文書内での改行の意味合いによって使い分けることが重要です。

この記事では、HTMLの改行の方法や使い分け方を知りたい方のために、HTMLの改行の役割・様々な改行の方法・CSSによる改行の調整などについて解説します。

HTMLのコードを記述する時にキーボードで入力した改行は、HTML文書を表示させた際には通常無視されます。

*そのため、改行タグを使用するなどして文章の中で改行を行うことを明示する必要があります。*

改行を明示的に表すのが\<br>タグや\<p>タグなどを使う方法です。文章の見た目を整えるために、改行をCSS（Cascading Style Sheets）で制御することもできます。

HTMLでよく使われるのは\<br>タグを使う改行です。段落を区切らずに改行を挿入したい場合に利用され、文章の中で次の行に移ることができます。

もう1つの改行の種類として、\<p>タグを始めとしたブロック要素の区切りを表す改行です。ひとまとまりの文章全体を段落で区切るために使用されます。これによって、文章が段落ごとに区切られ、読みやすくなります。

*主な違いは、\<br>タグが文章内での単純な改行を意味するのに対し、\<p>タグなどのブロック要素は段落を作成して段落の論理的な構造を示すために使われるということです。*

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

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

### 適切な改行を意識する必要性とは

\<br>タグで改行ができるのであれば、すべて\<br>タグを使えばいいと思うかもしれません。しかし、それではHTMLの構造を明確にすることができず、分かりにくい文書になるでしょう。

**HTMLで適切な方法による改行を行うことで、HTML文書が構造化され、可読性が向上します。**これによりWebページや文書の読者がより内容を理解しやすくなるのです。

また、誤った改行方法を用いると、検索エンジンのクローラビリティを低下させてSEOに影響を及ぼすともいわれています。そのため、HTMLでは適切な改行を意識する必要があるのです。

ここでは、最も簡単に文章の中で改行を入れることができる\<br>タグについて解説します。使用方法や、\<br>タグで改行する意味、\<br>タグを使う場合の注意事項について説明します。

*HTML内でテキストを改行したい箇所に\<br>タグを記入することで改行されます。*\<br>タグを使用すると、改行したい場所でテキストを分割し、次の行の先頭からテキストが再開されます。

```やあ。
こんにちは。<br>
今日はいい天気ですね。
```

```やあ。こんにちは。
今日はいい天気ですね。
```

HTMLのコードを記述する際、単純にEnterキーを押しただけでは、HTMLの表示のときに改行されません。そのため、上記の例で「やあ。」と「こんにちは。」は同一の行に表示されます。

\<br>タグを記述することで、「こんにちは。」のあとに改行が挿入され、続く文章は次の行の先頭から始まります。

「改行」を英語で「line break」と表現することから、\<br>はこの「break」を略したものです。

### ＜br＞タグで改行する意味とは

文章を書いていると、1行が長くなって文章が読みづらくなることがあります。*その時に、\<br>タグによる改行を使用して行を変えることで、文章を区切って読みやすくします。*

改行をどの程度の頻度で入れるかは、その文書自体の求められ役割や文体、書く人の書き方にもよるため、明確な基準はありません。しかし、適切な改行を入れることで文章のリズムが整い、より明瞭に文章の意味を伝えることができます。

### ＜br＞タグで改行する場合の注意点

\<br>タグを使用すれば簡単に改行を挿入できますが、\<br>タグを使う際にはいくつかの注意点があります。

\<br>タグを連続で使用すると、何も文字がない空の行を入れることができます。*しかし、文章のまとまりを意味する段落の間を開けるために\<br>を連続して使うことは避けましょう。*段落を区切るときは、後述する\<p>タグなどのブロック要素で文章を囲むことが推奨されています。

行間の余白を調整するために\<br>タグを連続で使用するのも避けるべきです。\<br>タグでレイアウトを調整しようとしても、ユーザの閲覧環境によって行間の広さが変わったり、文字サイズによって改行位置がおかしくなったりしてテキストが読みづらくなる場合があります。

## ＜p＞タグなどのブロック要素で改行する

次は、\<p>タグなどのブロック要素を使用して改行する方法です。まずブロック要素について説明し、改行する方法や意味合い、注意点について解説します。

*HTMLのブロック要素はページの構造を形成する要素です。*開始タグと終了タグがセットで使用され、ページ全体の構造やセクション、大きなコンテンツの区切りなどを表します。ブロック要素の種類には、以下のようなものがあります。

*■\<p>タグ*
\<p>タグは、文書内で段落を区切るために使います。\<p>は「paragraph」（パラグラフ）の頭文字です。

\<p>タグで分ける段落は、長い文章を意味のまとまりである程度の文章で分けたものです。文章の言いたいことがひと区切り付いたら段落を分けるのが一般的です。

*■\<div>タグ*
\<div>タグは、特に意味を持たない文章の1区切りを表します。\<p>タグでは文章的に意味のある段落に分けますが、\<div>タグではHTML作成者が意図する区切りで自由に文章を一括りにすることができます。

例えば、一定の範囲を\<div>タグで括ってCSSを適用するなどの使い方が考えられます。ただし、\<div>タグを多用してしまうことで文書の意味が分かりづらくならないように気を付ける必要があります。

*■\<h1>タグ～\<h6>タグ*
hタグは、HTML文書の中で見出しを意味するタグです。\<h1>から\<h6>まであり（h1・h2・h3・h4・h5・h6）、数字が大きいほど大きな見出しを表します。

*■\<table>タグ*
\<table>タグは、行と列の組み合わせで表を作成するためのタグです。行を表す\<tr>タグ、ヘッダー行を表す\<th>タグ、セルを意味する\<td>タグと一緒に使われます。

### ブロック要素で改行する方法

ブロック要素は、HTML内で縦に並ぶ性質を持っています。

そのため、開始タグでブロック要素を開始し終了タグを記述すると、それ以降の内容は次の行から始まります。つまり、改行された状態になります。

例えば\<p>タグを使用すると、内容を\<p>の開始タグと終了タグで囲めば改行することができます。

```<p>こんにちは。</p>
<p>今日はいい天気ですね。</p>
```

```こんにちは。
今日はいい天気ですね。
```

### ブロック要素で改行する意味とは

ブロック要素は、HTMLの構造を形作るために使用されます。*それぞれのブロック要素が持つ意味を理解して使い分けることで、セクションや内容をグループ化することができます。*

また、ブロック要素を組み合わせてHTML文書全体を構造化することで、CSSを使った統一感のあるスタイルの適用が可能です。

そのため、ブロック要素を用いた改行をすることは、意味のまとまりのあるブロックが終わり、次のブロックが始まることを意味するといえるでしょう。

### ブロック要素で改行する場合の注意点

*ブロック要素を使う場合は、そのブロックが持つ意味をよく考えて使うようにしましょう。*特に\<p>タグや\<div>タグはコードの記述者にとって自由に使いやすいブロックですが、文章の構成を意識して使わないとまとまりがない文書になってしまいます。

また、ブロック要素内での改行は\<br>タグで行いますが、ブロック要素自体の最後に改行が挿入されるため、\<br>タグと重複して意図しない余分なスペースが入らないように気を付けましょう。

他にHTMLで改行する方法として、\<pre>タグで改行する方法があります。\<br>タグや、\<p>タグなどのブロック要素とは意味合いが異なりますので、詳しく解説していきましょう。

\<pre>タグとは、整形済みテキストを表します。*つまり、通常HTMLコードの中では改行しても表示されないか半角スペースに置き換えられますが、\<pre>タグ内で改行すると、その箇所に改行が挿入されます。*

改行だけでなく、半角スペースやタブなどもそのまま表示されます。\<pre>タグで囲った文章は、コーディングした形のまま表示されるのです。

```<pre>
こんにちは。
今日はいい天気ですね。
</pre>
```

### ＜pre＞タグで改行する意味とは

*\<pre>タグは、主にプログラミングのソースコードなどを表示する際に使用します。*記載したテキストがソースコードであることを意味する\<code>タグと一緒に使われることもよくあります。

### ＜pre＞タグで改行する場合の注意点

\<pre>タグで使用できる改行は、\<br>タグや\<p>タグなどを使った文章や段落の区切りで使用する改行とは異なります。*意味としては、整形済みコードが含んでいる改行が表示されているだけといえるでしょう。*

そのため、HTML文書の中で単純な改行を挿入するために\<pre>タグを使うことはないと考えていいでしょう。その場合は\<br>タグや\<p>タグなどを使って改行しましょう。

HTMLのレイアウトを整えるために、CSSが使用されます。CSSではWebページ内の文字の色や大きさ、背景などの要素を設定することができ、改行の調整を行うこともできます。

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

whitespaceはCSSのプロパティの1つで、改行・半角スペース・タブをどのように表示させるかを設定することができます。normal・nowrap・pre・pre-line・pre-wrapの5つの値があります。

*■normal*
HTMLの一般的な表示です。\<br>タグを使用した時や、文章が画面の横幅に到達したときに改行されます。

*■nowrap*
\<br>タグを使用した時は改行されますが、文章が画面の横幅に到達しても改行されません。

*■pre*
HTMLコード内で行われた改行が反映されます。文章が画面の横幅に到達しても改行されません。

HTMLの記事（1ページ目）