【勉強嫌いでもわかる】HTMLタグの基本を学ぶ！初心者の忘備録

求職者支援訓練でwebデザインを学ぶデザイン初心者が、HTMLタグの基本知識を忘備録としてまとめました。HTML自体はそんなに複雑ではないので、このブログを見るだけで一通り理解できるはずです。デザイン初心者やブロガーさんは参考にしてください。

タグ一覧表はこちら

HTMLタグ	意味	備考
見出し	h1〜h6	見出しは、h1~h6タグを利用します。h1〜h6のhはheadingの略で、書籍の章立ての「章」に相当します。
段落	p	パラグラフ(段落)では、pタグを利用します。ブログの本文や商品説明で使われます。pはParagraphの略です。
改行	br	テキスト内で改行する場合は、brタグを利用します。brとはBreak（改行）の略です。
画像	img	画像を表示するには、imgタグを利用します。imgはImageの略です。
リンク	a	リンクを作成する場合は、aタグを利用します。aはアンカー（Anchor）の略です。
順番なしリスト	ul	リスト表示する場合は、ulタグとliタグを利用します。ulはUnoder list(順序のないリスト)の略です。
li	liはList Itemの略で各項目をliで挟みます。ulの中にliが入ります。
順番ありリスト	ol	順序のある箇条書きのようにリスト表示する場合は、olタグとliタグを利用します。olはOder list(順序のあるリスト)の略です。
li	liはList Itemの略で各項目をliで挟みます。olの中にliが入ります。
定義リスト	dl	定義リスト（定義する用語とその用語の説明を一対にしたリスト）を作る場合はdlを利用します。dlはDefinition Listの略です。※あまり使用する機会はありません。
dt	用語はdtを利用します。dtはDefinition Termの略です。dtはdlの中に入ります。
dd	用語の説明はddを利用します。ddはDefinition Descriptionの略です。ddはdlの中に入ります。
テーブル(表)	table	テーブル・表を定義します
tr	table rowの略です。テーブルの行を定義します。
th	table headerの略です。テーブルの見出し項目を定義します。
td	table dataの略です。テーブルのデータ項目を定義します。
汎用タグdiv	div	特定の意味を持ちませんが、複数のタグをグループ化して、CSSで指示を出す際などにdivタグを利用します。
汎用タグspan	span	divタグと同じように、span自体は特に意味を持っていませんが、指定した範囲をグループとする際に、spanタグを利用します。 divタグが改行が入るのに対して、spanは改行が入らないため、pタグ内で文字色やサイズを変更したいときなどによく使います。
水平線	hr	水平線を引いて文書を区切る場合はhrタグを利用します。hrはHorizontal Ruleの略です。終了タグはありません。
引用	blockquote	blockquoteは文章を引用・転載する際に使用します。blockquoteで囲まれた部分が引用・転載部分になります。引用する際は引用元を掲載するようにしましょう。
整形済みテキスト	pre	preタグを利用して整形済みテキストとして記述できます。preはPreformatted Text（整形済みテキスト） の略です。
フォーム	form	お問い合わせフォームなどのフォームはformタグを利用します。
input	formタグの中に入れる入力項目にinputタグがあります。テキスト項目、ラジオボタン、チェックボックス、パスワードなど入力項目を指定することができます。
select	formタグの中に入れる入力項目にselectタグがあります。セレクトメニューを指定することができます。
textarea	長文のメッセージを入力項目にしたい場合は、textareaタグを利用します
ヘッダー	header	文書中でヘッダーに相当する部分にheaderタグを利用できます。機能的な意味はありません。 ※文書のヘッダ情報を表すheadタグとは意味が全く異なります。
フッター	footer	文書中でフッターに相当する部分にfooterタグを利用できます。機能的な意味はありません。
ナビゲーション	nav	文書中でナビゲーションに相当する部分にnavタグ利用できます。機能的な意味はありません。
セクション	section	文書中でセクション(かたまり)に相当する部分にsectionタグを利用できます。機能的な意味はありません。
動画	video	mp4などの動画を再生する場合にはvideoタグを利用します。

