当記事の信頼性
- 現役Webマーケター
（元Webディレクター） - 東証一部上場の不動産系企業で勤務
- 最高収益：月間30万円
【HTMLの超基本】HTMLでよく使う覚えておきたい必須タグ23選
2020年5月12日
今回はウェブサイト・ブログを作るために必要なhtmlについて、初心者向けによく使う、知っておくと為になるhtmlタグについて書いていきます。
おそらくこの記事を読まれている方はご自身でhtmlを身に付けてウェブサイト・ブログを作るため、改修するために、htmlコーディングを勉強されている方だと思います。
私も最初は必死に色んなタグを覚えようと頑張りましたが、100種類以上あるhtmlタグの全てを覚える必要はありません。
その中でも、必須で覚えておかないといけないhtmlタグをおさえておくだけで、次のステップに進みやすくなると思いますので、この記事を参考にしてもらえたらと思います。
目次
HTMLとは？
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略になります。
簡単にいうと、私たちが普段見ているWebページを作る要素(マークアップ言語)になります。
HTMLについては別記事で詳しく解説しているので是非読んでみてください。
[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”6908″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]文章情報を示すHTML
htmlタグ
htmlタグは、Webページがhtmlで作られているページであることを示すタグになります。お決まり文句なので、あまり考えず覚えましょう。htmlタグの中は後述するheadタグとbodyタグで構成されています。
htmlタグは、lang属性で言語を指定することができます。 例えば、日本語の場合はlang=”ja”、英語の場合はlang=”en”、中国語の場合はlang=”zh”を指定します。
<html lang="ja">
<html lang="en">
<html lang="ch">headタグ
headタグは、Webページのヘッダ情報を示すタグになります。ヘッダ情報とはタイトル、リンク情報、スタイルシートなどの情報を指します。headタグ内に記述したソースコードは基本的にウェブサイト上には表示されない情報になります。
titleタグ
titleタグは、Webページのタイトルを示すタグになります。titleタグで設定した情報は、Google・Yahooなどの検索エンジンの検索結果画面、ブラウザで表示した際のタブに表示されます。
metaタグ
metaタグは、Webページのメタデータを示すタグになります。メタデータとはデータのデータという意味なります。htmlタグでの解釈としては、あらゆる情報（メタデータ）と考えておけば問題ありません。metaタグの代表的なものとしては、titleタグ、descriptionタグなどがあります。
metaタグではcharset属性で文字コードを指定することができます。
<meta charset="UTF-8">linkタグ
linkタグは、Webページを構成するhtmlに含まれていない外部ファイルのhtml、cssなどのファイルを読み込む際に使うタグになります。
linkタグは、href属性とrel属性を付ける必要があります。href属性はリンクする外部ファイルのURLを入力します。rel属性はリンクタイプを入力します。 リンク先の外部ファイルとの関係性を示すキーワードを指定します。
cssファイルを読み込む際は、以下のように記述します。
<link rel="stylesheet" href="default.css">HTML5タグリファレンスでリンクタイプがまとめてあったので参考にしてみて下さい。基本的にはalternateとstylesheetを覚えておくだけで問題ありません。
・alternate ……現在文書の代替表現を指定します。
HTML5タグリファレンス
・author ……現在文書の作者へのリンクを指定します。
・help ……ヘルプへのリンクを指定します。
・icon ……現在文書を表すアイコンをインポートします。
・license ……現在文書の著作権ライセンスに関する文書へのリンクを指定します。
・next ……現在文書の一つ後の文書へのリンクを指定します。
・pingback ……現在文書のpingbackサーバのアドレスを指定します。
・prefetch ……先読みするべき外部リソースを指定します。
・prev ……現在文書の一つ前の文書へのリンクを指定します。
・search ……現在文書の関連ページを検索するためのリソースへのリンクを指定します。
・sidebar ……ブラウザのサイドバーに表示する外部リソースを指定します。
・stylesheet ……スタイルシートをインポートします。
・tag ……現在文書に付けるタグを指定します。
文章情報を示すHTMLでソースコードを作成してみたので、使い方の参考にして下さい。
<html>
<head>
<title>Webページのタイトルが入ります</title>
<meta charset="UTF-8">
<meta name="description" content="Webページの説明文が入ります">
<meta name="keywords" content="キーワードが入ります,キーワードが入ります">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="wide.css" title="wide style">
<link rel="alternate stylesheet" href="contrast.css" title="contrast style">
</head>
<body>
Webページのコンテンツが入ります
</body>
</html>セクションを示すHTML
bodyタグ
bodyタグは、実際にWebページに表示される主なコンテンツ部分の情報を示すタグになります。
header・footerタグ
headerタグは、ナビゲーション・イントロダクションなどの情報を示すタグになります。
footerタグは、利用規約・著作者・連絡先などの情報を示すタグになります。
navタグ
navタグは、ナビゲーションを示すタグになります。ウェブサイトの上部にあるグローバルナビゲーションなどを表示する際に使われるタグになります。
sectionタグ
sectionタグは、特定の部分を一つのセクションと定義する際に使われるタグになります。sectionタグは厳密な目的・意味が無いため使いにくい部分もありますが、基本的に何かの一部を示すタグと覚えましょう。
h1〜h6タグ
h1〜h6タグは、Webページ内で見出しを示すタグになります。数字が大きくなるに連れて、見出しのレベルが下がります。
グループを示すHTML
divタグ
divタグは、特定の部分を一つのグループと定義する際に使われるタグになります。divタグはレイアウトを構成する際にcssと合わせて使うことが多いタグになります。とても便利なタグですが、他のタグの方が適切な意味を持っている要素の場合は、divタグを使わないようにした方が好ましいです。
pタグ
pタグは、段落（パラグラフ）を示すタグになります。
ul・ol・liタグ
ulタグ、olタグ、liタグは、リストを示すタグになります。ulタグは順序の決まりが無いリストを表示する時に使います。逆にolタグは順序の決まりがあるリストを表示させる時に使います。liタグはulタグとolタグの中にリスト項目として使います。
<ul>順序の決まりが無いリスト</ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
<ol>順序の決まりがあるリスト</ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>table・tr・th・tdタグ
tableタグ、trタグ、thタグ、tdタグは、表を示すタグになります。tableタグは表を作成する際に使うタグになります。trタグ、thタグ、tdタグはそれぞれ以下の意味を持っています。
trタグ・・・表の横一行
thタグ・・・表内の見出し
tdタグ・・・表の項目
figureタグ
figureタグは、図表を示すタグになります。figureタグを使う図表というのは、図・写真・イラストなどを指します。
テキスト・画像・動画を示すHTML
aタグ
aタグは、リンクを示すタグになります。Webページでテキストや画像にリンクを貼る際に使います。aタグはtarget属性と合わせてよく利用します。target属性を使うことで、リンクをどのように開くかを指定できます。特にtarget属性に「_blank」を付けて、新しいタブ・ウィンドウでリンク先を開くように指定できます。
<a href="https://nuko-blog.net/">現在のタブで開くリンク</a>
<a href="https://nuko-blog.net/" target="_blank">新しいタブで開くリンク</a>em
emタグは、Webページの特定のテキストの強調を示すタグになります。
strongタグ
strongタグは、Webページの特定の部分で重要性・緊急性を示すタグになります。
spanタグ
spanタグは、特定の部分を一つのグループと定義する際に使われるタグになります。spanタグはstyle属性、class属性、lang属性などと合わせて使い、特定の部分にcssを適応することができます。
blockqouteタグ
blockqouteタグは、引用・転載を示すタグになります。
brタグ
brタグは、特定の部分を改行する際に使われるタグになります。
imgタグ
imgタグは、画像を表示する際に使われるタグになります。imgタグは、必須でsrc属性を付ける必要があります。src属性で画像ファイルのURLを指定することで、Webページに画像を表示することができます。
videoタグ
videoタグは、動画を表示する際に使われるタグになります。videoタグもimgタグと同じようにsrc属性で動画ファイルのURLを指定して、Webページで動画を表示することができます。
