普通、ワープロなどではＥＮＴＥＲキー１つで１行改行になりますが、ＨＴＭＬではそうは行きません。空けたい行の数だけ <br> というタグを指定します。また、段落を変えたい場合（実際には改行２行分）<p> というタグを指定します。こちらのタグは連続しては使用できません。

1.あいうえお<br>
2.あいうえお<p>
3.あいうえお
4.あいうえお<br>
5.あいうえお<br><br>
6.あいうえお<p><p>

おわり<br>

　　　↓

1.あいうえお
2.あいうえお

3.あいうえお 4.あいうえお
5.あいうえお

6.あいうえお

おわり

表示されたものを順にみていきますと<br>を入れていない 3. と 4. がくっついているのがわかります。また 5. は２行分改行しているのに 6. は２段落分（４行分）空けられるようですが実際には１段落分（２行分）しか空いていないのがわかります。

他にも改行を制御するグがありますので簡単にご紹介します。

・<nobr> 〜 </nobr>（改行させない）

　<nobr> を使う場合は、<br> と違い、必ず <nobr> 〜 </nobr>　で囲むようにします。以下にどう表示されるかを並べてみます。なお、このタグの中で <br> を使うと <br> 以降の <nobr> が無視されてます。

<nobr>
あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなのはへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを
</nobr>

　　　↓

　<nobr> を使わない場合

あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなのはへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを

　<nobr> を使った場合

あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなのはへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを

<nobr> を使った場合でも「ここで改行させたいな」といった場合には <wbr> を使います。以下に例を表示しますが、わかりにくい場合はブラウザのウィンドウサイズを小さく替えてみるなどでイメージをつかんでください。

<nobr>
あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなの <wbr> はへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを </nobr>

　　　↓

あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなのはへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを

文章を表示する際、位置を「左寄せ」「右寄せ」「中央揃え」にしたいといった事象が多々あります。ここでは文章の位置を変える方法を何種類か紹介しますので用途に応じて使い分けてみましょう。

１．<center> 〜 </center> を使う方法

　中央揃えのみに対応のものですが、<center> 〜 </center> で囲んだ部分が中央揃えになります。

<center>あいうえお<center>　・・・・中央揃え

　　　↓

あいうえお

２．<p> を使う方法

　先に改行と改段で紹介した <p> に alignオプションを指定する方法です。ただし、この場合は <p> 〜 </p> で閉じなければなりません。

<p align=left>あいうえお</p>　　・・・・左寄せ
<p align=center>あいうえお</p>　・・・・中央揃え
<p align=right>あいうえお</p>　　・・・・右寄せ

　　　↓

あいうえお

あいうえお

あいうえお

３．<h1〜6> を使う方法

　フォントの変えかたで紹介した、見出し文字の大きさをを変える <h1〜6> に alignオプションを指定する方法です。

<h3 align=left>あいうえお</h3>　　・・・・左寄せ
<h3 align=center>あいうえお</h3>　・・・・中央揃え
<h3 align=right>あいうえお</h3>　　・・・・右寄せ

　　　↓

あいうえお

あいうえお

あいうえお

４．<div> を使う方法

この他に <div> 〜 </div> というタグに alignオプションを指定する方法もあります。

<div align=left>あいうえお</div>　　・・・・左寄せ
<div align=center>あいうえお</div>　・・・・中央揃え
<div align=right>あいうえお</div>　　・・・・右寄せ

　　　↓

あいうえお

あいうえお

あいうえお

次に <pre> 〜 </pre> というタグを紹介します。このタグは先に紹介した <br> や <p> を使わずに書いたままの文章が表示できるタグです。「だったら全部これで書けばいいんじゃない」と思われる方もおいででしょう。便利なタグなのですがディスプレイやブラウザのウインドウサイズが違うといまいち美しくないという欠点があります。

■ＴＡＢキーでスペースを１つ　※（改行タグを使わずに１行空ける）

<pre>

■■こんにちは
※
きれいに表示されますか？
どうですか〜■うーん！
※
■ではさようなら
※
</pre>

　　　↓

		こんにちは

きれいに表示されますか？
どうですか〜	うーん！

	ではさようなら

	

次に一覧を表示させる方法を紹介します。このタグはメニューや箇条書きを並べたりするとき利用します。

<ul>
<li>あいうえお　　　　・・・・１行め
<li>かきくけこ　　　　・・・・２行め
<li>さしすせそ　　　　・・・・３行め
</ul>

　　　↓

