【初心者ブロガー向け】覚えておきたい良く使うHTMLタグ10選

スポンサーリンク

f:id:andrewdaily:20170901131838p:plain

こんにちは、アンドリューです。今日は、HTMLについてまとめていこうと思います。プログラミングやブログを初めたばっかりの人にとって1番最初にHTMLの勉強を始める人も多いのではないでしょうか。プログラミングやブログを初めたばっかりの人にとってHTMLの知識は必須です。GoogleにHTMLに関するサイトはたくさんありますが、HTMLのタグの意味を理解して使っている人はなかなかいないのではないでしょうか。

 

HTMLは自分でサイトのデザインなどと手がける時に必ず必要な知識になってきますし、これからの時代プログラミングの知識はないより、あったほうが絶対良いです。何よりも自分で好きなようにデザインを手がけることが出来ます。覚えておいて損することは絶対にありません。

 

そこで今回は、初心者のブロガーの方に向け、ブログで良く使われるHTMLタグとその意味をまとめていこうと思います。

 

 

そもそもHTMLとは?

 そもそもHTMLとはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略でタグというマーク(命令)を使うことで、文章の構造や、大きさ、色、画像を表示させたりすることができます。

 

タグの使い方

<p>夏休と言ったら花火!</p>

タグを入力する時は開始タグ"<>"と終了タグ"</>"を使います。開始タグは"<>"でいいのですが、終了タグ"</>"は「/」が必ず必要になってくるので気をつけましょう。(終了タグを必要としないタグもある)

 

また、タグの中に属性も指定することができ細かな役割も与えることができます。

 

実際に記入してみる

それでは実際に記入して意味を確認していきましょう。 

 

段落を意味する<p>

 <p>タグは段落を意味する文字列で使用されます。paragraphという英単語の略です。

 

●使用例

<p>段落です。</p><p>ここから次の段落です。</p>

●表示例

f:id:andrewdaily:20170901134844p:plain

太字を意味する<b> 

 <b>タグはテキストを太字にして読む人にインパクトを与えたい時に使えるタグです。これは、boldという英単語の略です。

 

●使用例

<b>ここまでは太字にになるが</b>ここからは普通の文字になる。

●表示例

f:id:andrewdaily:20170901135638p:plain

<b></b>で囲ったところまでしか太字にならないので注意しましょう。

 

改行を意味する<br>

 <br>タグは改行するために使うタグになります。これは、Breakという英単語の略です。こちらのタグは終了タグが不要になります。詩や住所などに使うことが多く、改行が文章中に意味のある場合のみに使用した方がいいです。

 

文の長さを揃えたり、文字のスタイリングの調整の目的で使用することは推奨されていません。あまり<br>を多用しすぎると、PC、タブレット、スマホ、それぞれのデバイスで異なった表示がされる恐れもあるので注意しましょう。

 

●使用例

<p>
株式会社アンドリュー<br>tel:03-1234-5678<br>111-2222 東京都千代田区<br>
</p>

●表示例

f:id:andrewdaily:20170901141147p:plain

 

見出しを意味する<h1>〜<h6>

こちらのタグは見出しを指定したい時に使います。見出しタグとは、ユーザーと検索エンジンの両方にページ内のコンテンツ構成を正しく伝えるために使用する技術のことです。そのため、見出しタグで囲まれた分は普通の文よりも大ききく表示されます。

 

●使用例

//見出しタグ
<h1>テキスト</h1>
<h2>テキスト</h2>
<h3>テキスト</h3>
<h4>テキスト</h4>
<h5>テキスト</h5>
<h6>テキスト</h6>

 

●表示例

 

f:id:andrewdaily:20170901213558p:plain

ちなみにSEOに最も良いとされているのは、<h1>〜<h6>まで順番に使って(全部使わなくても良い)ブログを書くと良いと言われています。

 

画像を意味する<img>

<img>タグはimageという英単語の略になります。画像を表示させたい時に使うと良いでしょう。

 

●使用例

//srcの所にurlを入れる
<img src="https://goo.gl/HYLxix">

 

●表示例

f:id:andrewdaily:20170901214857p:plain

 

リンクを意味する<a>

 <a>タグはリンクの場所を指定する時に使えるタグになり、anchorという英単語の略になります。ウェブサイトで使うえるHTMLのタグはたくさん存在しますが、リンクタグは、検索エンジンにコンテンツの内容を伝える時の指標として使われるのでとても重要なタグになります。

●使用例

<a href="https://www.google.co.jp/">Googleだよ</a>

 

●表示例

f:id:andrewdaily:20170902120058p:plain

hrefの「""」の中にリンクを入れることを忘れないようにしましょう。

 

下線が引ける<u>

<u>タグは下線が引けるタグになり、underlineという英単語の略になります。固有名詞や外国語を他の文章と区別したい時に使えるタグになります。

 

●使用例

<u>金閣寺</u>は日本でとても有名なお寺になります。

 

●表示例 

f:id:andrewdaily:20170902130124p:plain

 

引用するときに使う<blockqoute>

 <blockqoute>タグは転載文や引用する時に多く使われる引用タグになります。ブログを書いていて引用を使う場面があった時に使うと便利なタグになります。短い引用よりも比較的長いテキストを段落ごと引用する際に使用するのがオススメです。

 

 

●使用例

1.ジョブズの名言
<blockquote>
将来を見据えて点と点を繋げることはできない。過去を振り返って点を結ぶだけだ。だから、いつか点は結ばれると信じなければならない。
</blockquote>

 

●表示例 

f:id:andrewdaily:20170902122227p:plain

 

細目や注釈を意味する<small>

 免責事項や規約、コピーライトなどに使うことが出来る<small>タグです。主にフッターに使われることが多いでしょう。

 

●使用例

<small>© 2017 アンドリュ inc.</small>

●表示例

f:id:andrewdaily:20170902123952p:plain

 

リストを意味する<ul><li><ol>

最後はリストを意味するタグになります。何かをリストで表示させい時に使える便利なタグです。<ul>は配置順に意味を持たないタグになり、<ol>は配置順に意味を持たせるタグになります。<li>はlist itemの略になります。

 

●使用例

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

●表示例

f:id:andrewdaily:20170902125147p:plain

 

 

まとめ

いかがでしたでしょうか。

今回紹介したHTMLタグはすぐにでもブログに使うことができるので、是非お試しください。最初は、難しく感じるかもしれませんが慣れれば表現の幅が広がっていくので是非とも挑戦していきましょう。

 

もし、HTMLを理解することができたら、次はCSSにいくことをオススメします。HTMLとCSSを使いこなすことができたら自分で完全にデザインすることができるようになるからです。そうすれば、はてなブログで自分のサイトを開発することだってできるようになりますよね。なので、是非ともCSSも挑戦していきましょう。

 

そして、これからのブログの運営に役立てていってもらえたら嬉しいです。

参考にした本

スラスラわ分かるHTML&CSSのの基本

たった1日で基本が身につく!HTML&CSSのの超基本