HTML での改行方法
この記事では、HTML コードの行を分割する 3つの方法について説明します。改行は通常、そこから新しい行を開始することを意味します。
<br> タグを使用して HTML の行を分割する
<br> タグを使用して、HTML コードの行を分割できます。HTML コードの <body> 内に任意の文字を入力し、行を変更する場合は、コンテンツの直後にタグ <br> を使用して、コンテンツの入力を再開します。<br> の代わりにタグ <br/> タグを使用することもできます。これにより、上記と同じ結果が得られます。さらに、2つの改行を挿入する場合は、<br> タグを 2 回入力できます。これは、必要な改行の数を意味します。同じ回数、<br> タグを入力する必要があります。
たとえば、HTML 本文内に、選択したテキストを記述します。行を区切りたいテキストの後に <br> タグを使用します。これにより、残りの読者が他の行に移動します。テキスト内の任意の場所でタグを 2 回連続して使用します。
以下の例では、HTML コードの特定のテキストの後に新しい行を作成します。以下のコードの HTML 本文内の最初の文の後に、タグ <br> が行を区切ります。その結果、残りのテキストは次の行に切り替わります。この行を完了した後、<br/> タグが 2 回使用されます。これは、行が 2 回壊れていることを示しています。
サンプルコード：
<body>
Hi, I am here to learn how to break the line in HTML. <br> In this method, I'm using the br tag. <br/> <br/> I would like to be a good programmer in the future.
</body>
出力：
Hi, I am here to learn how to break the line in HTML.
In this method, I'm using the br tag.
I want to be a good programmer in the future.
<pre> タグを使用して HTML の行を分割する
HTML 本文内で <pre> タグを使用して行を分割することもできます。この方法は、上で説明した方法とは少し異なります。<pre> 要素は、入力したとおりにテキストを表示するのに役立ちます。<pre> タグ内で、必要な場所で Enter ボタンを押してタグを閉じることにより、さまざまな行にテキストを入力します。したがって、入力したとおりにテキストが別々の行に表示されます。ただし、<pre> タグを使用しない場合、テキストで Enter キーを何度押しても、テキストは改行なしで同じ行に表示されます。
たとえば、HTML 本文内に <pre> タグを記述します。次に、目的のテキストを入力し、改行を挿入する場所で Enter キーを押して改行します。テキストの書き込みが終了したら、</pre> タグを閉じ、<body> タグを閉じます。
次の図は、HTML コードに改行を作成します。目的のテキストを入力し、HTML 本文内のテキストに Enter キーを押して改行を挿入します。<pre> タグは、入力したのと同じ方法で出力を表示するのに役立ちます。<pre> タグを省略すると、すべてのテキストが同じ行に表示されます。これは、<pre> タグが改行の挿入に役立つことを示しています。
サンプルコード：
<body>
<pre>
Hi, I am here to learn how to break the line in HTML.
In this method, I'm using the pre tag.
I would like to be a good programmer in the future.
</pre>
</body>
出力：
<p> タグを使用して HTML の行を分割する
<p> タグを使用して、HTML コードの行を分割することもできます。このタグは、テキストの段落を決定します。これはブロックレベルの要素です。したがって、常に新しい行から始まります。したがって、本文内のすべての行を開始する前に <p> タグを記述し、終了後に <p> を書き込むと、行を分割するのに役立ちます。
たとえば、タグ <p> を記述して目的のテキストを入力し、本文が終わったら、</p> というタグを書きます。次に、希望するまで同じプロセスを繰り返します。すべてのテキストの書き込みが完了したら、HTML の body タグを閉じることを忘れないでください。
下の図も新しい行を作成します。タグ <p> を入力すると段落が始まり、<p> を入力すると段落が終わります。新しい段落は常に新しい行から始まることがわかっているため、テキストで同じタグを再度使用すると、次の行に新しい行を示すが表示されます。
サンプルコード：
<body>
<p> Hi, I am here to learn how to break the line in HTML. </p>
<p>In this method I'm using the p tag.</p>
<p>I would like to be a good programmer in the future.</p>
</body>
</html>
出力：
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn