見出しとpタグの練習①

見出し(hタグ)について

hタグのことを見出しといいます。基本的にはどのホームページにも、見出しは使われています。h1からh6まであります。上手に使いこなすことで、SEO的にも良い効果をもたらすもので、しっかり規則を守って使いましょう。

<h1>京ばあむ</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

ぜひメモ帳を使って、確認をしてみてください。

pタグと改行タグについて

一般的な文書は、pタグで囲みます。先ほど学んだhタグやpタグはスペースを含み、文書のまとまりをつくる役目があります。改行タグについては、空要素といい、hタグやpタグのように開始タグと終了タグで2つセットとなっているものではなく、それ1つ単体で使うものです。空要素のタグは他にも沢山ありますが、少しづつ覚えていきましょう。

<h2>京名物井筒八つ橋</h2>

<p>井筒八ッ橋は、「六段の調べ」などで知られる<br />
箏曲の祖・八橋検校に由来します。<br />
検校が教え伝えたと言われる京の堅焼き煎餅を<br />
琴の形に仕上げ「八ッ橋」と名付けたのが始まりです。</p>

<p>パリッとした食感と、たちまち広がる<br />
ニッキの香りをお楽しみください。</p>

hタグのルールって?

後から分かってくると思いますが、hタグはSEO的にかなり大事なタグで、ここにいかに的確なキーワードを入れられるかによって、ホームページの集客率が変化します。かといって、hタグの濫用や、キーワードを手当たり次第に持ってくるのは禁止です。

以下のようにして、1から順にきれいに使いましょう。
ホームページ内でh1は基本はホームページタイトルなどに1つ。h2を各ページの大見出しに、その他はh3で小見出しを作ることが多いです。ぐちゃぐちゃに順不同に使ったり、h1を濫用したり、小見出しが来るであろう部分になぜかh2やh1などパワーの強いタグを使ったりなどはSEO的には良くありません。ぜんぶきれいに使うのは難しいかもしれないし、自分のやり方が出来て来ると、こだわりたい箇所もできてくると思いますが、出来るだけ順序よく使いましょう。

<h2>しっとり ほわほわ<br />
京都生まれのバームクーヘン</h2>←大見出し

<h3>京ばあむとは?</h3>←小見出し

<p>京都素材をふんだんに使用した、抹茶生地と豆乳生地のコントラストが美しい三層のバームクーヘン。普段のおやつに、特別な贈り物に、おいしい幸せをいつもそばに。一層一層丹念に焼き上げた、しっとりほわほわな食感をお楽しみください。</p>

<h3>思いを込めて</h3>←小見出し

<p>京ばあむは、最初から最後まで1人の職人が焼き上げています。真心を込めた職人の想いをお届けするため、一つ一つに職人の名前をお付けしています。</p>

ブロックレベル要素とインライン要素

ブロックレベル要素

hタグやpタグをブロックレベル要素といいます。ページの構成をする基本要素です。必ず前後に改行を伴って使われ、ここからここまでがコンテンツひとまとまりですよと記すものです。

<p>京ばあむソフトは、小さくカットした<strong>京ばあむ</strong>の上に、ソフトクリームがたっぷり。抹茶、豆乳、ミックスの3種類からお選びいただけます。<em>八つ橋</em>ですくって食べるのがオススメ。</p>

インライン要素

太文字はstrongタグです。斜め文字はemタグです。インライン要素といって、ブロックレベル要素の中に特定の文字列を強調したり、リンクを貼ったりする時のタグのことをいいます。ブロックレベル要素とは異なり、これらは入れたところで、ブラウザで表示しても改行されません。

<strong>京ばあむ</strong>太字
または<b></b>

<em>京ばあむ</em>斜め文字
または<i></i>

<ins>京ばあむ</ins>下線
または<u></u>

<del>京ばあむ</del>打消し線
または<s></s>

コメント