基礎文法~タグ~

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

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

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

index.html

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

ブラウザ表示はここをクリック

失礼します。おはようございます。失礼しました。

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

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

index.html

<h4>こんにちは</h4>
<p>初めまして。夏目漱石です。</p>

<blockquote cite="https://natsume.com">
  <p>吾輩は猫である</p>
</blockquote>

<p>さようなら</p>

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

ブラウザ表示はここをクリック

### こんにちは初めまして。夏目漱石です。吾輩は猫であるさようなら

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

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

index.html

<h4>こんにちは</h4>
<p>初めまして。夏目漱石です。</p>

<hr>

<blockquote cite="https://natsume.com">
  <p>吾輩は猫である</p>
</blockquote>

<p>さようなら</p>

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

ブラウザ表示はここをクリック

### こんにちは初めまして。夏目漱石です。

吾輩は猫であるさようなら

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

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

index.html

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

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

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

ブラウザ表示はここをクリック

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

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

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

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

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

index.html

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

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

ブラウザ表示はここをクリック

千の風になって
千の風になあって〜

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

index.html

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

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

ブラウザ表示はここをクリック

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

しっかり`

`も`
`も表示されましたね。

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

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