見出し画像

【HTML】ブログを書く人のための「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種類以上のタグが存在します。すべて覚えるのは大変だと思いますが、重要なタグの存在と意味は、何となくでも理解しておきたいですね。