HTMLとは

HTML（えいちてぃーえむえる）とは、ウェブページを作るためのマークアップ言語です。

ウェブページに表示したい文字や画像をHTMLタグを用いて記述していくことで、土台を作ります。しかし、HTMLだけでは白地に黒い文字、画像が並んだだけの単調なものしか作れません。
例えるとしたら、ワード上に文字を打っただけのようなものでしょうか。

HTMLで記述したものに、CSSと言われるマークアップ言語で文字の大きさや色、配置などの指示を出すことで、一般的によくみられるウェブサイトを作ることができます。

他にも、JavaScriptや jQueryなどで動きのある要素を追加することもできますが、複雑になってしまうので、ここでは説明を省きます。

HTMLタグ

見出し（Hタグ）

hタグの「h」は「Heading」という意味があり、文章の設題となる見出しを表します。

見出しにしたいテキスト・画像を、「h」＋「数字（1～6）」の開始タグ・終了タグで挟みます。※h7以降はありません。

h1が一番の大見出しとなり、h2,h3,h4…などは小見出しになります。

h1はページのタイトルに、h2は章のタイトル、h3は節のタイトル、h4は項のタイトルといったように、正しい文章構成で見出しを設定するようにしましょう。
この順番が正しく使われなくても、コードは表示されますが、順序がめちゃめちゃだったりすると、検索エンジンでの結果に影響が出てしまいます。
SEO対策をする方は、念頭に置いておいてください。

また、hタグに画像を使うことも可能です。

その場合はalt属性の部分に画像の内容を表すテキストを入れることで、検索エンジンに内容を伝えることができ、SEO効果が期待できます。

段落（pタグ）

「p」は「Paragraph（パラグラフ）」の略で、テキストや画像を<p>と</p>で挟み、ひとつの段落を表します。

段落内で文章を改行したいときは<br>タグを使います。

HTMLの構造上、pタグの使用を推奨しています。段落内で空白を作りたいがために、意味を持たない改行を使いたくなることもありますよね？しかしながら、 HTMLでbrタグが非推奨とされています。

そのため、SEOを意識したページを作るなら、brタグは多用しないように気をつけておいた方が良いでしょう。

また、brタグを多用すると、スマホ表示で見た時にズレが生じたり、必要以上に空白ができてしまったりするので、使用する際は必ずスマホ表示で違和感がないかも、併せて確認する必要があります。

リンク（アンカータグ）

「a」は「Anchor（アンカー）」の略で、テキストや画像を<a href="">と</a>で挟み、リンクとして表示させることができます。

href（エイチレフ）属性には、リンク先の値（URLやファイル名）を入れます。

href属性の値は絶対パスまたは相対パスで記述します。

• 絶対パス：URL（例：https://～）
• 相対パス：リンク先のファイルの位置を表したもの。リンク先のファイルがひとつ上の階層にある場合は「../」、さらにその上は「../../」で表す。

画像（IMGタグ）

「img」は「Image」の略で、画像はimgタグを使って表示します。
※imgタグには、他のタグにあるような終了タグ「</img>」はありません。

「src」は「Source（ソース）」の略で、src（エス・アール・シー）という属性に、画像ファイル（GIF、JPEG、PNG、PDFなどのファイルのURLやパス）の場所を示す値を入れます。

src属性の値も、リンクと同様に絶対パスまたは相対パスで記述します。

リスト（LIタグ）

「li」は「List item」の略。
「ul」は「Unordered List」の略。
「ol」は「Ordered List」の略。

箇条書きにするテキストや画像を<li>と</li>で囲み、それらを<ul>～</ul>または<ol>～</ol>の間に挟みます。

ulは順番を付けないリストは、先頭にナカグロのマーカーが付きます。

• Photoshop
• illustrator
• HTML/CSS

olは順番を付けるリストは、先頭に自動で数字（1、２、3…）が振られます。

1. だしと卵を混ぜる
2. 熱したフライパンに流し込む
3. クルクルと巻き込む

リストタグを使う際に、ナカグロや数字を表示したく無い場合は、CSSで非表示にすることもできます。

表（TABLEタグ）

「table」は「Table（表）」。
「tr」は「Table Row」、「th」は「Table Header」、「td」は「Table Data」の略。

科目	点数
国語	70

表全体は、table要素で表全体を<table>と</table>で挟み、表の行である「tr要素」で1行ごとに<tr>と</tr>で挟みます。

見出しセルがth要素、データセルがtd要素で、どちらもテキストや画像を<td>と</td>で挟みます。

コメントアウト

コメントアウトしたいテキストや画像、タグなどを<!--と-->で挟みます。

コメントアウトは、テキストやコンテンツを非表示にすることができるほか、コーディング上でのメモ書きとしても使うことができます。

id属性とclass属性

htmlの各タグにはid属性やclass属性という属性が設定でき、idもclassも、CSSのセレクタ（適用対象）として使われています。

なお、idはスクリプトやリンクの参照先としても使用され、以下の注意点があります。

• 同じHTMLファイル内では１箇所にだけ使用すること
• 使用できる文字は半角英数字・ハイフンなど（基本的に英数字とハイフンのみの構成がおすすめ）
  コロン・ピリオドもidとしては使用可能だが、CSSのセレクタ名では使用できない
  アンダーバーは一部の古いブラウザでは認識されなくなる
• 数字や記号始まりはNG
• 大文字と小文字の区別がある

※classは同じclass名を何度でも使うことができます。

その他のHTMLタグ

テキスト

• <code>：コンピュータで使うプログラムなどのコードなどを表す
• <sup>：上付き文字を指定
• <center>：内容の中央寄せ [非推奨要素]
• <cite>：出典や参照先を表す
• <q>：引用・転載文を表す
• <blockquote>：テキストが引用・転載文であることを示す
• <ins>：文書の修正で追記された部分を表す
• <del>：文書の修正で削除された部分を表す
• <dfn>：定義語を表す
• <strong>：内容の強調を表す
• <em>：内容の強調を表す（<strong>の方が強い）
• <var>：プログラムコードの説明文などで変数や引数の部分を示す
• <samp>：プログラムからの出力内容を例示
• <kbd>：コンピュータの操作手順説明などでユーザがキーボードから入力する部分を示す
• <abbr>：略語を示す
• <acronym>：略語（頭字語）を示す
• <br>：段落内の改行
• <bdo>：文字が左から右に流れるか右から流れるかを指定
• <sub>：下付き文字を指定
• <h1>～<h6>：文書中の見出しを設定
• <pre>：ソース中のスペースや改行などをそのまま表示
• <p>：段落の指定

文書情報

• <address>：文書の連絡先/問い合わせ先
• <body>：ユーザに見せる（ブラウザに表示される）内容の指定
• <!– –>：HTMLソースの中のコメント（注釈）
• <title>：文書にタイトルをつける
• <meta>：文書のメタ情報（文書の内容ではなく文書自体についての様々な情報）を指定
• <head>：文書自体の設定情報（普通画面上に表示されないもの）の指定
• <html>：HTMLの文書全体を表す
• <!DOCTYPE>：HTMLをブラウザにどう解釈させるかの指定

リスト

• <col>：表（テーブル）の縦列（カラム）の表示をまとめて設定
• <ol>：順序（通し番号）付きの箇条書きリスト
• <ul>：順序（通し番号）なしの箇条書きリスト
• <li>：<ul>や<ol>の箇条書きリストの項目を表す
• <dl>：定義リスト（用語と説明をセットで並べたリスト）
• <dt>：定義リスト（用語と説明をセットで並べたリスト）の定義用語部分
• <dd>：定義リスト（用語と説明をセットで並べたリスト）の説明部分
• <menu>：リストの表示 [非推奨要素]

表

• <caption>：表（テーブル）のタイトル
• <tbody>：表（テーブル）の本体部分の行をグループ化
• <tfoot>：表（テーブル）のフッタ部分の行をグループ化
• <thead>：表（テーブル）のヘッダ部分の行をグループ化
• <td>：表（テーブル）のセル内容
• <colgroup>：表（テーブル）の縦列（カラム）をグループに分け、表示をまとめて設定
• <th>：表（テーブル）の見出し部分
• <tr>：表（テーブル）の行を指定
• <table>：表（テーブル）を作成

リンク

• <a>：アンカー（リンクの出発点/到達点）の設定
• <area>：<map>で設置するイメージマップ（画像のどこをクリックするかでリンク先が変わる）のリンク領域/リンク先を設定
• <map>：イメージマップ（画像のどこをクリックするかでリンク先が変わる）の設置
• <base>：ページ内のリンク先の基準設定
• <link>：関連する文書などのファイルを指定
• <dir>：リストを表示 [非推奨要素]

画像・動画など

• <param>：<object>や<applet>で使うパラメータの指定
• <applet>：Javaアプレットの設置 [非推奨要素]
• <object>：画像や動画、音声、プラグインデータ、HTML文書など様々なデータを埋め込む
• <embed>：音声や動画などのデータを埋め込む［独自拡張要素（HTML5で採用）］
• <img>：画像の表示

スタイルシート

• <style>：HTML文書内でのスタイルシートの記述

配置・フォントなど

• <center>：内容の中央寄せ [非推奨要素]
• <hr>：水平線の設置
• <tt>：テキストを等幅フォントで表示
• <strike>：テキストに打ち消し線を引く [非推奨要素]
• <s>：テキストに打ち消し線を引く[非推奨要素][HTML5で改訂]
• <small>：テキストを一回り小さくする
• <big>：テキストを一回り大きくする
• <u>：文字に下線を付ける [非推奨要素][HTML5で改訂]
• <i>：文字をイタリック体（斜体）にする
• <b>：文字の太字化
• <basefont>：ページ内の文字の色や種類、大きさなどの基準設定 [非推奨要素]
• <font>：文字の色や種類、大きさの指定 [非推奨要素]
• <div>：内容のグループ化
• <span>：インライン要素をグループ化

フレーム

• <frameset>：ウィンドウを複数のフレームに分割
• <frame>：フレーム（ウィンドウを分割したもの）内で表示する内容の設定
• <iframe>：インラインフレーム（個別にスクロールなどができるページ内の独立した領域）を作成

フォーム

• <noframes>：フレームを表示できないブラウザで表示する代替内容の指定
• <form>：入力フォーム（ボタンやテキスト入力欄を含む領域）の設置
• <input>：1行のテキスト入力欄やボタン
• <button>：画像や文字を使った汎用的なボタン
• <select>：メニュー（セレクトボックス）を設置
• <optgroup>：<option>の要素のグループ化
• <option>：<select>内で使うメニューの選択肢
• <textarea>：複数行の入力が可能な入力欄を設置
• <legend>：<fieldset>でグループ化されたフォムの入力項目へタイトルを付ける
• <fieldset>：入力フォームの項目のグループ化
• <label>：入力欄の項目名を表す

スクリプト

• <script>：文書で使うJavaScriptなどのスクリプトを指定
• <noscript>：<script>に対応していないブラウザで表示する代替内容の指定

まとめ

求職者支援訓練でwebデザインを学ぶデザイン初心者が、HTMLタグの基本知識を忘備録としてまとめました。

HTML自体はそんなに複雑ではないので、このブログを見るだけで一通り理解できるはずです。

デザイン初心者やブロガーさんの参考になったら嬉しいです！

その他のWEBデザインに関する記事はこちら