今回の概要と目標 0:17
HTMLには、直接入力できない文字がいくつかあります。
例えば、 「<」や、「>」などです。これらの記号は、HTMLのタグに使う記号ですので、直接入力するとタグとして認識されてしまうかもしれません。 タグとしてではなく、文字として認識させるためには、特殊な記述が必要になります。
また、改行は、テキストエディタ上でいくらエンターキーを押して改行しても、ブラウザでは改行されません。
HTML入門講座7回目は、HTMLで特殊な記述が必要な文字と、改行を表す br要素について学習しましょう。
| 要素名 | 意味・役割 |
|---|---|
br |
改行を表す |
RERUN
特殊な記述が必要な文字 1:53
HTMLでは特殊な記述が必要となる文字があります。
例えば「<」や「>」はHTMLのタグとして使う記号になるため、そのままでは文字列として利用することができません。
他にも、属性値の指定で「"」を使ってしまうと、そこで属性値が終了してしまうので、これも使えません。
このように、HTMLで何かしらの役割を持っていたり、キーボードでは直接入力できない文字は、「&〇〇〇;」の書式で記述する必要があり、文字参照と呼びます。
| ブラウザで表示する文字 | 文字参照 |
|---|---|
| < | < |
| > | > |
| " | " |
| & | & |
| © | © |
| ¥ | ¥ |
これら以外にも文字参照が必要な文字はたくさんあります。
入力可能な文字は
HTMLの仕様書にありますので、必要に応じて調べて下さい。
- 8 The HTML syntax — HTML5
- https://www.w3.org/TR/html5/syntax.html#named-character-references
改行は<br>タグで行う
3:45
HTMLは、テキストエディタ上でいくら改行をしてもブラウザ上では改行されません。
ブラウザ上で改行をさせたい場合は、br要素を使います。
br要素は、
主に住所や詩などの
文の分割が重要なところに使います。
- カテゴリ
- コンテンツ・モデル
- なし（空要素）
br要素のサンプル
br要素は空要素です。従って、文の分割が重要な箇所に<br>タグ使って改行します。
br要素の例<p>
〒123-〇〇〇〇<br>
東京都〇〇区〇〇1-1-1
</p>RERUN
br要素の注意点
br要素はあくまで文の改行に使用します。
段落の分割には、
Chapter06で紹介した、<p>を使いましょう。
また、
スペースを開ける目的で<br>要素を使うのもやめましょう。
視覚的な表現が目的な場合は全て、CSS（WEBサイトをデザインするための言語）で行う方が好ましいです。
br要素の間違った使い方の例<p>一つ目の段落の文章。</p>
<br>
<br>
<br>
<p>二つ目の段落の文章。</p>
文字参照と改行を使ってみよう 6:09
それでは、文字参照と、<br>要素を記述してみましょう。
- 「Chapter07」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に、「<」、「>」、「©」は文字参照を行い、改行が必要な箇所は
<br>要素でマークアップ
<h1>伝説のWebクリエーター日記</h1>
<p>
僕は伝説のWebクリエーター日記をはじめた。<br>
HTMLって言う言語は、文章をタグで挟んで意味を付けるらしい。<br>
<開始タグ>文章</終了タグ>
</p>
<p>© 2016 伝説のWebクリエーター日記 All Rights Reserved.</p>- 上書き保存し、ブラウザで確認
RERUN
練習問題 9:06
「Chapter07」フォルダ内の「traning.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
-
- 文字列「僕の仲間の住所&電話番号を公開します」内の「&」
- 文字列「© 2016 伝説のWEBクリエーター日記 All Rights Reserved.」内の「©」
RERUN
まとめ 13:25
特殊な記述が必要な文字と、改行の挿入方法はわかりましたか？
- 「
<」や「>」は、文字参照を行う - 改行は、
br要素を用いる br要素は、スペースの為には使わない