【HTML】「HTMLタグ」の使い方

■ 「HTMLタグ」とは
■ 「ブロック要素」と「インライン要素」の違い
■ 良く使われる「HTMLタグ」
■ 「ブロック要素」と「インライン要素」で分類した「HTMLタグ」一覧
■ 「HTMLタグ」の「グローバル属性」
■ 「HTMLタグ」の「イベントハンドラ属性」

■ 「ブロック要素」を使い分ける方法

「HTMLタグ」は、
「インターネット」で見れる
「Webページ」を作るための「Webプログラミング」です。

「Webページ」の骨組みを作る「マークアップ言語」で、
「CSS」によって、
「Webページ」のレイアウトデザインをします。


「CSS」は、
マークアップされた「HTMLタグ」に、
レイアウトデザインの指示をすることで、
「Webページ」のレイアウトを作成することができます。


「Webページ」に置いて、

「HTMLタグ」は、マークアップすることで構造となる骨組みを作成する
「CSS」は、「レイアウトデザイン」を指示する

という役割を持っています。



「HTMLタグ」の中でも、
「ブロック要素」と「インライン要素」に分類されていて、

「ブロック要素」は、
「Webページ」のコンテンツを「ブロック」ごとに分類し、
「マークアップ」するための「HTMLタグ」です。
主に、レイアウトデザインがしやすいように、
今天狗内容を区分するのが目的です。

「インライン要素」は、
コンテンツ内容の「文字」などを
「装飾」するための「HTMLタグ」です。
「改行」「文字サイズ」「文字色」「リンク」「画像」
などを指示するのが目的です。


Back

「HTML」タグは、
「ブロック要素」と「インライン要素」で構成されています。

「ブロック要素」は、
レイアウトをするために、
コンテンツをまとめて、一つのブロックにする「HTMLタグ」です。
ブロックの配置を決めることで、
Webページのレイアウトデザインを構成します。


「インライン要素」は、
コンテンツ内容の文章などを
「装飾」することを目的とした「HTMLタグ」。
「改行」「太字」「カラー」「リンク」「画像」など、
「文字」などの一部を「装飾」する際に、
「インライン要素」の「HTMLタグ」が使用されます。



「ブロック要素」と「インライン要素」の特徴

インライン要素	改行なし	・テキストの装飾をするHTMLタグ。 ・テキストが自動改行されない。 ・横幅の指定ができない。 ・レイアウトするには、ブロック要素に変換するか、ブロック要素に入れる。
ブロック要素	改行あり	テキスト・画像・動画などのコンテンツを一まとめにしてブロックを形成するHTMLタグ。 ・レイアウト（配置）デザインがしやすい。 ・サイズ指定・配置指定ができる。 ・テキストが自動改行される。 ・横幅のサイズ指定もできる。

Back

よく使われる「HTMLタグ」には、
下記のような「HTMLタグ」があります。

それぞれ用途によって区分されているので、
使い分ける必要があります。

よく使われる「HTML文章構造」を構成するHTMLタグ

よく使われる「head」タグ内に記述するHTMLタグ

よく使われる「body」タグ内に記述するHTMLタグ

Back

HTMLタグ一覧

