フリースペース

日常のニュースを思うままに発信します。

*

HTML初心者必見!これだけは知っておきたいHTMLタグ8選

      2015/07/16

HTML

By: iStylr

先日、ブログの改行について記事を書きましたが、その際、知り合いのブロガーさんから、「そもそも

タグの意味がわからない」というご意見を頂きました。

私は、WEBエンジニアとして当然のように慣れ親しんできたHTMLも、ブロガーさんによっては、ただの意味不明な記号にしか見えない場合があるのだと思い知りました。

そこで、個人的にこれだけ覚えておけば、ブログのコンテンツ作成に困らないというHTMLタグを列挙してみました。何かの参考になれば幸いです。

スポンサードリンク

そもそもHTMLとは?

HTMLとはHyper Text Markup Languageの頭文字を集めたものです。その名の通り、文章の構造をタグ付け(Markup)する言語です。

もともとは、学術論文をタグ付けして、表現するために開発された言語です。当時は、インターネットが普及していない時代で、大学関係者だけが利用できるネットワークが構築されていました。そのネットワークで、いち早く学術論文を公開できる技術としてHTMLが開発されたのです。

学術論文をタグ付して、表現するために開発された言語ですから、一般のプログラミング言語とは大きく異なります。プログラミング言語が、コンピューターに何かをさせるために指令を出すのに対し、HTMLは文章の構造を表現するだけなのです。そのため、HTMLでは、通常の文章にHTMLのタグを埋め込むだけというシンプルなものになっています。

HTMLのタグとは?

HTMLのタグは、タグ付けの開始を意味するタグと終了を意味するタグで1対になっているのが基本です。開始タグは<タグ名>で表現され、終了タグはで表現されます。例外的に終了タグが存在しないHTMLタグも存在します。

HTMLが開発された当初は、WordpressなどのCMS(Contents Management System)は存在していなかったため、タグを1つ1つ手で入力していました。最近では、WordpressなどのCMSや無料ブログサービスなどの登場によって、HTMLタグを理解していなくても、わかりやすい入力画面で入力するだけでHTMLページを作成することができるようになっています。

しかし、SEOで上位表示されているページを分析するためには、HTMLの知識が欠かせません。インターネット上に存在するページの多くはHTMLで構成されていて、上位表示されているページと自分のページを比較する際には、HTMLを見て比較することが多いのです。

知っておきたいHTMLタグ

HTMLタグには、数多くの種類が存在していますが、頻繁に利用するのはごく一部のHTMLタグです。今回は、その中でも知っておくと便利なHTMLタグを紹介します。

<a>タグ

<a>タグは、アンカーの略です。その名の通り、文章内にリンクを張る場合に使用します。基本的な使用方法は、以下のようになります。
<a href=”リンク先URL” >リンク名</a>
<a>タグを使用すると、その部分だけクリックできるのがわかるように表示部分が変化します。

<blockquote>タグ

<blockquote>タグは、他のサイトから引用する場合に使用します。引用については、特に最近、バイラルメディアの著作権問題などで話題になっていますので、キチンとした引用ルールを守る必要があります。基本的な使用方法は、以下のようになります。
<blockquote>引用する文章…</blockquote>
<blockquote>を使用すると、引用した箇所がわかるように表示部分が変化します。引用先を明確にするために<a>タグを合わせて使用します。

<br>タグ

<br>タグは、改行を表すタグです。文末に使用することでその部分を改行することができます。基本的な使用方法は、以下のようになります。
文章…<br>
<br>タグには、閉じタグが存在しません。
使用しているHTMLの種類によっては、<br>タグの代わりに<br />を使用する場合があります。両者とも、改行を表すという意味に変わりありません。

<h1>~<h6>タグ

<h1>~<h6>タグは、文章中での大見出し~小見出しの表現に使用します。基本的な使用方法は、以下のようになります。
<h1>見出し名</h1>
<h1>~<h6>タグを使用すると、使用したタグに応じて見出し名の大きさが変化します。最近では、サイトのデザインを記述するCSS(Cascading Style Sheet)によって、文字の大きさが変化するのではなく、背景などの見た目が変化するように定義されている場合が多くなっています。

<img>タグ

<img>タグは、イメージ画像を挿入する場合に使用するタグです。基本的な使用方法は、以下のようになります。
<img src=”使用する画像へのパス” alt=”使用する画像名”>
<img>タグには、閉じタグが存在しません。
src属性には、表示する画像の場所を示すパスを入力します。表示する画像はGIF形式、JPEG形式、PNG形式が一般的です。

<ol>、<ul>タグと<li>タグ

<ol>、<ul>タグと<li>タグは、箇条書きのタイプとその要素を表現する場合に使用するタグです。<ol>、<ul>タグの中に要素として<li>タグを入れ子になるように使用します。基本的な使用方法は、以下のようになります。
<ol>
<li> 要素1</li>
<li> 要素2</li>
<li> 要素3</li>
</ol>
上記のように<ol>タグと</ol>の間に、<li>要素名</li>を配置します。<li>要素名</li>の数はいくらでも構いません。
<ol>タグを使用すると、要素名の前に1から数字が割り振られて表示されます。<ul>を使用すると、要素名の前に・が表示されます。

<p>タグ

<p>タグは、段落を表現するタグです。一連の文章を<p>タグと</p>タグで囲うことで、段落表現となり、自動的に次の文章との間に改行が挿入されます。基本的な使用方法は、以下のようになります。
<p>文章…</p>
最近のCMSや無料ブログでは、改行までの文章を自動的に<p>タグで囲ってくれるようになっています。連続改行は、<p></p>で表現されています。

<strong>タグ

<strong>タグは、強調文字(太字)を表現する場合に使用します。同じ効果があるものに<b>タグがあります。SEO的には、<strong>タグの方が効果があるとされているため、<strong>タグを使用するのが一般的になっています。基本的な使用方法は、以下のようになります。
<strong>タグ強調したい部分</strong>タグ
<strong>タグで囲われた部分は、SEO的には、文章中の重要部分と判断されるため、その文章のタイトルや文脈に関係する部分に使用するのが効果的です。

HTMLには、他にも色々なタグがあります。しかし、頻繁に使用されるタグは限定されてきます。上記したHTMLタグは、頻繁に使用されるHTMLタグばかりです。まずは、上記したHTMLタグをしっかりと覚えて、それから、徐々にHTMLタグについて理解を深めて行けば良いと思います。

上記したタグの中には、SEO的にも意味を持つものが含まれています。SEOについては、アルゴリズムの変更で、今後も大きな変化が予想されます。そんな時でも、HTMLの知識があれば、柔軟に対応できる可能性があるのです。これを機会に、HTMLタグについて勉強してみてはいかがでしょうか?

 - HTML

        

広告

広告

  フォロー、いいねをお願いします

follow us in feedly

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

By: Johan Larsson
スマートフォン全盛の時代に考える「target=’_blank’」の意味

「target=’_blank’」という属性をご存じでしょうか?HTMLの知識が …