• あいうえお
• かきくけこ
• さしすせそ

"・" がついて一覧ぽくなりました。これが一番の基本となる方法です。（このタグはl（エル）とi（アイ）が混在しますのでご注意ください）

次にこの "・" を別のマークに替えてみましょう。ＨＴＭＬでは "・" の他に２つのオプションが用意されています。

<ul>
<li type=disk>あいうえお　　　　　・・・・１行め（ "・" と同じ）
<li type=circle>かきくけこ　　　　・・・・２行め
<li type=square>さしすせそ　　　　・・・・３行め
</ul>

　　　↓

• あいうえお
• かきくけこ
• さしすせそ

<li>タグの中に "type=ｘｘｘ" をオプションとして入れることでマークが変わります。

せっかく一覧を表示させるのにマークでは意図が伝わらないという場面も多々あります。次に番号をカウントする方法を紹介します。

<ol>
<li>あいうえお　　　　・・・・１行め
<li>かきくけこ　　　　・・・・２行め
<li>さしすせそ　　　　・・・・３行め
</ol>

　　　↓

1. あいうえお
2. かきくけこ
3. さしすせそ

"1、2、3" と番号がついてさらに一覧ぽくなりました。これがこのタグの基本となる方法です。さらにこの番号を別の書式やアルファベットにすることもできます。

<ol>

<li type=a>あいうえお　　・・・・１行め
<li>かきくけこ　　　　　　　・・・・２行め
<li>さしすせそ　　　　　　　・・・・３行め
</ol>

　　　↓

1. あいうえお
2. かきくけこ
3. さしすせそ

<li>タグの中に "type=ｘｘｘ" をオプションとして入れることでカウントする既定値が変わります。 "type=a（英小文字）" 以外に "type=A（英大文字）" "type=I（ローマ数字大文字・アイの大文字を使用しています）" "type=i（ローマ数字小文字" "type=1（標準）" といった指定方法があります。

また、さらに進んで文章をまたがってカウントしたりする場合はどうするのかを次にご紹介します。

<ol start=2>　　　　　・・・・ "b" から始める

<li type=a>あいうえお
<li>かきくけこ
<li>さしすせそ
</ol>

ここで文章をいれます

<ol>

<li type=a value=5>たちつてと　　・・・・ "e" から始める
<li>なにぬねの
<li>はひふへえほ
</ol>

　　　↓

2. あいうえお
3. かきくけこ
4. さしすせそ

ここで文章をいれます

5. あいうえお
6. かきくけこ
7. さしすせそ

この他にも一覧に標題をつける方法などがあります。いろいろ調べてみてはいかがでしょうか。

本来は注釈をつけるときなどに使用されるタグですが、文章の端をなにげなくあけてくれるこのタグは手軽に感じのよいホームページを作るのに適したタグだといえるでしょう。

<blockquote>
あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなのはへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを
</blockquote>

　　　↓

・使用しない場合

あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなのはへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを

・使用した場合

あえいうえおあおかけきくけこかこさせしすせそさそたてちつてとたとなねあにぬねのなのはへひふへほはほまめみむめもまもやえいゆえよやよられりるれろらろわえいうえをわを

使用した場合、両端があいているのがお分かりでしょうか。ちなみにこのホームページでは元々 <blockquote> を用いているため、両端が空きすぎて見えるかもしれません。

最後に横罫線を引く方法をご紹介します。

<hr>　　　　・・・・（標準）

　　　↓

---

ブラウザによってイメージが少し違う場合がありますが影のついた浮き彫りの横罫線が表示されました。

次にこの影をとってみましょう。

<hr noshade>

　　　↓

---

影のない罫線が表示されました。

それでは、次に罫線の長さを変えてみます。長さの変えかたには２種類あり、１つめは "％" で指定する方法、もう１つは "ピクセル" で指定する方法です。％はブラウザのウインドウの横幅に対する割合です。

・％で指定

<hr width=50%>

　　　↓

---

・ピクセルで指定

<hr width=50>

　　　↓

---

この罫線は指定をしない限り中央揃えになっています

長さを変えた罫線の位置を左右に寄せてみましょう。

・左寄せ（％で指定）

<hr width=50% align=left>

　　　↓

---

・右寄せ（ピクセルで指定）

<hr width=50 align=right>

　　　↓

---

さらに、この罫線の幅を変えてみましょう。幅の変えかたは長さと違い、"ピクセル" でしか指定できません。

・ピクセルで指定

<hr size=50>

　　　↓

---