「HTML」は、Webページの構造を定義するためのマークアップ言語です。
「HTML」は「HTMLタグ」を使って、HTML文書の構造を組み立てます。「HTMLタグ」を使う事で、文字の大きさや色を変えたり画像を表示することができます。
今回は、HTMLとは？HTMLの基本構造とHTMLタグの基本について解説します。
基本「HTMLタグ」一覧
「HTMLタグ」は、沢山のタグがありますが、その中でも最低限覚えておいた方がよいタグの種類があります。基本的となる「HTMLタグ」を理解することでWebページの制作に役に立ちます。
「HTMLタグ」の記述方法は、「<」の開始記号と「>」の終了記号で囲みます。「<」の開始記号と「>」の終了記号の中にそれぞれのタグを記述することでひとつの「要素」となります。
また、ひとつの要素「<タグ>」を終了する場合は、要素に「/（スラッシュ）」を記述して要素を終了させます。
基本の記述方法
<タグ>Webデザイナーブログ</タグ>
基本要素の記述例
<h1>Webデザイナーブログ</h1>
基本構成要素タグ
| タグ |
タグの意味（概要） |
| DOCTYPE |
Webページの情報を伝える設定 |
| html |
HTML文書の定義 |
| head |
文書本体の定義 |
| meta |
メタデータ情報 |
| base |
相対的な基準となるURL |
| title |
文書のタイトル |
| link |
文書ファイル情報 |
| style |
スタイルシート情報 |
| script |
スクリプト情報 |
| noscript |
対応していないブラウザへの内容を定義 |
レイアウト・セクション要素タグ
| タグ |
タグの意味（概要） |
| body |
文書情報の定義 |
| main |
メインコンテンツ |
| article |
内容が単体で完結する要素 |
| section |
一般的なセクションを定義する要素 |
| aside |
補足的なセクションを定義する要素 |
| header |
ヘッダー |
| menu |
操作可能なメニューリスト |
| hgroup |
見出しのグループ化 |
| nav |
ナビゲーション領域 |
| h1～h6 |
見出し |
| div |
ブロックレベル要素 |
| span |
インラインレベル要素 |
| footer |
フッター |
| address |
作者連絡先情報 |
テキスト要素タグ
| タグ |
タグの意味（概要） |
| br |
改行 |
| hr |
横罫線 |
| p |
段落 |
| font |
フォントのサイズ・色・種類を定義 |
| small |
文字サイズ縮小 |
| b |
文字を強調 |
| em |
文字を強調 |
| strong |
文字をより強調 |
| big |
文字サイズ拡大 |
| i |
イタリック体 |
| u |
テキスト下線 |
| s |
取り消し線 |
| strike |
取り消し線 |
| pre |
整形済みテキスト |
| blockquote |
引用文（ブロックレベル） |
| q |
引用箇所（インライン） |
| ins |
追加テキスト |
| del |
削除テキスト |
| code |
ソースコード |
| var |
変数・引数 |
| kbd |
キーボード入力文字 |
| samp |
プログラムによる出力結果サンプル |
| sup |
上付き文字 |
| sub |
下付き文字 |
| time |
日付や時刻を定義 |
リンク要素タグ
| タグ |
タグの意味（概要） |
| a |
リンクを定義 |
| map |
イメージマップの仕様を定義 |
| area |
イメージマップのリンクを定義 |
画像・オブジェクト要素タグ
| タグ |
タグの意味（概要） |
| img |
画像を定義 |
| figure |
参照される画像や図 |
| figcaption |
画像や図の表題 |
| iframe |
インラインフレーム領域 |
| embed |
画像・音声など外部コンテンツの埋め込み |
| object |
オブジェクトの埋め込み |
| param |
パラメータ指定 |
| video |
動画の埋め込み |
| audio |
音声コンテンツの埋め込み |
| source |
再生候補となる動画や音源 |
| track |
動画や音声ファイルの字幕・キャプション |
| meter |
規定範囲内の数量や測定値 |
| progress |
作業の進捗状況を示すプログレスバー |
| canvas |
スクリプトで定義したグラフィックスを描く領域 |
| bgsound> |
BGMを鳴らす領域 |
リスト要素タグ
| タグ |
タグの意味（概要） |
| ol |
数字付き箇条書き領域 |
| ul |
箇条書きの領域 |
| li |
箇条書きのリスト |
| dl |
定義リスト |
| dt |
定義する用語 |
| dd |
用語に対する説明 |
テーブル（表）要素タグ
| タグ |
タグの意味（概要） |
| table |
テーブル（表） |
| tbody |
テーブル（表）の本体 |
| td |
テーブル（表）のセル |
| th |
テーブル（表）の見出しセル |
| thead |
テーブル（表）のヘッダー |
| tr |
テーブル（表）の行 |
| tfoot |
テーブル（表）のフッター |
| caption |
テーブル（表）の表題 |
| col |
テーブル（表）の列設定 |
| colgroup |
テーブル（表）の列グループ化 |
フォーム要素タグ
| タグ |
タグの意味（概要） |
| form |
入力フォーム |
| fieldset |
フォーム入力項目をグループ化 |
| legend |
部品とラベルの関連付け |
| label |
入力部品とラベルの関連付け |
| input |
フォームを構成する部品 |
| button |
ボタン |
| select |
セレクトボックス |
| option |
セレクトボックスの選択肢 |
| optgroup |
セレクトボックスのグループ化 |
| datalist |
入力候補となる選択肢リスト |
| textarea |
入力欄 |
| keygen |
暗号鍵 |
| output |
計算結果の領域 |
| progress |
進捗状況 |
| meter |
割合 |
| fieldset |
フォーム部品のグループ化 |
| isindex |
テキスト入力(検索用） |
HTMLとは？HTMLの基本構造とHTMLタグの基本
まとめ
ファビコン（favicon）画像は、必ずしも必要な設定ではありませんが、Webページの向上を考えてユーザーによりサイトを探して、認識してもらうためには必要です。細かい設定ですが簡単に設定できるのでなるべくファビコン（favicon）の設定は行いましょう。
