こんにちは、LIGブログ編集部です。
LIGブログを読んでくれている皆さんの中には、自身でもブログを書いているという方も多いと思います。
しかし、HTMLタグを自分で入力しながら書いている、タグの意味を理解しながら使っている、という人は少ないかもしれません。
最近では、HTMLタグが全くわからなくても、同じような書式の効果が手軽に反映できるブログサービスもたくさんあります。
でも、そのような設定でブログを書こうとすると、改行のときにフォントが崩れたり、勝手に斜字になったり、思わぬストレスになることもありますよね。
実はこれ、HTMLを書式に自動で反映する仕組みにも限界があり、全てを正確に反映できるわけではないことが原因です。
それを修正したり、根本的に防止するためには、HTMLの知識が必要になります。また、せっかくブログを書くからには、しっかりとHTMLタグの意味を理解し、入力していきたいですよね。
というわけで今回は、初心者のブロガーの方に向け、ブログでよく使われるオススメのHTMLタグと、そのタグが持つ意味をまとめて紹介していきたいと思います。
ブログ初心者ではない方も、おさらいのつもりでご確認ください。意外に知らなかったHTMLタグを発見できるかもしれません。
目次
各種ブログサービスでHTMLタグを使うには
HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ）の略で、タグというマーク（命令）を使うことで、HTML文書の構造や意味を指定したり、文字の大きさや色を変えたり、画像を表示させたりすることができます。
HTMLに対応した編集モードへの切り替え
LIGブログではWordPressというブログソフトウェアを使用していますが、代表的な各種ブログサービスでも自由にHTMLタグを使うことができます。（正確には、もともとHTMLタグを使用しているのですが、サービスが自動的にタグを入力しています）
ただし、使用時はHTMLに対応した編集モードに切り替える必要があります。切り替える方法は下記の通りです。
-
- Tumblr：
管理画面の<html>という文字をクリックするたびにON／OFFが切り替わる - ライブドアブログ：
管理画面の「HTMLタグ編集」というボタンをクリック - はてなブログ：
管理画面の「HTML編集」というタブをクリック - Yahoo!ブログ：
管理画面の「Wiki、HTMLモードへ」という文字をクリック（使えるタグに制限があります） - アメーバブログ：
デフォルトの入力画面がHTMLに対応している - FC2ブログ：
デフォルトの入力画面がHTMLに対応している
- Tumblr：
タグの使い方について
タグの使い方については、以下の2つをまず理解しておきましょう。
タグの入力
- <●>吾輩は猫である</●>
タグを入力するときは、上記のように開始タグと終了タグで要素の内容を挟みます。命令分を“<>”で囲んだものが開始タグ、命令分の前に”/”を入れて<>で囲んだものが終了タグとなります。（タグによっては終了タグを必要としないものもあります。）
また、タグの中に「属性」を指定することで情報を付加し、さらに細かな役割を与えることができます。
セマンティックの重要性
HTMLのバージョンが4.01から5に改訂され、いくつかのタグに従来とは違うセマンティック上での意味が追加されました。セマンティックとは、文字や情報データに特別な意味を持たせ、コンピュータに正しい解釈をさせるということになります。
そのメリットとして代表的なのが「検索エンジンがサイトを構成するHTMLからセマンティック要素を見つけ出し、ユーザに適切な検索結果を返せるようになる」ことです。つまり、HTMLタグをきちんと理解し入力することで、自身のブログへ検索流入の増加が期待できるようになるのです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
