【簡潔】HTMLの基礎タグ~~

基礎文法~タグ~

この記事はHTMLの基礎文法について学習できます。今回取り扱うタグは
1.<strong>
2.<blockquote>
3.<hr>
4.<br>
5.<pre>
6.<code>
の６つです。

それでは見ていきましょう。

1.<strong>

囲った文字を強調するタグです。

<p>失礼します。<strong>おはようございます。</strong>失礼しました。</p>

と上記のように<strong>で囲った部分だけ太字になります。

2.<blockquote>

このタグは引用を表すタグです。

<h4>こんにちは</h4><p>初めまして。夏目漱石です。</p><blockquotecite="https://natsume.com"><p>吾輩は猫である</p></blockquote><p>さようなら</p>

上記のようにコードを書くとブラウザでは下記のように表示されます。

<blockquote>で囲まれた部分がインデント下げをされていますね。
<blockquote>の中のcite属性には引用元を記述します。

3.<hr>

水平線が引けるタグです。ちなみに装飾に使ってはダメですよ。
あくまで装飾はCSSで行います。

<h4>こんにちは</h4><p>初めまして。夏目漱石です。</p><hr><blockquotecite="https://natsume.com"><p>吾輩は猫である</p></blockquote><p>さようなら</p>

上記のようにコードを書くとブラウザでは下記のように表示されます。

少し分かりにくいですが文の途中で水平線が引けていますね。

4.<br>

このタグは改行を表現するタグです。

<p>ナンバーワンになら無くてもいい。元々特別なオンリーワン。by SMAP.</p><p>ナンバーワンになら無くてもいい。<br>元々特別なオンリーワン。<br>by SMAP.</p>

上記のようにコードを書くとブラウザでは下記のように表示されます。

このように<br>がついている方の文章ではしっかり改行されていますね。

5.<pre>,<code>

<pre>と<code>タグを一緒に解説してしまいます。

・<pre>は
整形済みのテキストをそのまま表示させるタグです
つまり、スペースや改行をそのままブラウザで表示させます。
・<code>は
プログラムのコードであることを示します。

<pre><code><p>千の風になって<br>千の風になあって〜<br></p></code></pre>

上記のようにコードを書くとブラウザでは下記のように表示されます。

<pre>で囲っているので空白が効いていますが、<code>で表したいコードである<p>と<br>が消えてしまっていますね。
これは、単純にコードとして認識されてしまったからです。
これを避けるためには次のように記述します。

<pre><code>&lt;p&gt;千の風になって&lt;br&gt;千の風になあって〜&lt;br&gt;&lt;/p&gt;</code></pre>

するとブラウザでは下記のように表示されます。

しっかり<p>も<br>も表示されましたね。

<は<
>は>
を使うとブラウザでしっかり表示されます。

記事を読んでいただきありがとうございました。