初めてブログをやる人が覚えておきたいHTMLの基礎中の基礎

執筆者

監修

NOIZZ

株式会社ノイズ

http://noizz.co.jp/

マーケティングコンサルティング企業。事業戦略・事業開発支援のほか、MAKEPO等のメディアを展開。ウェブ制作系グループとして株式会社NOBITAを抱えている。

某食品会社に勤めている僕のある友人が最近会社のブログ担当者になったのですが、「“HTML”っていうのが意味不明!」と困っていました。
ビジュアルエディタだけを使ってブログを書くなら、細かいHTMLタグを覚える必要はありません。しかし、簡単なHTMLタグを覚えておくだけでも、よりわかりやすく読みやすい記事がかけるかもしれません。

今回はHTMLが全くの初心者の方のために基礎の基礎からご説明します。

HTMLの基礎の基礎をしっておこう!

br

開始タグと終了タグ

まずHTML タグは小文字で書くというルールがあります。(※正確に言うと、HTMLに似たXHTML というものがあって、この場合はすべて小文字にするというのがルール。)

そしてタグには大きく分けて2種類あります。

  1. 開始タグと終了タグを必要とするもの(ex. h1,p,spanなど)
  2. 開始タグのみでOKなもの(空要素)(ex. br, hrなど)

段落を表すpタグは1のパターンに当てはまります。

<p>文章テキストテキストテキストテキスト</p> 

終了タグは 「/」をつけることで「閉じる」という意味になります。

改行を意味するbrは2のパターンに当てはまります。

任意の場所で改行させてみましょう。<br>
あまり多用すると読みづらいかも? 

上記のように要素を囲むのではなく単独で使われます。

※XHTMLだとbrにスラッシュが必要になります。HTML5ではスラッシュがあってもなくてもかまいません。

タグ属性

各タグには以下のように「属性」をつけることができます。

<p 属性=”値”> ~ </p>

値に書くクラス名は、おもにCSSのスタイルを適用したいときに使います。

<p class=”blue”>この文章には “blue” というクラス名がつきます。</p>
.blue {
    color:blue;
} 

上の例では「.blue」に青文字を指定しているので、pタグで囲まれたテキストが青文字で表示されています。

この文章には “blue” というクラス名がつきます。

属性はたくさんあって、タグごとに使えるものも変わります。すべて覚える必要はありません。しかし、classだけでも覚えておくといろんな表現の仕方ができて楽しいですよ。

入れ子

HTMLタグは入れ子にして使うことができます。タグの中に、さらにタグがあるという意味です。

○正しい例

<p><strong>この部分が強調文字</strong>です。そのほかは通常テキストです。</p>

以下のように順番が前後してしまうとNGです。

×間違った例

<strong><p>この部分が強調文字</strong> になります。そのほかは通常テキストです。</p>

ブログ初心者が知っておきたいタグPart2

以前の記事で最低限知っておきたいHTMLタグを説明しましたが、その時にご紹介してないものを今回はご紹介します。

リンクタグa

このリンクタグaは他のサイトや自分のブログ記事へリンクをはるとき以下のように使います。

<a href=”URL” taget=“_blank” rel=“nofollow">テキストまたは画像</a> 

「href」が属性、「URL」が値です。「target」はリンクをどのように開いてもらうのかを指定します。何も指定してない場合は現在のタブでリンクが開かれますが、「_blank」を指定すると新規タブでリンクが開かれます。 「rel」はリンクのタイプを指定します。「リンク先を支持しない」「重要なリンクではない」という意味を持たせたい場合にnofollowを使います。

画像タグimg

画像タグimgは記事内に画像を出したいときに使うタグです。空要素のため、スラッシュをつけておきましょう。

<img src=“image/logo.jpg" alt=“ブログのロゴ" width="300" height="200" /> 

「src」は画像ファイルへのパスです。「alt」は画像が読み込まれない場合の代わりとして検索エンジンに画像の内容を伝えるものです。「width」と「height」は画像の横幅と高さを示します。

範囲定義タグspan

span自身には意味はありません。spanで囲った部分に色や下線を付けたい場合などに使います。

<p>ブログで一番大事なのは<span class=”red”>コンテンツの質</span>です!</p>
.red {
    border-bottom: 2px solid #cc0033;
}

ブログで一番大事なのはコンテンツの質です!

spanタグは文章にアクセントをつけたいとき、大きく目立たせたいときなどに使えます。

引用タグblockquote

blockquoteは引用を示すタグです。

<blockquote cite=”http://example.com/”>
<p>吾輩は猫である。テキストテキストテキストテキストテキストテキストテキスト</p>
</blockquote>

吾輩は猫である。テキストテキストテキストテキストテキストテキストテキスト

cite属性に引用元の URL を入れることができますが、これは必須ではありません。


HTMLタグは初心者の方にとっては難しいですが、覚えなければならないのは意外と少ないです。わかりやすく読みやすい文章を書くためにしっかり覚えておきましょう!