【これでマスター】HTMLの基本を身につけよう！よく使うHTMLタグ9選を紹介

「HTMLってよく聞くけど何のこと？」
「基本的な書き方を教えて」
「実際にWebページを作るには何が必要？」

ブログ運営やプログラミングなどWeb系の技術に触れるとき、必ずと言っていいほど必要になるのはHTMLの知識です。

とはいえ、まったく予備知識がない方にとっては何のことかいまいちピンと来ていないのではないでしょうか。

そこで、この記事では

• HTMLとは何かを30秒で解説
• 基本的な書き方のルール
• よく使うHTMLタグ9選
• 書くために準備しておくもの

と、HTMLの基本について易しく解説していきます。

特に、よく使うHTMLタグを性格・性質別に紹介しているので、辞書的に参照しやすい構成に仕上がっています。

ぜひ、この記事を参考に、HTMLタグの基本を身につけてみてください！

そもそもHTMLってなに？基本を30秒でサクッと解説

たとえば、Webページに文字を表示できているのも以下のように記述されているからです。

<p>たとえば、Webページに文字を表示できているのも以下のように記述されているからです。</p>

1つひとつのWebページは<p></p>のようなHTMLタグに囲まれることで、ブラウザで閲覧できるようになっています。記述が簡単なこともあり普及率は圧倒的で、現在公開されているWebページのほとんどはHTMLをベースとして制作されています。

よく誤解されやすい点が、HTMLはプログラミング言語ではないということです。HTMLはあくまで、文書の各部分がどのような役割をもっているのか目印をつけている（マークアップしている）に過ぎません。

また、検索エンジンがWebページに書かれていることを読み取るのにも、HTMLが欠かせません。

検索結果一覧に各記事のタイトルが表示されていますが、それもHTMLでWebページが作られているからです。具体的には、Webページのタイトルタグに書かれている文字を記事名として表示するというからくりになっています。

なお、近年は構造と見栄えの分離の観点から、赤文字や下線など文書の装飾に関してはCSS言語を用いるのが一般的になっています。詳しくは、過去記事「【例文あり】CSSの基本を解説！初心者が効率よく身につけるための勉強法とは」にて解説しています。

HTMLの基本的な記述ルール

HTMLはほとんどのWebページの基本となる言語です。記述には共通するルールがあるため、これからHTMLを使う予定がある方は必ず頭に入れておきましょう。

以下の3つがポイントです。

1. 開始タグと終了タグではさむ
2. 入れ子構造で書く
3. 開始タグの中に属性を入れる

それぞれ詳しくみていきます。

1. 開始タグと終了タグではさむ

先ほどの例文を見てみましょう。

<p>たとえば、Webページに文字を表示できているのも以下のように記述されているからです。</p>

これはHTMLの基本的な形で、

• p：HTML要素で段落を意味する
• <p>：開始タグ。ここから段落が始まりますの意味
• </p>：終了タグ。ここまでが段落ですの意味
• 間に挟まれた文章：実際にWebページに表示される文章

という構造になっています。

p（段落）タグを別のHTML要素に置き換えることで、他の性質を持った文章へと自在に変化させられます。

2. 入れ子構造で書く

HTMLは、1つの文章に複数の性質を持たせることも容易です。文章の一部分を強調したいとき、以下のように記述しましょう。

<p>文章の一部分を<strong>強調</strong>したいとき、以下のように記述しましょう。</p>

このように、HTMLは入れ子構造で記述することを覚えておきましょう。

3. 開始タグの中に属性を入れる

HTML要素は、追加情報として属性を持てます。これは、文書の装飾を行うCSSを読み出すときなどに使われます。

たとえば、一部分に蛍光マーカーを引きたいとき、以下のように記述します。

<p>たとえば、一部分に<span class="keiko_yellow">蛍光マーカー</span>を引きたいとき、以下のように記述します。</p>

このルールを覚えておくと、Webページの装飾にも幅が出てくるでしょう。

覚えておきたい基本のHTMLタグ9選

HTMLは比較的簡単なルールで記述できます。しかし、文書構造の目印となるHTMLタグを知っていないと、Webページ制作の幅は広がりにくいでしょう。

そこで、こちらではよく使う9種類のHTMLタグを紹介していきます。

