<br>,<p>,<h1>-<h6>,<hr>
HTMLテキストを編集するためのタグです。以下以外にも、 <abbr>,<address>,<blockquote>,<q>,<cite>,<del>,<dfn>,<samp>,<var>といった、プログラムコードや何らかの引用であるといった意味を持たせる機能をもつタグがあります。
<p>
段落ごとに<p>で囲みます。
改行ごとに<p>を使用する場合もありまし、段落は<p>を使い、改行は<br>を挿入することもあります。
過去には改行ごとに<p>を使っていました。行の高さが調整できるようになってからは、<p>を使用すると空白が大きくなり過ぎることから、段落は<p>を使い、改行は<br>を挿入する方法を使う場合もあります。
以下のExampleを参照してください。
<br>
改行の箇所に挿入します。
行間を空けるために<br />を連続して使用するのは問題があります。
段落ごとに分けるには、<p>エレメントを使います。
以下のExampleを参照してください。
行間を開けるには、スタイル要素のline-heightプロパティを使いましょう。エレメントごとの空間を空けるには、スタイル要素のpadding、marginを利用しましょう。
<h1>-<h6>
ヘッダー、見出しを示すエレメントです。検索ロボットはこの要素を重要視します。
H1はページ名。H2はカテゴリごとの名称に。H3はH2の子カテゴリ名といった使い方をします。
ページ内に必ずひとつのH1が必要になり、それ以降はH2,H3といった順にヘッダー要素を振り分けます。H1は必ずひとつ、その他は複数あっても問題はありません。
H1、H2、H3がなくて、H4を作るといった記述は避けた方がよいです。H1はあった方がよいのですが、あまり検索の評価とは関係がないともいわれます。
H3以降の順番は関係ないともいわ
<hr>
横線を挿入します。
Example
<p>、<br>エレメントの例です。「テキスト編集」欄で編集したテキストを<p>、<br>のあるHTMLに変換します。
「テキスト編集」欄にテキストを編集して、「変換」ボタンをクリックしてください。HTMLに変換されたテキストが「HTML、<p>、<br>に変換」に表示されます。
「テキスト編集」欄はテキスト編集のみを目的としています。全体を<p>エレメントで囲んであるという前提で、1つの改行を<br />に、2回連続する改行は段落に変換します。
関連(Related)
HTML、CSS、DOMのテキスト、フォント、編集用途の一覧です。
HTML
- リンク
- <a>
- テキスト
- <br>、 <h2-h6>、 <hr>、 <p>
- マーカー
- <mark>
- 書式方向
- <bdi>、 <bdo>
- 単語の扱い
- <wbr>
- プログラムコード例
- <code>、 <kbd>、 <pre>、 <samp>、 <var>
- 化学式、数式
- <sub>、 <sup>
- 削除された内容や追記された内容の補足
- <del>、 <ins>
- 引用や定義、出典を明示
- <abbr>、 <address>、 <blockquote>、 <q>、 <cite>、 <dfn>
- 日時
- <time>
- ?データ用?
- <data>
- スカラー値、ゲージ
- <meter>、 <progress>
- ルビ
- <rp>、 <rt>、 <ruby>
CSS
- フォント
- color、 font、 font-family、 font-feature-settings、 font-kerning、 font-size、 font-stretch、 font-style、 font-variant、 font-variant-caps、 font-weight
- テキスト配置
- letter-spacing、 line-height、 overflow-wrap、 tab-size、 text-align、 text-align-last、 text-combine-upright、 text-indent、 text-justify、 text-overflow、 vertical-align、 white-space、 word-break、 word-spacing、 word-wrap
- 回り込み
- clear、 float
- テキスト装飾
- text-decoration、 text-decoration-color、 text-decoration-line、 text-decoration-style、 text-shadow、 text-transform、 text-underline-position
- 書式方向
- direction、 text-orientation、 writing-mode
- 自動挿入
- content、 counter-increment、 counter-reset、 quotes
- 改行
- box-decoration-break、 hyphens
- ユーザー操作
- user-select
DOM
- インターフェイス
- ClipboardEvent
- イベント
- copy、 cut、 paste
- プロパティ
- メソッド