更新日: 2018年12月07日
公開日: 2018年12月03日

【HTML初心者】最初に覚えたいHTMLタグ17選

アメブロやLivedoorブログ、WordPressなどでは HTMLの知識がなくても、ボタンひとつで文字の色や大きさ、リンク設定などが変更可能。
しかし、「文字の意味をポップ表示したい時（abbrタグ）」「箇条書きナンバーを 1からでなく 5からなど途中から始めたい時」などイレギュラーな表現をしたい場合どうでしょうか？ブログの標準機能だけで表現できるでしょうか？
こうした問題、HTMLタグの知識があればスムーズに解決できます。
今回は、そんなちょっと表現力を広げるための『HTMLタグ』をご紹介させて頂きます。

【HTML初心者】最初に覚えたいHTMLタグ17選
HTMLのタグとは何か？
HTMLを書く環境を整える
HTMLタグを書いてみよう
HTMLファイルの基本構造を知る
まず最初に覚えたいHTMLタグ20選
HTMLタグの中のいろいろ
まとめ

【HTML初心者】最初に覚えたいHTMLタグ17選

HTMLのタグとは何か？

HTMLタグは、Webページを構成するために必要なコードの一種で、 WebデザインやWebアプリの開発には必須の知識。また最近では、Googleの検索結果ページに検索結果と関連の強いWebページのHTMLタグが読み込まれたりするケースも。つまりSEO対策とHTMLタグは強い結びつきがあるんですね。

【Google検索結果事例】

HTMLタグは現在全部で 118 種類あり、よく使う画像タグの <img src="●●.jpg"> やリンクタグの <a href="●●.com"> からちょっと便利なディテイル・タグの <details> やセレクト・タグの<select> までいろいろ。全部覚えようと思うと大変ですが、一通りのタグ機能に目を通しておくと HTMLの可能性が広がることでしょう。それではまず HTMLタグを実際に使ってみるとよくイメージできると思いますので、HTMLタグを書く環境からご紹介していきますね。

HTMLを書く環境を整える

短絡的にはメモ帳（Windows）やテキストエディット（Mac）でも HTMLタグを書けますが、それよりも便利なテキストエディタが多数公開されています。

【HTMLコードに適したテキストエディタ例】

Visual Studio Code
Atom
Sublime Text
NotePad++ etc

今回はプログラマーの中でも人気の Sublime Text を使って HTMLタグを書いていきます。Sublime Text のインストール方法は以下をご参考に。今回は、Windows版でご紹介していますが、 Macでも Ubuntu（Linux）でも基本操作は一緒です。約 5分でインストール完了できると思いますよ。

Sublime Text 公式ページにアクセス http://www.sublimetext.com/
DownLoad ボタンをクリック
実行ボタンをクリック
「このアプリがデバイスに変更を加えることを許可しますか？」　はい
インストーラーが起動するので「NEXT」ボタンを連打し、インストール完了
スタートボタンをクリックして Sublime Text がインストールされていることを確認

HTMLタグを書いてみよう

Sublime Textのインストールが完了したところで、実際にいくつか HTMLタグを書いて体験してみましょう。 Sublime Textを起動すると真っ黒な画面が表示。このままでも HTMLタグを書いていけますが、ファイルの種類をしておく方が便利。そのためにまずは「名前をつけて保存」(Save As...)で HTMLファイルを指定しておきます。

適当な場所に適当なファイル名で保存。今回は HTMLファイルになるので、ファイル末尾を .html とします。

今回のファイル保存先／　デスクトップ
今回のファイル名／　demo.html

そして試しに <h2 と Sublime Textに入力。すると入力した文字の下に「h2 tag」というバーが表示。

ここでリターンキーを押すと、 HTMLタグが自動で記述されます。

<h2> が開始タグでつまりここからが <h2> タグですよ、という印。 </h2> は終了タグでここまでが <h2> タグでした、という印。このように HTMLタグには「始まり」と「終わり」を記すタグもあったり、ないタグ、例えば画像制御の <img> タグもあったりします。

<h2>Hello</h2> など適当な文字を書いて、ファイルを保存。

そして demo.html ファイルをダブルクリックすると指定したブラウザで demo.html ファイルの内容が表示されます。

ブラウザが本当に自分のコードを認識しているかどうかは、ブラウザ上でマウスを右クリック、そして「ページのソースを表示」を選択すると HTMLコードを確認できます（Google Chromeの場合）。

先ほど入力した <h2>Hello</h2> が表示されていますね。

HTMLファイルの基本構造を知る

タグの使い方が分かったところで、 HTMLファイルの基本構造も念の為知っておきましょう。