ブロック要素
Tag Name	Type	説明
main	ブロック要素	「main」タグは、 文書内の主要な「コンテンツ部分」であることを示す「HTMLタグ」。
header	ブロック要素	「header」タグは、 文書やセクションの「ヘッダー部分」であることを示す「HTMLタグ」。
aside	ブロック要素	「aside」タグは、 脚注や用語の説明などの「補足情報部分」であることを示す「HTMLタグ」。
footer	ブロック要素	「footer」タグは、 文書やセクションの「フッター部分」であることを示す「HTMLタグ」。
nav	ブロック要素	「nav」タグは、 現在の文書内の、他の部分や、他の文書への 「ナビゲーションリンク」を提供するための 「セクション」だと示す「HTMLタグ」。
section	ブロック要素	「section」タグは、 「HTML5」で追加された新しい「HTMLタグ」。 文章の「節」「章」を区分するための「HTMLタグ」。
article	ブロック要素	「article」タグは、 「記事」だということを明確に指定する「ブロック要素」。
div	ブロック要素	各コンテンツ内容を区分し、 レイアウトを指定することができる「ブロック要素」の代表格。 他の「ブロック要素」の代用として、「div」タグが利用できるので、 「ブロック要素」は、「div」タグだけでも、HTMLコードを完成できる。
p	ブロック要素	「p」タグは、 文章の段落を区切るための「ブロック要素」。
「h1」〜「h6」	ブロック要素	「h1」〜「h6」タグは、 文章のタイトルを指定できる「HTMLタグ」。 「Webページ」の内容を示す重要な役割を持っていて、 SEO対策では必須の要素。 きちんとした内容を記述するべき「HTMLタグ」。
「ul」「ol」「li」	「ul」「ol」「li」は、 文章の「リスト」を作成することができる「HTML」タグ。 先頭文字を「記号」「数字」などで追加して「リスト化」できる。
「table」「tr」「th」「td」	「table」「tr」「th」「td」は、 「表」を作成するための「HTMLタグ」で、 レイアウトデザインにも使用される使い勝手が良い「HTMLタグ」。 かなり利用されている。
script	「Javascript」を「head」「body」タグの範囲内に直書きすることができる「HTMLタグ」。 「Javascript」の外部ファイルにリンクさせるためにも使用できる。 「Webページ」を途中で変化させたりする「動的ページ」を作成することなどに使用される。
DIR	ブロック要素
MENU	ブロック要素
PRE	ブロック要素
DL	ブロック要素
CENTER	ブロック要素
NOSCRIPT	ブロック要素
NOFRAMES	ブロック要素
BLOCKQUOTE	ブロック要素
FORM	ブロック要素
ISINDEX	ブロック要素
HR	ブロック要素
FIELDSET	ブロック要素
ADDRESS	ブロック要素
MULTICOL	ブロック要素
インライン要素
Tag Name	Type	説明
span	インライン要素	「span」タグは、 指定しただけでは、何も意味のない「HTMLタグ」ですが、 「文字列」を「CSS」「Javascript」などで 「装飾」したり「変更」したりするのに利用できる 「マークアップ」するための「HTMLタグ」。 文章中の文字を、「太文字」「色付け」したりすることができる。
a	インライン要素	「a」タグは、 同一ページ内や、他のページなどに、 移動するための「リンク」を指定するための「HTMLタグ」。 非常に良く利用される「リンク」のためのタグ。
img	インライン要素	「img」タグは、 「写真」「イラスト」などの「イメージ画像」を 「Webページ」に追加するための「HTMLタグ」。
br	インライン要素	「改行」を指定するタグ。
b	インライン要素	文字を太字にするタグ
strong	インライン要素	文字を強調（太字）するタグ
TT	インライン要素
I	インライン要素
U	インライン要素
S	インライン要素
STRIKE	インライン要素
BIG	インライン要素
SMALL	インライン要素
EM	インライン要素
DFN	インライン要素
CODE	インライン要素
SAMP	インライン要素
KBD	インライン要素
VAR	インライン要素
CITE	インライン要素
ABBR	インライン要素
ACRONYM	インライン要素
APPLET	インライン要素
OBJECT	インライン要素
FONT	インライン要素
BASEFONT	インライン要素
SCRIPT	インライン要素
MAP	インライン要素
Q	インライン要素
SUB	インライン要素
SUP	インライン要素
BDO	インライン要素
IFRAME	インライン要素
INPUT	インライン要素
SELECT	インライン要素
TEXTAREA	インライン要素
LABEL	インライン要素
BUTTON	インライン要素
BLINK	インライン要素
EMBED	インライン要素
LAYER	インライン要素
ILAYER	インライン要素
NOLAYER	インライン要素
NOBR	インライン要素
WBR	インライン要素
RUBY	インライン要素
RB	インライン要素
RP	インライン要素
RT	インライン要素
SPACER	インライン要素

Back

「グローバル属性」は、HTMLのすべての要素（タグ）で指定できる属性。

グローバル属性	説明
acccesskey	「ショートカットキー」を指定できる属性。 「値」は、「１文字」で、「半角英数字」を指定する。 「大文字」「小文字」は、区別される。 「半角スペース」で区切ると、複数の値を指定できる。
id	要素に「ID名」を指定できる属性。 「ID名」は、文書内（ファイル）内に一つしか許されないので、 同名の「ID名」を複数に指定することはできない。 「ID名」は、「CSSセレクタ」として指定できるので、「CSS」レイアウトによく使われる。 「ID名」の条件は、 ・１文字以上 ・空白文字は使えない
class	要素に「クラス名」を指定できる属性。 「クラス名」は、文書（ファイル）内に、同一クラス名を複数指定できる。 「クラス名」は、「CSSのセレクタ」として指定することができるので、 「CSS」でのレイアウトデザインによく使われる。 「半角スペース」で区切ることで、複数のクラス名を指定でき、 使用できるのは、「半角英数字」で、、最初の文字は「英字」から始める。
contenteditable	「閲覧者」による要素の「編集」を許可するかを指定できる属性。 「値」を指定しない場合は、「上位要素」の指定を継承する。 ・「true」 = 閲覧者による編集を許可する ・「false」 = 閲覧者による編集を許可しない
dir	要素内にある「文章の向き」指定する属性。 ・「ltr」 = 「左から右」（left to right）。 ・「rtl」 = 「右から左」（right to left）。
hidden	指定すると、要素を表示しなくなる属性。
lang	要素内の文字列が、記されている言語を指定する属性。 指定するタグによって、 「html要素」「文書全体」「一部の要素」などに言語を指定することが可能。
spellcheck	指定したタグ（要素）の内容を「スペルチェック」するかを指定する属性。 ・「true」 = スペルチェックを実行する ・「false」 = スペルチェックを実行しない
style	「HTMLタグ」に直接「CSS」を記述するための属性。
tabindex	「tab」キーで、フォーカスを移動させるときの「優先順位」を指定する属性。 「正の数字」で値を指定することで、「優先順位」を指定する。 「0」を指定された要素が「最後」にフォーカスされる。
title	「タグ（要素）」のタイトル的な補足情報を記述する属性。 「値」には、任意のテキストを記述する。
translate	「タグ（要素）」内の内容に「翻訳」を実行するかを指定する属性。 ・「yes」 = 翻訳を許する 。 ・「no」 = 翻訳を許可しない
カスタムデータ	「カスタムデータ」は、 製作者が属性名を決めることができる属性で、 「data-*****="値"」という書式で記述することが可能。 「JavaScript」を利用してのデータ処理も可能。