1. 文書全体の構造を規定するタグ
2. SEOにも重要な見出しタグ
3. ページレイアウトを規定するタグ
4. ページをつなぐリンクタグ
5. 記事に画像を挿入するタグ
6. 箇条書きを表すリストタグ
7. 表で見やすくまとめるテーブルタグ
8. Webページには反映されないコメントタグ
9. 文字装飾タグはCSSで規定

後から辞書的に使えばOKなので、完全に覚えておく必要はありません。

あらかじめ「こんなHTMLタグがあったな」というのを知っておくと検索しやすくなるので、ざっくり頭にいれることを意識してみてください！

1. 文書全体の構造を規定するタグ

HTMLで文書を作るとき、含めなくてはいけない要素があります。

以下の6要素は必ず記述しましょう。

これらがあって初めて、HTML文書の体裁をなします。すべてを正確に覚えておく必要はありませんが、実際にWebページを制作するときには存在を思い出しましょう。

2. SEOにも重要な見出しタグ

見出しタグは、記事を階層構造でわかりやすくまとめるために必要です。

たとえば、以下の要素があります。

• <h1></h1>：1番大きな見出し。記事に1つだけタイトルとして使う
• <h2></h2>：2番目に大きな見出し。記事内の大見出しに使う
• <h3></h3>：3番目に大きな見出し。記事内の小見出しに使う

さらに数字が大きくなるほど深い階層になっていき、最大でh6まで用意されています。

見出しは、数字を順番に使うことが重要です。h1の次にh3を使うなど並びがジャンプしてしまうと、SEOの観点からも望ましくないので十分注意するようにしましょう。

3. ページレイアウトを規定するタグ

Webページの基本的なレイアウトを決めるのもHTMLタグの役割です。

たとえば、以下のタグを覚えておきましょう。

• <p></p>：段落タグ。基本的な文章に使用
• <br>：改行タグ。文章を改行して見栄えを良くするのに使用
• <blockquote></blockquote>：引用タグ。他の文献から文章を引用するときに使用

普段何気なく読んでいるWebの文章にも、裏側にはこのようなタグが隠れていますよ。

4. ページをつなぐリンクタグ

リンクもHTMLタグで簡単に設置できます。

たとえば、

過去記事「【例文あり】CSSの基本を解説！初心者が効率よく身につけるための勉強法とは」にて解説しています。

には以下のようなHTMLが記述されています。

<p>過去記事「<a href="https://skill-hacks.co.jp/media/css-basic/">【例文あり】CSSの基本を解説！初心者が効率よく身につけるための勉強法とは</a>」にて解説しています。</p>

基本的な構造は以下のとおりです。

• a：リンクを表すHTML要素
• href=” “：ダブルコーテーションの間にリンク先URLを記述する
• 間に挟まれた文章：リンクが設置される文章

その他の属性として、クリックすると新しいウィンドウでリンク先を開くなどが規定できます。

5. 記事に画像を挿入するタグ

記事内に画像を表示するとき img タグを使います。

これは入れ子構造にならず、単独で画像を表します。なぜなら、間に文字などのコンテンツを挟む必要がないからです。

具体的には、以下のように記述します。

<p><img src="画像のファイル名＋場所" alt="画像が表示できないときに代わりに表示する文章"/></p>

他にも属性はありますが、まずは src と alt を押さえておけば、基礎的な知識として問題ないでしょう。

特にalt属性によってテキストを加えることにより、SEOも効果があると言われています。SEOを意識したコンテンツを作成する場合は、画像にalt属性を設定するようにしましょう。

6. 箇条書きを表すリストタグ

箇条書きは、含まれるコンテンツにナンバリングするかどうかでHTMLタグが変わります。

【ナンバリングしない場合】

• 1つ目のコンテンツ
• 2つ目のコンテンツ
• 3つ目のコンテンツ

<ul>
 <li>1つ目のコンテンツ</li>
 <li>2つ目のコンテンツ</li>
 <li>3つ目のコンテンツ</li>
 </ul>

【ナンバリングする場合】

1. 1つ目のコンテンツ
2. 2つ目のコンテンツ
3. 3つ目のコンテンツ

