Webエンジニア学習日記 HTML編 #02 「HTMLタグの種類」

2023年4月21日

HTML プログラミング 学習

eyecatch Webエンジニアの学習をする上で、HTMLは必須です。 HTMLはプログラミングではなく、コーディングという風に呼ばれることから、軽視されがちですが、構成設計や内部仕様など難しい点もいろいろとあります。 他のプログラム言語を扱う場合でも、インターネットブラウザで表示する場合には、必ずHTMLを扱うことから、Webエンジニア以外でも必要な要素になっているようにも思えます。 また、HTMLをちゃんと理解すると、画像編集ソフトのレイヤー機能や、デジタル製品でのディスプレイ表示の際の表示構成が似ている点に気がつくようになります。 他のレンダリングに関しての基本技術と考えてもいいかもしれませんね。 そんなHTMLをしっかりと学習する為に、HTMLタグの種類について理解しましょう。

HTMLタグの種類一覧

下記の分類とタグが理解できたら、英語における英単語習得は完了したと言ってもいいでしょう。 中には使い方が難しいものもあるので、きちんと覚えておく必要があります。

コメント

<!-- * -->

基本

!DOCTYPE , HTML , HEAD , BODY META , LINK , SCRIPT , STYLE

構成

HEADER , FOOTER , MAIN , ASIDE , IFRAME DIV , SPAN , P , HR

見出し

H1 , H2 , H3 , H4 , H5 , H6

文章

BLOCKQUOTE , CODE , BR , PRE , B , STRONG , I , DEL , SUP , SUB

リスト

UL , OL , LI , DL , DD

テーブル

TABLE , TR , TD , TH , THEAD , TBODY , TFOOT , CAPTION

リンク

A , MAP , BASE

コンテンツ（画像、動画、音声）

IMG , AUDIO , VIDEO , OBJECT , PARAM

フォーム

FORM , INPUT , SELECT , OPTION , TEXTAREA , BUTTON , LABEL ※その他にもHTMLタグはたくさんの種類があります。古い仕様で使えないものや使っても意味のないものなどもあるので、全ては掲載していません。

コメント

<!-- * -->

HTMLの中で表示や構造に関係ないコメントを記述するためのタグ。 <!-- サンプルコメント -->

基本

!DOCTYPE

HTMLファイルの先頭行に記載するおまじない。 内容によってHTMLのバージョンや種別を判別する。 HTML5のシンプルな記述をしておけば問題はない。 html5 <!DOCTYPE html> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> HTML3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Compact HTML 1.0(i-mode) <!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

HTML

HTMLファイル内に１つのみ記述します。 DOCTYPE以外の全てのタグが、このHTMLタグの中に入ります。 <html> ... </html>

HEAD

HTML直下の先頭に記載します。 <html> <head> ... </head> </html>

BODY

HTML直下でHEADの次に記載します。 <html> <head> ... </head> <body> ... </body> </html>

META

HEADタグ内に記載して、メタ情報を登録します。 ・viewport : スマホ表示の際に画面の表示サイズや拡大縮小率などを設定。 ・OGPタグ(*解説1)の記載。 # 文字エンコード <meta charset='utf-8'/> # viewport <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/> # OGP(facebook) <meta property="og:title" content="ページタイトル"/> <meta property="og:type" content="ページタイプ : website , article , blog , product"/> <meta property="og:url" content="ページのURL"/> <meta property="og:image" content="サムネイル画像"/> <meta property="og:site_name" content="サイト名"/> <meta property="og:description" content="サイトの説明"/> <meta property="og:locale" content="ja_JP"/> # OGP(twitter) <meta name="twitter:card" content="表示形式 : summary , summary_large_image , app , player"/> <meta name="twitter:description" content="サイトの説明"/> <meta name="twitter:site" content="ページのURL"/> <meta name="twitter:image" content="サムネイル画像"/> 基本的にHEADタグ内に記載して、スタイルシートの読み込みやFaviconの読み込みを設定。 # cssファイルの読み込み <link rel='stylesheet' href='style.css'/> # Faviconの読み込み <link rel='icon' type='image/image/x-icon' href='favicon.ico'/>

SCRIPT

Javascriptの設定 # 外部jsファイルの読み込み <script src='javascript.js'></script> # Javascriptを直接記述 <script> // javascriptプログラムを記述 </script>

STYLE

スタイルシートの直接記述 <style> /* スタイルシートを記述 */ </style>

構成

HEADER

ページヘッダやナビゲーションの記述用タグ ページフッタ用のタグ

MAIN

ページのメインコンテンツ用のタグ

ASIDE

ページのサイドメニュー用のタグ

IFRAME

別のhtmlをページ内に表示させるためのタグ

DIV

ブロック要素の囲いタグ

SPAN