Back

「イベントハンドラ属性」は、
属性値に指定した「JavaScript」などのプログラムコードを
「操作（アクション）」に合わせて実行する属性。

イベントハンドラ属性	説明
onclick	マウスクリックしたときに指定内容を実行することができる属性。 「Javascript」などのプログラムコードを指定して、動的な変化を起こすことも可能。 画像に置いては、画像のURLを変更するように指定することも可能。
oninput	入力フォームなどで、データが入力されたときにアクションが実行される属性。 「Javascript」などの実行プログラムを指定すると、データ入力されたときにプログラムが実行される。
onsubmit	入力フォームの「送信」ボタンを押した時など、 データが送信されるときに、アクションを実行する属性。

Back

「ブロック要素」は、
用途によって使い分けられるように、
色々な「HTMLタグ」が用意されている。


ほとんどの「ブロック要素」は、
「div」タグで代用できてしまうこともあるが、
「用途」に応じて、
「ブロック要素」を切り替えて使用するのがスタンダードです。


「ブロック要素」を使い分けるのは、
比較的、簡単に使い分けられる。
「ブロック要素」の「HTMLタグ」に、
どのような意味があるのかを知っておけば、
使い分けるのが簡単になる。



「Webコンテンツ」全体を見ると、
「ヘッダー部分」「メイン部分」「フッター部分」などに、
コンテンツは分けることができます。
そのために、
「HTMLタグ」も、それぞれのブロック用に、
「HTMLタグ」が用意されている。

・コンテンツの「ヘッダー部分」＝「header」タグ
・コンテンツの「メイン部分」＝「main」タグ
・コンテンツの「フッター部分」＝「footer」タグ

コンテンツ内容に応じて、
「ブロック要素」を割り当てると、
上記のようになる。

他にも、色々な「ブロック要素」が用意されているので、
それぞれの用途に応じた「HTMLタグ」を適用する。

「インライン要素」に関しては、
機能があるので、
目的の機能を使いたければ、
機能を持った「インライン要素HTMLタグ」を利用するしかない。
「ブロック要素」とは違い、
代用は、ほとんどできない。


「ブロック要素HTMLタグ」の用途（一部抜粋）

Tag Name	Type	説明
main	ブロック要素	「main」タグは、 文書内の主要な「コンテンツ部分」であることを示す「HTMLタグ」。
header	ブロック要素	「header」タグは、 文書やセクションの「ヘッダー部分」であることを示す「HTMLタグ」。
footer	ブロック要素	「footer」タグは、 文書やセクションの「フッター部分」であることを示す「HTMLタグ」。
aside	ブロック要素	「aside」タグは、 脚注や用語の説明などの「補足情報部分」であることを示す「HTMLタグ」。
nav	ブロック要素	「nav」タグは、 現在の文書内の、他の部分や、他の文書への 「ナビゲーションリンク」を提供するための 「セクション」だと示す「HTMLタグ」。
section	ブロック要素	「section」タグは、 「HTML5」で追加された新しい「HTMLタグ」。 文章の「節」「章」を区分するための「HTMLタグ」。
article	ブロック要素	「article」タグは、 「記事」だということを明確に指定する「ブロック要素」。
div	ブロック要素	各コンテンツ内容を区分し、 レイアウトを指定することができる「ブロック要素」の代表格。 他の「ブロック要素」の代用として、「div」タグが利用できるので、 「ブロック要素」は、「div」タグだけでも、HTMLコードを完成できる。
p	ブロック要素	「p」タグは、 文章の段落を区切るための「ブロック要素」。
「h1」〜「h6」	ブロック要素	「h1」〜「h6」タグは、 文章のタイトルを指定できる「HTMLタグ」。 「Webページ」の内容を示す重要な役割を持っていて、 SEO対策では必須の要素。 きちんとした内容を記述するべき「HTMLタグ」。
「ul」「ol」「li」	「ul」「ol」「li」は、 文章の「リスト」を作成することができる「HTML」タグ。 先頭文字を「記号」「数字」などで追加して「リスト化」できる。
「table」「tr」「th」「td」	「table」「tr」「th」「td」は、 「表」を作成するための「HTMLタグ」で、 レイアウトデザインにも使用される使い勝手が良い「HTMLタグ」。 かなり利用されている。
script	「Javascript」を「head」「body」タグの範囲内に直書きすることができる「HTMLタグ」。 「Javascript」の外部ファイルにリンクさせるためにも使用できる。 「Webページ」を途中で変化させたりする「動的ページ」を作成することなどに使用される。

Back