求職者支援訓練で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とは
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>HTMLタグの基本を学ぶ</title>
</head>
<body>
<h1>HTML</h1>
<p>Hyper Text Markup Language の略でウェブページを作成するための言語。</p>
</body>
</html>
HTML(えいちてぃーえむえる)とは、ウェブページを作るためのマークアップ言語です。
ウェブページに表示したい文字や画像をHTMLタグを用いて記述していくことで、土台を作ります。しかし、HTMLだけでは白地に黒い文字、画像が並んだだけの単調なものしか作れません。
例えるとしたら、ワード上に文字を打っただけのようなものでしょうか。
HTMLで記述したものに、CSSと言われるマークアップ言語で文字の大きさや色、配置などの指示を出すことで、一般的によくみられるウェブサイトを作ることができます。
他にも、JavaScriptや jQueryなどで動きのある要素を追加することもできますが、複雑になってしまうので、ここでは説明を省きます。
HTMLタグ
見出し(Hタグ)
<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<h5>これは見出し5です</h5>
<h6>これは見出し6です</h6>
hタグの「h」は「Heading」という意味があり、文章の設題となる見出しを表します。
見出しにしたいテキスト・画像を、「h」+「数字(1~6)」の開始タグ・終了タグで挟みます。※h7以降はありません。
h1が一番の大見出しとなり、h2,h3,h4…などは小見出しになります。
h1はページのタイトルに、h2は章のタイトル、h3は節のタイトル、h4は項のタイトルといったように、正しい文章構成で見出しを設定するようにしましょう。
この順番が正しく使われなくても、コードは表示されますが、順序がめちゃめちゃだったりすると、検索エンジンでの結果に影響が出てしまいます。
SEO対策をする方は、念頭に置いておいてください。
<h1><img src=”img/title.jpg” alt=”見出し1のタイトル”></h1>
また、hタグに画像を使うことも可能です。
その場合はalt属性の部分に画像の内容を表すテキストを入れることで、検索エンジンに内容を伝えることができ、SEO効果が期待できます。
段落(pタグ)
「p」は「Paragraph(パラグラフ)」の略で、テキストや画像を<p>
と</p>
で挟み、ひとつの段落を表します。
段落内で文章を改行したいときは<br>
タグを使います。
HTMLの構造上、pタグの使用を推奨しています。段落内で空白を作りたいがために、意味を持たない改行を使いたくなることもありますよね?しかしながら、 HTMLでbrタグが非推奨とされています。
そのため、SEOを意識したページを作るなら、brタグは多用しないように気をつけておいた方が良いでしょう。
また、brタグを多用すると、スマホ表示で見た時にズレが生じたり、必要以上に空白ができてしまったりするので、使用する際は必ずスマホ表示で違和感がないかも、併せて確認する必要があります。
リンク(アンカータグ)
<a href=”https://www.nekochans.site/”>リンクテキスト</a>
「a」は「Anchor(アンカー)」の略で、テキストや画像を<a href="">
と</a>
で挟み、リンクとして表示させることができます。
href(エイチレフ)属性には、リンク先の値(URLやファイル名)を入れます。
href属性の値は絶対パスまたは相対パスで記述します。
- 絶対パス:URL(例:https://~)
- 相対パス:リンク先のファイルの位置を表したもの。リンク先のファイルがひとつ上の階層にある場合は「
../
」、さらにその上は「../../
」で表す。
画像(IMGタグ)
<img src=”sample.jpg”>
「img」は「Image」の略で、画像はimgタグを使って表示します。
※imgタグには、他のタグにあるような終了タグ「</img>
」はありません。
「src」は「Source(ソース)」の略で、src(エス・アール・シー)という属性に、画像ファイル(GIF、JPEG、PNG、PDFなどのファイルのURLやパス)の場所を示す値を入れます。
src属性の値も、リンクと同様に絶対パスまたは相対パスで記述します。
リスト(LIタグ)
<h3>WEBデザインに必要なスキル</h3>
<ul>
<li>Photoshop</li>
<li>iillustrator</li>
<li>HTML/CSS</li>
</ul>
<h3>だし巻き卵の作り方</h3>
<ol>
<li>だしと卵を混ぜる</li>
<li>熱したフライパンに流し込む</li>
<li>クルクルと巻き込む</li>
</ol>
「li」は「List item」の略。
「ul」は「Unordered List」の略。
「ol」は「Ordered List」の略。
箇条書きにするテキストや画像を<li>
と</li>
で囲み、それらを<ul>~</ul>
または<ol>~</ol>
の間に挟みます。
ulは順番を付けないリストは、先頭にナカグロのマーカーが付きます。
- Photoshop
- illustrator
- HTML/CSS
olは順番を付けるリストは、先頭に自動で数字(1、2、3…)が振られます。
- だしと卵を混ぜる
- 熱したフライパンに流し込む
- クルクルと巻き込む
リストタグを使う際に、ナカグロや数字を表示したく無い場合は、CSSで非表示にすることもできます。
表(TABLEタグ)
<table>
<tr>
<th>職種</th>
<th>点数</th>
</tr>
<tr>
<td>国語</td>
<td>70</td>
</tr>
</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属性
<h1 id=”top”>#をつけると内部リンクで飛ばせる</h1>
<div class=”container”>このclass名が付いているタグにCSSで装飾の指示を出せる</div>
htmlの各タグにはid属性やclass属性という属性が設定でき、idもclassも、CSSのセレクタ(適用対象)として使われています。
なお、idはスクリプトやリンクの参照先としても使用され、以下の注意点があります。
- 同じHTMLファイル内では1箇所にだけ使用すること
- 使用できる文字は半角英数字・ハイフンなど(基本的に英数字とハイフンのみの構成がおすすめ)
コロン・ピリオドも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自体はそんなに複雑ではないので、このブログを見るだけで一通り理解できるはずです。
デザイン初心者やブロガーさんの参考になったら嬉しいです!
コメント