テキストのHTMLタグ

ページにテキストを印刷するために使用できるさまざまなHTMLタグを見つけてください

ザ・p鬼ごっこ

このタグは、テキストの段落を定義します。

<p>Some text</p>

それはブロック要素です。

その中に、好きなインライン要素を追加できます。spanまたはa

ブロック要素を追加することはできません。

巣を作ることはできませんp要素を互いに。

デフォルトでは、ブラウザは上部と下部に余白がある段落のスタイルを設定します。16pxChromeでは、ただし正確な値はブラウザによって異なる場合があります。

これにより、2つの連続する段落の間隔が空けられ、印刷されたテキストの「段落」について私たちが考えるものが複製されます。

ザ・span鬼ごっこ

これは、CSSを使用してターゲットにできる段落内のセクションを作成するために使用できるインラインタグです。

<p>A part of the text <span>and here another part</span></p>

ザ・br鬼ごっこ

このタグは改行を表します。これはインライン要素であり、終了タグは必要ありません。

これを使用して、内部に新しい行を作成しますp新しい段落を作成せずにタグを付けます。

また、新しい段落を作成する場合と比較して、間隔が追加されることはありません。

<p>Some text<br>A new line</p>

見出しタグ

HTMLは、6つの見出しタグを提供します。最も重要なものから最も重要でないものまで、h1h2h3h4h5h6

通常、ページには1つありますh1ページタイトルである要素。それからあなたは1つ以上を持っているかもしれませんh2ページの内容に応じた要素。

見出し、特に見出し組織もSEOに不可欠であり、検索エンジンはそれらをさまざまな方法で使用します。

デフォルトでは、ブラウザはh1タグを大きくし、近くの数に応じて要素のサイズを小さくしますh増加:

Headings

すべての見出しはブロック要素です。テキストだけで、他の要素を含めることはできません。

ザ・strong鬼ごっこ

このタグは、その中のテキストを次のようにマークするために使用されます強い。これは非常に重要です。視覚的なヒントではなく、意味的なヒントです。使用する媒体によって、その解釈は異なります。

ブラウザはデフォルトでこのタグのテキストを作成します大胆な

ザ・em鬼ごっこ

このタグは、その中のテキストを次のようにマークするために使用されます強調。のようにstrong、それは視覚的なヒントではなく、意味的なヒントです。

デフォルトでは、ブラウザはこのテキストを作成しますイタリック

引用

ザ・blockquoteHTMLタグは、テキストに引用を挿入するのに役立ちます。

ブラウザはデフォルトでマージンを適用しますblockquote素子。 Chromeは、左右に40ピクセルのマージン、上下に10ピクセルのマージンを適用します。

ザ・qHTMLタグはインライン引用符に使用されます。

水平線

実際にはテキストに基づいていませんが、hrタグはページ内でよく使用されます。その意味はhorizontal rule、およびページに水平線を追加します。

ページ内のセクションを区切るのに便利です。

コードブロック

ザ・codeタグはコードを表示するのに特に便利です。ブラウザは等幅フォントを提供するからです。

これは通常、ブラウザが行う唯一のことです。これはChromeによって適用されるCSSです。

code {
    font-family: monospace;
}

このタグは通常、preタグ、なぜならcode要素は空白と改行を無視します。以下のようなp鬼ごっこ。

Chromeはpreこのデフォルトのスタイル:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

これは空白の崩壊を防ぎ、それをブロック要素にします。

リスト

3種類のリストがあります。

  • 順序付けられていないリスト
  • 順序付きリスト
  • 定義リスト

順序付けられていないリストは、ul鬼ごっこ。リスト内の各アイテムは、li鬼ごっこ:

<ul>
	<li>First</li>
	<li>Second</li>
</ul>

順序付きリストも同様で、ol鬼ごっこ:

<ol>
	<li>First</li>
	<li>Second</li>
</ol>

2つの違いは、順序付きリストには各アイテムの前に番号が付いていることです。

Lists

定義リストは少し異なります。用語とその定義があります。

<dl>
	<dt>Flavio</dt>
	<dd>The name</dd>
	<dt>Copes</dt>
	<dd>The surname</dd>
</dl>

これは、ブラウザが通常それらをレンダリングする方法です。

Definition list

私はあなたが野生でそれらを見ることはめったにないと言わなければなりません、確かにそれほど多くはありませんulそしてol、しかし時々それらは役に立つかもしれません。

その他のテキストタグ

表示を目的としたタグがいくつかあります。

  • インクルードmark鬼ごっこ
  • インクルードins鬼ごっこ
  • インクルードdel鬼ごっこ
  • インクルードsup鬼ごっこ
  • インクルードsub鬼ごっこ
  • インクルードsmall鬼ごっこ
  • インクルードi鬼ごっこ
  • インクルードb鬼ごっこ

これは、ブラウザによってデフォルトで適用されるそれらの視覚的レンダリングの例です。

Various tags

不思議に思うかもしれませんが、どうですかb異なりますstrong?そしてどうやってiとは異なりますem

違いは意味的な意味にあります。一方bそしてiテキストを太字または斜体にするためのブラウザへの直接のヒントです。strongそしてemテキストに特別な意味を与え、スタイルを与えるのはブラウザ次第です。たまたまこれはまったく同じですbそしてi、デフォルトで。 CSSを使用して変更できますが。

テキストに関連する他のあまり使用されていないタグがいくつかあります。私が最も使用していると思うものについて言及しました。

私の無料ダウンロードHTMLハンドブック


その他のhtmlチュートリアル: