ページのイメージ
マーケティングデザイン 2017/07/18

ブログを書く人のための、HTMLの基本をまとめました!

  •  
  • このエントリーをはてなブックマークに追加

こんにちは。
デザイン研究課、青柳です。

この記事を読んでくださっているみなさんの中には、自分でもブログを書いている方も少なくないと思います。

ただ、HTMLタグを自分で入力しながら書くのではなく、ビジュアルエディタを使っている方がほとんどではないでしょうか。

ビジュアルエディタとは?

ビジュアルエディタは文章や装飾を自動的にHTMLに変換するモードです。

確かに、ビジュアルエディタでの編集は記事の見た目がリアルタイムで反映されるので便利でしょう。
しかし、その自動変換にも限界はありますし、思っていたような表示にならないことも多いかと思います。
また、SEOの観点から見てもあまり良い書き方にはなりません。

せっかくブログを書くからには、
HTMLタグの意味を理解して、さらに読みやすい記事にしたいですよね。

今回は、HTMLタグの基本の使い方と
覚えておくべきHTMLタグについてご紹介いたします。

HTMLタグの基本

タグを入力するときは、<開始タグ> ~ </ 終了タグ>のように <>と</>で要素を囲んで記述します。
また、改行を意味する <br /> のように単独で書くものもありますが
このようにタグだけで機能する要素を「空要素」といいます。

<△><●></●></△>のようにタグの中にタグを入れることもできます。
ただし、<●><△></●></△>のように順番を前後させることはできません。

基本的に「HTMLタグは小文字で書く」というのが一般的です。

ブログでよく使うタグ一覧

見出しタグ 【h1 ~ h6】

↑これです
ほとんどのブログでは、記事のタイトルに
<h1>が割り当てられていることが多いですね。

そのため、記事内の大見出しを <h2>、
中見出しを <h3> と順番に使っていくのが良いでしょう。

<h2>ブログでよく使うタグ一覧</h2>

このように表記します。
検索エンジンもこの見出しを評価対象としていますので、
きちんと入力することで、ブログへ検索流入の増加も期待できます。

文字を太字にしても、コンピュータにはそれが見出しであることは伝わりません。
反対に、太字にしたいからという理由で見出しではないテキストにhタグを使ってはいけません。
読みやすさだけでなくSEO対策のためにも意識できると良いかと思います。

段落タグ 【p】

pタグは文章のひとかたまりを表し、段落分けをする際に使います。
適度な文章のまとまりごとに段落わけをするようにしましょう。

原稿用紙のルールでいうところの「一段下げる」でしょうか。

改行タグ 【br】

空要素です。
改行をさせたいときに使用します。

やってしまいがちですが、
<br><br><br> のように改行を連ねるのはNGです。

<p>&nbsp;</p>

とすることでカラの段落を作り、1行ぶん開ける方法もありますが推奨はできません。

文法上正しい記述にするならCSSで調整するのがベストでしょう。

リンクタグ 【a】

リンクをはるときに使います。
説明をしなくても知っている方は多いと思います。

詳しくは<a href=”URL”>こちら</a>

このように、aで囲んだ文字をリンクにできます。
URLの部分に飛び先のURLを入れましょう。

画像タグ 【img】

空要素です。
画像を出したいときに使うタグです。

<img src=”画像までのパス” alt=“画像の説明”/>

このように書きます。
「alt」で指定されたテキストには、

  • 画像が表示されない場合の代わりになる
  • 検索エンジンに画像の内容を伝える
  • 音声読み上げ機能のため

と言う役割があります。

SEO対策の面が大きいですが、読者のためという理由もあります。
とくにロゴや重要な画像の場合は必ずいれておきましょう。

リストタグ 【ul、ol、li】

要素を箇条書きのようなリストにできます。
上の「alt」の説明で書いた箇条書きのリストはこれを使いました。

<ul>
 <li>リストアイテム</li>
 <li>リストアイテム</li>
 <li>リストアイテム</li>
</ul>

このように、<ul>~</ul>で囲んだ中に<li>~</li>で囲んだ要素を入れます。
ulの代わりにolを使うと

  1. リストアイテム
  2. リストアイテム
  3. リストアイテム

のように自動で数字が振られます。
<li>~</li>の中に<ul>~</ul>を入れることもできます。

引用タグ 【blockquote】

文章を引用・転載するときに使用します。

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。(徒然草)

他のブログや書籍などから文章を使うときには、このように引用符をつけましょう。
元の記事のURLや書籍のタイトルを添えると読者にも親切ですね。

タグにはテキストの見た目を綺麗にする役割もありますが、
それ以上に、コンピュータにこれがどんな意味を持つ要素なのかを認識させる重要な目的があります。

検索での流入が増加し、多くの人の目に触れることが
HTMLタグを学ぶ最大のメリットなのではないでしょうか。

これらはHTMLのほんの一部で、他にも100種類以上のタグが存在します。
すべて覚えるのは大変だと思いますが、重要なタグの存在と意味は何となくでも理解しておきたいですね。


しずおかオンライン中途採用社員も、積極募集中!
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!

※「イエタテ」は2023年4月より㈱くふう住まいにて運営しています

Category

Ranking