HTML 文章関係の基礎タグついて

トモジ

spanタグやdivタグってなに・・・？
基礎タグってどんなのがあるのかな？

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、文章関係の基礎タグ関して要点をわかりやすく説明しております。

HTML 文章関係の基礎タグついて

bodyタグ内に記述するタグに関して、使用頻度が高いタグについて順番に説明していきます。

pタグ

pタグは囲まれた範囲が一つの段落として表現され
前後は自然と改行され表示されます。

<p>○△□○△□○△□</p>
<p>○△□○△□○△□○△□○△□○△□○△□</p>
<p>○△□○△</p>

brタグ(改行)

brタグは改行のためのタグになり、
文字列中の改行はすべて
半角スペースひとつとして扱われてしまいます。

<p>
  〒999-9999<br>
  ○○県
  ○○市○○町<br>
  tomojiビル5F<br>
  電話番号<br>
  999-9999-9999
</p>

スペース表示

HTMLでは、連続の半角スペース(空白)は
ブラウザ表示で同じスペースとして認識されます。

なのでスペース(空白)を何個も入れたい場合には
以下の3つ方法がありますので順に説明します。

① preタグ(改行やスペースをそのまま表示)

preタグはあまり使用頻度は高くないですが、
記憶の片隅に入れておくと使う機会もあるかもしれませんのでご紹介します。

HTMLのルールで半角スペース・タブ・改行は
すべて半角スペースに変換されて表示されます。
preタグはテキスト入力と同じ表示を
ブラウザに再現する事ができます。

<pre><p>
〒999-9999
  ○○県○○市○○町    tomojiビル5F
電話番号
  999-9999-9999
</p></pre>

〒999-9999
  ○○県○○市○○町    tomojiビル5F
電話番号
  999-9999-9999

② 特殊文字を使用

特殊文字とは、HTML文書に記述してもブラウザで
直接表示することが出来ない文字や記号のことで
スペースを表示したい箇所に特殊文字を記述します。

<p>&thinsp;[半角スペースより少し狭い]</p>
<p>&nbsp;[半角スペース]</p>
<p>&ensp;[半角スペースより少し広い]</p>
<p>&emsp;[ensp;より少し広め]</p>

③ 全角スペースを入れる

HTML文書は全角スペースをスペース(全角)として認識してくれます。

<p>
〒999-9999<br>
  ○○県○○市○○町　　　　tomojiビル5F<br>
電話番号<br>
 　999-9999-9999
</p>

strongタグと bタグの違い

HTML文書で強調したい部分に使われるタグとしてstrongタグとbタグがあります。

見かけはどちらとも同じような太文字ですが、
少し違いがありますので見ていきましょう。

strongタグとbタグではseoに関係はないとされているが、重要な部分はstrongタグを使うことをおすすめします。

hrタグ(変わり目や区切り)

 hrタグはHorizontal Ruleの略で、テーマやトピックの変わり目や区切りに使用されるタグになり
長さや太さ・カラー・線の影の雰囲気の設定ができます。

<p>hrタグについての説明</p>
<hr>
<p>hrタグについての説明</p>

HTML5で、align属性・noshade属性・size属性・width属性が廃止され
スタイルシート(CSS)で設定する仕様に変更

sタグ(正しくない情報を示す)

sタグは、表記していた情報に対して
[すでに正しい情報ではなくなった]または
[すでに関係のない情報となってしまった]
部分を示します。

<p>
いちご食べ放題<br>
<s>1980円</s>　980円
</p>

まとめ

最後にこの記事のポイントをまとめておきます。