HTMLタグって何?HTMLタグの基礎知識と基本的なタグ

LINEで送る
Pocket

%e6%89%8b%e5%b8%b3

HTMLタグとは一体何のことなのでしょうか。また、どのような種類があるのでしょうか。HTMLを使ううえで、サイトを作るうえで、とても重要なものです。ここでは、「HTMLタグって何?HTMLタグの基礎知識と基本的なタグ」について、紹介いたします。HTMLタグは非常に多くの種類ありますので、少しずつ覚えていきましょう。使っている内に自然と覚えていきます。これから、HTMLの勉強を考えている方は、参考にご覧ください。

スポンサーリンク

1.HTMLタグって何?HTMLタグの基礎知識

c069a5e427881386b00c6b6f12ff313b_s

ここでは、HTMLタグの基礎知識について紹介いたします。

1.HTMLタグの基礎知識

まずHTMLとはHyper Text Markup Languageの略です。マークアップ言語のことであり、テキストや大き座、画像など、タグを使って定義付けを行います。定義付けを命令するために使い、開始タグと終了タグとセットで用います。なかには終了タグが存在しなかったり不要なものもあります。〜として使い、タグの中に属性を指定することも可能です。HTMLタグは非常に多くの種類があり、下記でその一部を紹介しています。

よく使う基本的なHTMLタグ

ここでは、多くのHTMLタグの中でも、使う機会が多い基本的なものを中心に紹介します。

1.見出し:h1〜h6

文章を作成する際の見出しタグがh1〜h6です。数字が小さい方が重要度が高く大きく目立つ見出しを作れます。1つのサイトにh1、h2、h3、h4、h5、h6のすべてを使うと逆に分かりづらくなってしまいますので、1サイトにつき多くても3〜4つにした方がまとまるでしょう。この文章の「見出し:h1〜h6」がh3の見出しタグを使用しています。サイト内にメリハリをつける意味でも非常に役立つタグです。

2.段落:p

pは段落を意味するHTMLタグです。サイト内で使うことで、読みやすく構成できます。文章の段落をくくる場合には必ず使用します。

3.太文字:b

bは太文字にするためのHTMLタグです。文章内で強調したい部分を太文字にすることで、分かりやすくなります。シンプルでありながら、非常に活用できるタグです。

4.強調:em、strong

テキストやコンテンツを強調したい場合には、emのタグを使います。emよりもさらに強調したい場合は、strongタグを使います。それぞれどれくらい強調したいかによって、使い分けるようにしましょう。

5.アンダーライン:u

uのHTMLタグを使えば、強調したい部分にアンダーラインを引けます。アンダーラインがあるかないかで文章の見え方は変わり、強調できます。太文字などと一緒に使っていくことで、よりメリハリの効いたサイトを作れます。

6.文字の色変え:font color

font colorのHTMLタグを使えば指定した文字の色を変えることができます。使う際は、「font color=”色”」で色を指定します(緑=greenなど)。これにより、指定した文字を好きな色に変更でき、サイト内のメリハリを付けることができ、強調も可能です。

7.打ち消し線:strike

strikeのタグを使えば、文字に打ち消し線を付けれます。サイト内で文章の訂正をしたい時に非常に便利です。閲覧者もどこが訂正されたのかが一目で分かります。

8.斜め文字:i

指定した文字を斜め文字にしたい場合はiのHTMLタグを使います。太文字同様、大事な部分を斜め文字にすることで、特定の部分を強調できますし、サイト内にメリハリを作れます。覚えておくと便利なタグの1つです。

9.漢字にふりがな:ruby

難しい漢字を読みやすくしたり、幅広い年齢層の方に読んでもらうサイトなどを作る際は、漢字にふりがなを打っても効果的です。rubyのHTMLタグを使えば、指定した漢字にふりがなをうつことができます。

10.文章を改行する:br

段落をつけたい場合はpのタグを使いますが、改行したい場合はbrのHTMLタグを使います。brを使うことで希望の場所で改行できるため、読みやすい文章を作れます。pと上手く使い分けることが大事です。

11.改行させない:nobr

brを使えば文章を改行できますが、nobrを使えば文章を改行させないようにすることができます。サイトの端に到達しても文章がそのまま横に表示されます。サイトの見せ方によってnobrを使いましょう。

12.文章を引用する:blockquote

blockquoteのHTMLタグを使えば、特定の文章を引用できます。SNSや他サイトから文章を引用して表示する場合に使います。客観的な情報を載せたい場合などに役立ちます。

13.動画挿入:video

動画を表示したい場合は、videoのHTMLタグを使います。VideoはYouTubeやその他の動画も表示できますので、動画を使った説明や紹介をする場合に便利なタグです。

14.箇条書きリスト:ul、li

サイト内に箇条書きリストを作りたい場合は、ul、liのHTMLタグを使用します。手順の説明など、箇条書きで分かりやすく説明したい場合に使えます。

15.番号付きリスト:ol、li

ol、liのHTMLタグを使えば番号付きのリストを作れます。ただ箇条書きをしたい場合は、ul、liを使いますが、ol、liを使えば、1、2、3、4、などの番号が先頭に表示されます。順を追って説明したい場合などに役立ちます。

16.画像挿入:img

imgを使えば好きな画像をサイト内に表示できます。商品画像やおもしろ画像、思い出画像など、自由に載せることができます。サイトを見ている側も画像がある方が信用できる可能性があります。

17.タイトル:title

サイト内のタイトルを表示する場合は、titleのHTMタグを使います。Titleタグで表示されたテキストが検索結果などに表示されます。サイトを作る際に必須のタグとなっています。

18.出典先を表す:cite

citeを出典先や参照先を表すためのHTMLタグです。何かを参照の元、サイトを作成する場合には使いましょう。

19.フォーム作成:form

サイト内に入力フォームを作りたい場合はformのHTMLタグを使用します。サイト内にフォームを作成する必要がある場合に用いましょう。

20.メニュー表示:menu

サイト内にメニューを表示したい場合に使うのがmenuのHTMLタグです。ulタグを使う方がおすすめですが、menuタグがあるということを覚えておいて損はありません。

21.文字を等幅フォントで表示:tt

ttのHTMLタグを使えば、文字を等幅フォントで表示できます。サイト内で等幅フォントで見せたい箇所がある場合などに役立ちます。

まとめ

いかがでしたでしょうか。今回は、「HTMLタグって何?HTMLタグの基礎知識と基本的なタグ」について紹介いたしました。HTMLタグはコンピュータに定義付けを行ううえで必要なものであり、HTMLタグがあるからこそテキストなどをサイトに表示できます。HTMLタグの種類は非常に多くありますが、まずは基本的なタグを覚えることが大事です。

応用的な内容のHTMLタグは、サイトを作っている内に自然と覚えていきますので、まずは基本を覚え、実際に使っていきましょう。早速、試しに使ってみましょう!

スポンサーリンク

LINEで送る
Pocket

Facebookでのご購読が便利です