Web制作

簡単なHTMLタグを覚えよう

本文で光るタグの有用性

HTMLがどんなものかという広義的な意味はさておいて、いくらCMSを利用するとはいえ、HTMLの基礎を知っているのと知らないのとでは差が出てしまいます。知っていると得するものを、簡単な使用法を交えていくつかご紹介します。

スポンサーリンク

Adsense336

HTMLソースのルール

  1. <開始タグ> で始まり </終了タグ>で終わるのが基本
  2. インライン要素の中にブロックレベル要素を含む事はできない
  3. タグの中で別のブロックレベル要素タグを使うときは外で終了しない

順を追って説明します。まず一つ目、「<開始タグ> で始まり </終了タグ>で終わるのが基本」とありますが、具体的には次のような使い方があります。





子見出しのH2タグ


ブロックレベル要素のタグ

上記のように<DIV>タグが空のまま使われる事はほとんどなく、通常はCLASSまたはIDを挿入して別途CSSに記述します。例として挙げただけなので、<DIV>タグの使い方に関しては参考程度にして下さい。

次は二つ目の「インライン要素の中にブロックレベル要素を含む事はできない」についてです。そもそもインライン要素、ブロックレベル要素とは何なのかということですが、ブロックレベル要素は一つの括りで、箱のようなものです。インライン要素は、ブロックレベル要素内（つまり箱の中）のものを改行や強調したりするものです。例に挙げてみましょう。





簡単なHTMLタグを覚えよう


ようこそ、「iWebmaster for Beginner」へ！

この項目ではそれぞれの要素について説明しています。

この場合のインライン要素のタグは<BR>タグです。単体で意味をなすタグとなっており、改行をしてくれます。<BR>タグの他、<IMG>タグ等の終了タグが必要ないものがあります。これに関しては、「<タグ（半角スペース）/>」のようにして、終了してあげます。<BR />や<IMG />としておくといいでしょう。

次に「タグの中で別のブロックレベル要素タグを使うときは外で終了しない」について。





先に書いたブロックレベル要素タグ

後出しのブロックレベル要素のタグが外で終了している

<P>タグと<H>タグはブロックレベル要素なので、終了タグを記述する前に次のブロックレベル要素の<P>タグを跨ぐように書くことは認められていません。きちんと<P>タグを完結させてから次のブロックレベル要素を記述するか、もしくは一つのブロックレベル要素内に収まるように記述しましょう。

次はHTMLソースを正しく書いた例ですが、実際には<H>タグは単体で使うことになるので、<P>タグを更に間に噛ませるといった使い方はしません。





レイアウトの変更でもなければ無駄な二重ブロックレベル要素

<P>と<BR>の違い

HTMLのことをよく知らない初心者がブログ記事を書くときに見られる典型的な誤りで、<P>と<BR>のタグの使い方が滅茶苦茶になっている事があります。

<P>と<BR>タグの使い分け

長い文章には段落があります。<P>タグは一つの段落を囲う時に使われます。形式段落と意味段落は問いません。
同じ段落だけど改行して見易くしたい。段落で区切るには細かすぎる時に<BR>タグを使います。ですが連発は控えないと、robotにスパム判定されてしまいペナルティを受ける事があります。

CSSの行間に注意

行間をCSSで細く指定されている場合、思うようなレイアウトにならない事があります。ですがHTMLの文法はrobotに見易くが鉄則です。人から見て見づらいようであれば、CSSでレイアウトを指定するべきです。

子見出しの<H>タグ

WordPressを利用して記事を書く場合において、HTMLソースでとても大切なタグが<H>タグです。SEOを考える時にも<H>タグが使われていれば、robotに非常に有効なので使うべきです。この文節には先程から再三にわたり出てきた<H>タグが使われています。<H>タグについて、分かりやすく書かれた記事があるので、そちらをご覧下さい。

参考URI

STINGER5 のブログ説明文の重要性について
http://calico.xyz/2014/11/22/importance-of-blog-description/

まとめ

ブロックレベル要素

  • <P>：一つの段落を囲う
  • <H>：見出しなので簡潔に検索キーワードと絡める

インライン要素

  • <BR>：段落内の改行をするけど連発はNG
  • <IMG>：画像を表示

<DIV>タグに関しては、CSSと併せて別の記事に書きます。それと、パーマリンクが気に入らなかったので、全て修正しました。それにより404のエラーページを量産してしまいました。でもここで、Adsenseの404表示はやってはいけないという事を勉強することが出来たので、本当に命拾いしました。条件分岐しておいて良かったです。

The following two tabs change content below.
Twitter のプロフィールFacebook のプロフィールMy Instagram profile
Akky
会社員 ： 有限会社 宮坂整骨院
横浜で整体を生業としています。当ブログは、趣味/仕事/商品紹介/気になったことを記事にしていきます。共感するところが少しでもあれば、SNSでアクションを起こしていただけると嬉しいです。

Adsense336

-Web制作

© 2020 タブカン Powered by AFFINGER5