インライン要素の囲いタグ

P

段落用のタグ。 Paragraphの略。

HR

ページに横の罫線を表示するタグ。 horizonの略。

見出し

見出しはH1~H6までを、順番に記載することで、読みやすいページを作ることができる。

H1

タイトル用タグ <h1>タイトル</h1>

H2

見出し用タグ <h2>見出し</h2>

H3

小見出し用タグ <h3>小見出し</h3>

H4

小見出し用タグ <h4>小見出し</h4>

H5

小見出し用タグ <h5>小見出し</h5>

H6

小見出し用タグ <h6>小見出し</h6>

文章

BLOCKQUOTE

引用タグ <blockquote>引用文章</blockquote>

CODE

プログラムコードなどの記載タグ <code> var a=1; console.log(a); </code>

BR

改行タグ

PRE

改行やスペースなどを記述のまま表示できるタグ

B

文字を太字にすることができる。 文字を<b>太字</b>にすることができる。

STRONG

文字を強調させる。 文字を<strong>強調</strong>させる。

I

文字を斜体（イタリック）にする。 文字を<i>斜体（イタリック）</i>にする。

DEL

文字に打ち消し線をつける。 文字に<del>打ち消し線</del>をつける。

SUP

上付き文字。
102
10<sup>2</sup>

SUB

下付き文字。
203
20<sub>3</sub>

リスト

UL

LIタグと組み合わせて、項目リストの表示ができる。
  • リンゴ
  • ゴリラ
  • ラッパ
  • パセリ
<ul> <li>リンゴ</li> <li>ゴリラ</li> <li>ラッパ</li> <li>パセリ</li> </ul>

OL

LIタグと組み合わせて、番号リストの表示ができる。
  1. 設計
  2. コーディング
  3. 検証
  4. ロンチ
<ol> <li>設計</li> <li>コーディング</li> <li>検証</li> <li>ロンチ</li> </ol>

LI

ULタグとOLタグのリスト表示を登録する。

DL

definition listの略で、「リスト」の意味。 DT、DDと組み合わせて、定義リスト形式で表示できる。
HTMLタグ
タグの説明
<dl> <dt>HTMLタグ</dt> <dd>タグの説明</dd> </dl>

DT

definition teamの略で「定義」の意味。

DD

definition descriptionの略で「説明」の意味

テーブル

TABLE

テーブルの一番外側に記述するrootタグ

THEAD

テーブルの一番上の行に設置される。 1つのテーブルにつきTHEADタグは1つしか設置できない。

TBODY

THEADの下、TFOOTの上に表示される。 TBODYは、テーブル内に複数設置することができる。

TFOOT

テーブルの一番下の行に設置される。 1つのテーブルにつきTFOOTタグは1つしか設置できない。

CAPTION

テーブルの行に見出しを設置できるタグ

TR

行を設置するタグ

TH

セル（カラム）の見出しを設置できる。

TD

セル（カラム）のデータを登録できる。

TABLEサンプル

# 商品 個数
1 リンゴ 1個
2 バナナ 2個
合計 3個
<table> <thead> <tr> <th>#</th> <th>商品</th> <th>個数</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>リンゴ</td> <td>1個</td> </tr> <tr> <th>2</th> <td>バナナ</td> <td>２個</td> </tr> </tbody> <tfoot> <th>合計</th> <td colspan='2'>3個</td> </tfoot> </table>

リンク

A

クリックすると、別のページをリンクするタグ。 <a href='https://google.com/'>Google</a>

MAP

IMGタグ、AREAタグと組み合わせて、画像の部分クリック（クリッカブル）で、それぞれのURLにリンクさせることができる。 <img usemap='#clickable' width="300" border="0" data-original-height="394" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RhgaCS5Jha_ldIjU8g3YHFe9PQKvZoG3w6dTzsqayWFRnBAeHgHA8GbWe2G0tzeirmqBcNZykkwl1FKu-Ed_LWXtpSMLmxPlxU2e8JD8kUn_568V8VT9hgDqsQjUmZ5uoNU0ToGT08C-HpkPZ8sgJl4jMsIF5kbHX5tLULPqbp87DaKV6SBijXM0/s1600/drawing-367946_640.png"/> <map name="clickable" style='white-space:normal;'> <area shape="rect" coords="127,0,178,21" href="https://ja.wikipedia.org/wiki/C%2B%2B" target="_blank" > <area shape="rect" coords="62,38,113,73" href="https://ja.wikipedia.org/wiki/Java" target="_blank" > <area shape="rect" coords="176,33,214,60" href="https://learn.microsoft.com/ja-jp/dotnet/csharp/" target="_blank" > <area shape="rect" coords="236,37,298,70" href="https://www.adobe.com/jp/products/flashplayer/end-of-life.html" target="_blank" > <area shape="rect" coords="225.82,286,107" href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics" target="_blank" > <area shape="rect" coords="0,77,61.109" href="https://ja.wikipedia.org/wiki/HTML5" target="_blank" > <area shape="rect" coords="50,120,95,146" href="https://ja.wikipedia.org/wiki/.net" target="_blank" > <area shape="rect" coords="70.150,112,174" href="https://ja.wikipedia.org/wiki/CSS" target="_blank" > <area shape="rect" coords="176,129,209,147" href="https://hnavi.co.jp/knowledge/blog/visualbasic-development/" target="_blank" > <area shape="rect" coords="221,123,266,146" href="https://www.php.net/" target="_blank" > <area shape="rect" coords="174,161,220,184" href="https://aws.amazon.com/jp/what-is/sql/" target="_blank" > </map>