HTMLの基本構造は、家に例えると「間取り」や「インテリア」「機能」に相当するもので、それぞれの役割だったり、記述方法を知っておくと HTMLコードを見たり書いたりするときに役立ちます。

【HTMLファイルの基本構造】

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>タイトル</title>
</head>
<body>
    <h2>Hello</h2>
</body>
</html>

【コード解説】

【1行目】　<!DOCTYPE html>

ここから下は HTML 5 ですよ、という宣言文。HTML4の場合は、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

だったり、 XHTML の場合は、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

と DOCTYPE にもいくつか種類があります。これからいろんな Webページのコードを見る中で DOCTYPE 知っておきたいですね。

【2行目】　<html lang="ja">

こちらはページ内に書かれている文字の種類をブラウザに伝えています。日本語の場合は ja で、英語は en、中国語は zh と世界各国の言語が用意済み。このコードを元に「このページを翻訳しますか？」というブラウザ機能が働いたりします。

【3 〜 5行目】　<head>

<head> から </head> までは、この HTMLファイル（Webページ）に関する情報や使用するファイルの読み込みなどを記述。今回の例では、

<title>タイトル</title>

が記述され、この <title> タグの情報は、 Webページではなく、ブラウザのタブに情報が表示。

<title> 以外には、 Webページの概要を記す<meta>タグやファビコンもしくはテンプレート（CSS）を読み込む <link>タグがよく記載されます。

【6 〜 8行目】　<body>

<body> から </body> までは、Webページに表示させたい画像や文字といった本文を記述。見出しタグの <h2> 以外にも、<div> や <table> など様々な HTMLタグが登場してきます。

【9行目】　</html>

HTMLコードの終了を宣言します。

まず最初に覚えたいHTMLタグ20選

h1〜h6タグ

<h1> や <h2> といった h● タグは「見出しタグ」と言われるものになります。Webページのタイトルや文中の小タイトルとして使われ、閲覧者に対して「見やすさ」を提供。また検索エンジンの Googleに対しては「このページにはこんな内容のことが書かれている」というメッセージにもなります。Livedoorブログや WordPress などではボタンひとつで見出しタグを指定できますが、見出しタグのHTMLコードを知っておくことは記事編集力のアップにつながることでしょう。

aタグ

Webページでリンクを設定したい場合、<a>タグを使います。「リンク」と一言でいっても使い方はいろいろで、文字にリンクを設定する場合、画像にリンクを設定する場合、ページを開くと同時にリンクページを開く場合など。アフィリエイトを考えている方は <a>タグスキルは必須でしょう。

imgタグ

Webページ内で画像を表示したい場合は、<img>タグを使用。画像クリックでリンクしたい場合は、

<a href="https://codecamp.jp">
<img src="https://●●●.png">
</a>

という具合に、<img>タグを <a>タグで囲む形になりますね。<img>の場合、終わりタグの </img> は不要です。

ul・ol・liタグ

箇条書きで文章を表現したい場合、<ul> や <ol>タグを使用。<ul>は丸印の箇条書き、olは数字バージョンの箇条書きに。また <ul>、<ol> を使う場合は、各行を <li>タグで区切りますね。<li></li>内の文字が一段落となります。

divタグ

Webページのデザインを考える中で、特定範囲だけ文字の色や背景などレイアウトを変えたい場面が出てきます。そんな「特定範囲」「任意の範囲」を区切る時に <div> が使えます。通常 <div> の単語で使うことは少なく、 <div class="●●"> など divの後に class や id といったラベル（名札）が付きます。CSSの知識も必要となりますが、よく使うタグになりますので押さえておきましょう。

spanタグ

<span>タグは、Webデザインに関係する HTMLタグで、文中の一部分の文字だけ色やデザインを変えたい時に使います。先ほどの <div>タグとも似ていますが、 <span>タグの場合は改行が入らない特徴がありますね。

tableタグ

<table> タグは、表を使うときに使用されます。実際には、

<table>
    <tr>
        <td>セル１</td>
        <td>セル２</td>
    </tr>
    <tr>
        <td>セル３</td>
        <td>セル４</td>
    </tr>
</table>

というように、<tr> や <td> など複数のタグもセットで必要になりますね。

brタグ

<br>タグは、文書を改行したい時に便利。よく似た機能を持つ <p>タグや <div>タグでも改行されますが、表示結果は上記のように異なります。

<br>タグは、Wordの Shift + Enter、つまり「新しい行」を意味し、それに対して <p> や <div> は、「新しい段落」を意味します。チョットした違いですが、『間』の表現力が高まると思いますよ。

delタグ