<ol>
 <li>1つ目のコンテンツ</li>
 <li>2つ目のコンテンツ</li>
 <li>3つ目のコンテンツ</li>
 </ol>

<li></li>タグは何個あっても問題ありません。

ナンバリングされない<ul></ul> を使うか、ナンバリングされる<ol></ol>を使うか臨機応変に判断しましょう。

7. 表で見やすくまとめるテーブルタグ

HTML要素で表を作るとき、以下4つのタグを使用します。

• <table></table>：表の始まりと終わりを規定
• <tr></tr>：表の行を規定する。囲まれた部分が同一の行に表示される。このタグの数だけ行ができる
• <th></th>：表の最上段の見出し列を規定する。このタグの数だけ列ができる
• <td></td>：表の2行目以降の列を規定する。thタグとどちらか多い方だけ列ができる

たとえば、以下の表をHTMLタグで作るなら、このように記述されます。

<table>
<tr>
 <th>1行目1列目</th><th>1行目2列目</th>
</tr>
<tr>
 <td>2行目1列目</td><td>2行目2列目</td>
</tr>
<tr>
 <td>3行目1列目</td><td>3行目2列目</td>
</tr>
</table>

属性には、表の線の太さを調節したりコンテンツを中央に揃えたりできるものもありますよ！

8. Webページには反映されないコメントタグ

bodyタグ内にあっても、表示されないコメントを打ち込みたいときは<!--と-->で挟んで記述します。

たとえば以下のように使いましょう。

<h2>見出し</h2>
<!--ここから本文-->
<p>本文</p>

「ここから本文」はWebページ上に反映されません。

後から修正が入ったときにも対応しやすいので、なるべくコメントを残しておくのがおすすめです。

9. 文字装飾タグはCSSで規定

ここ10年くらいで、構造と見栄えを分離して表示しようという風潮が加速し、装飾を規定するCSS言語が普及しました。

CSSと組み合わせて使われることの多い範囲タグには以下のものがあります。

<span></span>：文中にワンポイントで使用できる

<div></div>：ブロックで適用するため、挿入すると改行される。文章を塊で装飾したいときに有効

詳しくは、過去記事「【例文あり】CSSの基本を解説！初心者が効率よく身につけるための勉強法とは」にて解説していますので、ぜひ参考にしてみてください。

HTMLを書くのに必要なもの

HTMLタグを使ってWebページの骨格を規定できます。それでは、実際にHTMLを記述するには何を準備すればよいのでしょうか。

以下の2つを用意しましょう。

1. テキストエディタ
2. Webブラウザ

どちらも無料で手に入れられるので、HTML文書を作成するハードルは高くありませんよ！

1. テキストエディタ

テキストエディタは以下のようなものが良いでしょう。

• Windowsのメモ帳：インストール不要。立ち上げが早い
• Sublime Text：プログラミングも基本サポート
• サクラエディタ：挙動が早く高機能

書き出すときに拡張子として.htmlを手入力で設定することで、HTML文書と認識してもらえます。

2. Webブラウザ

いつもネットサーフィンに使っているWebブラウザに、テキストエディタで作った文書をドラッグ＆ドロップしましょう。

たとえば、代表的なWebブラウザには以下のものがあります。

• Microsoft Edge：Windows搭載パソコンのデフォルトブラウザ
• Safari：Macのデフォルトブラウザ
• Google Chrome：Googleが開発したブラウザ

HTML文書はすぐに記述した結果がわかるので、プログラミング初心者の登竜門として位置づけられています。

ぜひ、HTMLを身につけたらプログラミングにも挑戦してみてください！

Skill Hacksなら最速でプログラミング初心者を脱出できる

• 初心者からWebアプリケーション開発の知識を学べる
• 無期限の質問サポート付き
• 買い切り型で受講期限も無制限

▼期間限定で無料配布中▼

• 経済的自立を果たす10のステップ
• 時給10円から年商10億円に至る道のり
• 最短で0→1を立ち上げる起業術
• お金持ちになる5つのルール
• すぐに実行できる即金マニュアル

>>無料で今すぐ受け取る

無料特典を受け取るか迷っている方は、こちらの記事「真面目」でも「頭がいい人」でもお金持ちになれないたった1つの理由」をお読みください。