AREA

MAPタグの中でクリッカブルの設定をするタグ。

BASE

ページ内の基本URLを設定できる。 HEADタグの一番上に設置する。 フィッシングサイトなどで使われるタグで、一般的にはあまり使われない。

コンテンツ（画像、動画、音声）

IMG

画像を表示するためのタグ。 <img src='画像ファイルのURL' alt='画像の説明文' />

AUDIO

<audio src='オーディオファイルのURL' controls></audio>

VIDEO

<video src='ビデオファイルのURL' controls></video>

OBJECT

外部のいろいろなコンテンツをHTMLで表示させるタグ。 PDFファイルを読み込むサンプル <object type='application/pdf' data='sample.pdf' width='300' height='200'></object>

フォーム

お問い合わせなどの入力フォームを構築するタグ。

FORM

入力したデータを送信する大枠のタグ。 FORMタグ内で入力されたデータは一括で送信されます。 <form name='フォーム名' method='POST or GET' action='送信先のURL'> ... </form>
# 属性説明 - name : javascriptでアクセスできるようにするためにフォーム名をセットする。（任意） - method : 送信方法 GET（内容をURLクエリで送信） , POST（内容をデータリクエストで送信） - action : データを送信するサーバーのURLを記載（書かれていない場合は、今表示しているURLに送信される）

INPUT

<input type='入力タイプ' name='key値' value='入力された値' placeholder='説明文' />
# 属性説明 - type : このタイプを接とすると様々な機能に切り替わります。（default : text） - text : 文字列 - checkbox : チェックボックス - radio : ラジオボタン - hidden : 表示されないtext項目 - button : 押しても送信されないボタン - submit : 押すとデータが送信するボタン - email : メールアドレス - date : 日付の入力ができます。（yyyy-mm-dd形式） * 上記以外にもたくさんのtypeがあります。（参考） - name : 送信した際のkey値 - value : 事前に値をセットすることができますが、入力された値に置き換わります。 - placeholder : 入力されていない時に表示される説明文 - readonly : 入力変更ができない項目になります。（文字列の選択はできます） - disabled : 入力変更ができない項目になります。（文字列の選択ができません） - required : 必須項目として送信時に判定されます。 - checked : type=checkboxまたは、type=radioの時に、チェックさせる為の属性

SELECT

OPTIONタグと組み合わせて、プルダウンメニューが表示できます。
# サンプル <select name='inputタグのnameと同じ'> <option value='select-1'>選択1</option> <option value='select-2'>選択2</option> </select>

OPTION

SELECTタグのリスト部分として登録します。 <option value='送信される値'>表示される値</option>
# 解説 - 送信される値 : サーバーにsubmitした際に実際に送信される値 - 表示される値 : プルダウンリストに表示されますが、サーバーには送信されません。 # 注意 - valueの属性がセットされていないと、表示される値がサーバーに送信されますが、ブラウザ毎に仕様が変わる可能性があるので推奨さていれません。

TEXTAREA

改行したTEXTデータを送信できます。 <textarea name='inputタグのnameと同じ'></textarea>
# 解説 基本的にinputタグのtype=textと同じ属性がセットできます。

BUTTON

ボタン表示用のタグ。 <button type='ボタンタイプ' name='key値' value='送信される値'>表示されるボタン名称</button>
# 属性 - type : ボタンタイプ - submit : inputタグのtype=submitと同じ - button : inputタグのtype=buttonと同じ(default) - name : key値 - ボタンをクリックすると、nameの値がkey値としてサーバーにデータが送信されます。 - value : 送信される値　 - サーバーに送信される値。

LABEL

LABEL内に書かれたタグをクリックすると、入力タグなどにフォーカスさせることができます。

# text項目

# チェックボックス

# ラジオボタン

# 解説 - 属性forに書かれた値と同じ値のid値を持つタグをクリックしたさせることができます。 - for属性を書かなくても、LABELタグの中に書くことで、フォーカスさせることも可能です。

よくある疑問点

タグの記載は、大文字？小文字？

どっちでもいいですが、開始タグと終了タグの大文字小文字の種別は同じにする必要があります。

属性の値は、'（シングルクォート）？"（ダブルクォート）？

これもどっちでも良いですが、ページ内では統一されていることが望ましいです。

タグの中のスペースはたくさん書いてもいいの？

タグの中の属性は、スペースで区切って記載します。 その時に、スペースが2つでも3つでも、エラーにはなりません。 見やすくあえてスペースを入れる場合もありますが、見た目を重要視する場合が多いです。 <input type='text' name='test-1' value='aaa' /> <input type='checkbox' name='test-2' value='bbb' /> <input type='radio' name='test-3' value='ccc' />

解説

解説1 : OGPタグ

SNSなどのリンクカードの設定。 サムネイル画像や、タイトル、ディスクリプションなどをページ毎に記載できます。

解説2 : Favicon

ページのアイコンの事。 インターネットブラウザのタブの横などに表示されたり、ブックマークした際のアイコンで使われます。

人気の投稿

  • [素材] 著作権フリーの「Loading」Gifアニメーション画像 40個
    Webツール開発を行なっている時に、Ajaxで読み込み待ちの状態で「Loading」と文字が書かれているだけの表示は非常に寂しい。 そこで、いつでもサクッと使えるように、「NowLoading」のアニメーションで著作権フリーの「cc0」のものを集めてみた。 ジャンル分けし...
  • 「ハイフン」って言ってもたくさん種類があるんだよ
    「*」アスタリスクと聞くと、オールマイティ感を感じる、正規表現的な脳みそになっている、ユゲタです。 本日のIT謎掛け 「ハイフン」と、かけまして、 「心拍数の安静値」と、ときます。 そのココロは・・・ ダッシュするとマイナスになっちゃうよ。 ハイフンの種類の...
  • 意外とハマったcurlコマンドを使ってファイルダウンロードして別名保存する方法
    インターネットを使ってファイルダウンロードをするなんて、wgetコマンドで十分やろ！！！ と考えていたんですが、curlのオプションの豊富さに、少し浮気をして使ってみようと考えたのが少しばかりハマリングポイントでした・・・ とは言っても、今どきwgetよりもcurl使って...
  • ウィルスソフトは本当にいらないという話
    人並み以上に無駄が嫌いな、下駄です。 先日、大手企業の仕事をさせてもらう時に、取引会社チェックというのをされて、会社のITセキュリティ状態をくまなく質問されました。 確かに、取引先での情報漏えいで、ブランドイメージがガタ落ちしているニュースなど散々みているので、こうしたチ...
  • 画像ファイルをバイナリではなくテキストで扱うbase64フォーマットって便利なのだろうか？
    画像を、観ることも、描くことも、編集することも、フォーマット変換することも大好きな、ユゲタです。 base64フォーマットって、使わなくても全く困らないんですが、使ってみると結構便利な点も多く、必要に応じて使用すると効果的なので、そのメリット・デメリットをまとめておきます。...
  • Chromeブラウザにおける「Violation」JSアラート
    WEBサービスプログラムを作っているときに、Chromeブラウザを使っているエンジニアは多いと思います。 いや、ほとんどがChromeブラウザだと思います。 よほど社内セキュリティ違反にならない限り、エンジニアはChromeブラウザを使うはずです。 そんなChromeブラウ...
  • [Javascript] onSubmitを完璧にセットする方法
    こんにちわ。 EFOの生みの親である、弓削田です。 先日、とあるサイトのお問い合わせフォームに、Javascriptを使ってEFO機能を搭載しようと思ったんですが、 submit制御について、EFO構築を思い起こしながら作業していたけど、なかなか思ったとおりにならず、ネッ...
  • [Chart.js] X軸とY軸に表示されているラベルの文字列をカスタマイズする方法
    グラフをキレイに見せるコツは、ラベルの表示方法にあることに気がついた、ユゲタです。 グラフの「ラベル」というのは、縦横の値の目安になる値を表示しているアレです。
  • TWS-P10の両耳モード（ステレオモード）に切り替える方法
    Amazonで安売りしていたので、試しに買ってみた「TWS-P10」というBluetoothイヤホンが便利で使いやすくて毎日ウォーキングしながら装着していたのですが、 ある時、不意に片方ずつしか音が聞こえなくなり、どうやら片耳モードになっているようで、両耳モードにする方法を...
  • [Chart.js] ツールチップをカスタマイズする
    「ツールチップ」と聞くと、「ポテトチップ」を連想してしまう、ユゲタです。 ツールチップというのは、パソコンなどで表示されているチャートで、マウスカーソルを合わせると、そのピンポイントの箇所の情報が ポップアップされるウィンドウの事です。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