<del>タグは、文字や文章を訂正して表現したい場合に使用。ブログなどで紹介していた情報が更新された場合などに使いますね。Google検索エンジンにも <del>タグを使うことで「この <del> タグ内の文字の重要性は低いですよ」という意味を持つ、という説もあります。

<del> とは逆に「文字を追加した」ということを検索エンジンに伝えたい場合は、 <ins>タグが使われます。

値段：<del>820</del> <ins>780</ins> 円 とひと手間かけることによって、より検索エンジンに正確な情報を伝えることができますね。

尚、 <del> と似たものに <s>タグがあります。<s>タグは関係性がなくなった文字につけるタグですが、正直なところ既存のWebページではあまり見かけない表現方法でしょう。

strongタグ

<strong>タグは文字や数字を強調したい場合に使用。ブログ作成ツールでも似たような b という強調表現がありますが、見た目は同じでも検索エンジン的な意味は違ってきます。文字の強調を意味する <strong> に対して、 <b> は太文字という装飾的な意味合い。間違って使わないように注意したいですね。

【無料ブログ作成ツールの事例】

参考：Livedoorブログ

emタグ

<em>タグは、強調かつ文字を斜めで表示したい時に使用。<strong>の斜め表示版といったところでしょう。尚、ブログ作成ツールでは、斜め表示には I というアイコンを見かけます。

これは確かに斜め表示されますが、 <b>タグ同様に装飾的な意味合い。SEOを意識して強調かつ文字を斜め表示したい場合は <em>タグの方が良さそうですね。

blockquoteタグ

blockquote、ちょっとつづりが長いですが「引用」タグとして使用できます。他のWebページから文章をコピー＆ペーストする場合に使用。

無料のブログ作成ツールでは ” でツールバーに表示されていますね。

<blockquote>タグを HTMLで理解するメリットとしては、

<blockquote cite="https://blog.codecamp.jp">

など引用元をメモしたり、サイト内リンクとして検索エンジンに認識させることができます。

【blockquoteのサンプル】

rubyタグ

<ruby>タグは、ふりがなを付けたい時に使用。上記のようにふりがな部分は、<rt></rt> で囲まれた中になります。

codeタグ

<code>タグは、「この文字はプログラムコードですよ」とブラウザや検索エンジンに認識させるための機能。普通の文章としてもコードは表現できますが、 <code>タグ内の文字はレイアウトが違って分かりやすいですね。

またコード以外にも、プログラムの実行結果を表現する <samp> や変数を意味する <var>、キーボードを意味する <kdb>タグなどもありますので参考までに知っておきましょう。

uタグ

<u>タグは、アンダーライン・タグでブログツールなどでは U で使われていますね。

下線、多くの方がノートやメモ帳の重要部分に下線を書いてきたので馴染み深い文字の表現方法ですが、HTMLの場合はちょっと注意が必要です。それはリンクの表現で下線が使われているからです。

単なる「下線」かリンクを含む「下線」か、一見すると分かりにくいです。そのため一般的には、下線を使い時は下記のように CSS などでリンクの下線とは違うレイアウトを指定してあげます。

dl 、dt、ddタグ

<dl>タグは、言葉などの概要リストを表現したい時に使用。<ul> や <ol> といったリスト表現方法もありますが、<dl> の場合は「タイトル」と「説明」がタグ（<dt> 、 <dd>）で区分されています。ブログツールにはない機能なので活用したいですね。

hrタグ

<hr>タグは、ホリゾンタル、つまり水平線横線という意味として HTML4 では使われていました。Wordなどの文章作成ツールでも馴染みある機能と思います。しかし、HTML5における <hr> は、見た目は横線で一緒ですが、ブラウザとしては「テーマの切り替わり」として認識。「第一章」「第二章」など区切りを認識させたい時や表現したい時に使用ですね。

尚、<hr>タグを使わずに横線を表現したい場合、以下のような CSSコードで表現できますよ。

HTMLタグの中のいろいろ

HTMLタグを勉強していく内に <div class="◆◆"> や <a href="○○" target="_blank">、<img src="●●" alt="■■">、<h4 style="text-align:center"> などHTMLタグの中にいろいろな文字が追加されていることに気づくと思います。これはレイアウトに関するものや動きに関するもの、ブラウザへの補足認識事項などタグやキーワードによって意味は色々です。

まずは HTMLタグの基礎を知った上で、これらの機能を知っていくとより豊かな Web表現を可能にしてくれると思います。冒頭ご紹介した『箇条書きナンバーを 1からでなく 5からなど途中から始めたい時』も HTMLタグの中に補足事項を追加すると箇条書きを 5から始めることができますね。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら