【HTML/CSS/PHP講座③まとめ】HTML・代表的タグ4つをゼロから学びました

PR

<body>~</body>はブラウザに現れる本体部分です

HTML文書では<HTML>、<HEAD>、<BODY> の3種類のタグで構成されています。

<HTML>~</HTML>はその文書がHTML文書であることを宣言し、文書の最初と最後に書き、<HEAD>~</HEAD>の間には、文書のタイトル等のヘッダ情報を書くことと教わりました。

そして<BODY>~</BODY>の間には、実際にブラウザに表示される文書の本体を書いていくこととなります。

第3回は最も基本の4つのタグについてでした!

①<h1> タイトル・見出しタグ(ヘディング)

重要度が高い順に<h1>から<h6>までの6段階があります。同じ数字は並列の関係となり、Googleは「大きな数字タグ内に書かれたことは、そのページで重要なことである」と認識します。

重要なことを重要なレベルで書くという意味付けであり、適切なキーワードを入れる意識を持つことが大事だそうです。

 

パターン1

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

パターン2

<h1>見出し1</h1><h2>見出し2</h2><h3>見出し3</h3><h4>見出し4</h4><h5>見出し5</h5><h6>見出し6</h6>

上記、パターン1、パターン2のような書き方がありますが、ヘディングタグの終わり</h>には改行が必ず入ります。ですので、上のように並べて書いても必ずブラウザでは改行されたブロックになります。これをブロック要素(=改行が必ず入る要素)といいます。(⇔インライン要素=改行の入らない要素)

ブロック要素なので、必ず改行される

※ ちなみに、パターン1には各々改行が入っており、改行は1バイト分の容量を使用しています。

よほどのことで容量を節約したいときはパターン2のように書けばよい・・・けれどあまりそういう状況はないでしょう、とのこと。

ちなみに、同じタグを書いて各ブラウザで開いてみると、ブラウザによって文字の大きさやフォントが違っていたりします。

これは各ブラウザの基本の設定(CSS)によるもので、各ブラウザのデフォルトとして違うものが決められているからだそうです。

やってはいけない使い方

<h2>タグの文字の大きさが気に入らないから、別の数字のhタグを使う・・・など。デザインとして使ってはならない!!ということです。

②<p>タグ 段落タグ(パラグラフ)

pタグの中に書かれたことは「段落」としての意味付けになります。

<p>・・・・。・・・・・・・。</p> というようにpタグでくくられた範囲は文章と文章のひと固まり(段落)となり、上下にスペース少しずつ隙間ができます。これも必ず終わりに改行が入る「ブロック要素」になります。

段落のひと固まりとして認識される

③<br>タグ 改行タグ(ブレイク)

brタグには終了タグはありません。以前は存在したこともあったそうですが・・・・(html4時代)。

使い方の注意

brタグは改行タグであり、スペースのようには使ってはいけません。

brタグは、例えば住所のように改行が実際にコンテンツの一部をなすような場合にのみ使用します。文の長さを揃えたり、レイアウトを整えるなどのスタイリング目的に使用してはならないということです。

よくある失敗例として・・・

<br>を2個続けて書く。スペースを開けたいからと言って続けて書いてスペースを空けようとする使い方はダメです!!ということ。。下記ダメな事例参照。

文法を間違えるとどうなるのかというところですが、読めることは読めるけれど、同じようなコンテンツがあったときには書き方のルールを守って書かれているサイトが優先されやすい、とのこと。

桃太郎の文章を段落2つに分けたいとき・・・p(段落)タグbr(改行)タグの使い方の良い例悪い例は以下の通り。

pタグ brタグの正しい使用例

      <p>やがて、桃太郎が大きくなった頃、村には鬼が出て人々を困らせていました。すると桃太郎が「おじいさん、おばあさん、私は鬼を退治しようと思います。鬼の住んでいる鬼ヶ島まで行って退治してきますので、お弁当にキビダンゴを作ってくれませんか?」と言いました。</p>

      <p>おじいさんとおばあさんは驚いて止めましたが、桃太郎の気持ちは変わりませんでした。そこで桃太郎の言うとおり、キビダンゴを作って持たせてあげました。</p>

brタグのダメな使用例

 やがて、桃太郎が大きくなった頃、村には鬼が出て人々を困らせていました。すると桃太郎が「おじいさん、おばあさん、私は鬼を退治しようと思います。鬼の住んでいる鬼ヶ島まで行って退治してきますので、お弁当にキビダンゴを作ってくれませんか?」と言いました。<br><br>

      おじいさんとおばあさんは驚いて止めましたが、桃太郎の気持ちは変わりませんでした。そこで桃太郎の言うとおり、キビダンゴを作って持たせてあげました。

④<div>タグ 分けるタグ(ディヴィジョン)

段落でも改行でもない、どれにも属さない、けれど、「ここからここまでをひと固まり」として認識させたいときにくくるタグです。意味がないのだけれども、でも一番多く使われます。

例えば、「ここ<div>」から「ここ</div>」までをひとつのかたまりと意味づけし、その中の「色を変える」など・・・

 文法を守ること

なんとなく見たことはあったけど、webの世界での約束事が色々あると知りました。

普段記事を書いていてここまで気にしたことはありませんでしたが、こんなルールがある、とわかってから書くのはまた意識が違ってきますね。

引き続きがんばります!

PR