すべての HTML タグと説明と例。 基本的な HTML タグ
HTML タグは HTML 言語の基礎です。 タグは、マークアップ内の要素の先頭と末尾を区切るために使用されます。
各 HTML ドキュメントは、HTML 要素とテキストのツリーで構成されます。 各 HTML 要素は、開始 (開始) タグと終了 (終了) タグによって識別されます。 開始タグと終了タグにはタグの名前が含まれます。
すべての HTML 要素は、次の 5 つのタイプに分類されます。
- 空の要素 - 、、、
, , , ,, ,
保管に使用 追加情報ページについて。 この情報は、ブラウザーによってページを処理するために使用され、検索エンジンによってページのインデックスが作成されるために使用されます。 使用される属性に応じて異なる情報を伝達するため、ブロック内に複数のタグを含めることができます。 指定された範囲の測定値を示すインジケーター。 サイトのナビゲーション リンクを含むドキュメントのセクション。 スクリプトをサポートしないセクションを定義します。 マルチメディア（オーディオ、ビデオ、Java アプレット、ActiveX、PDF、Flash など）を埋め込むためのコンテナ。 現在の HTML ドキュメントに別の Web ページを挿入することもできます。 タグはプラグインのパラメータを渡すために使用されます。 順序付けられた番号付きリスト。 番号付けには数字またはアルファベットを使用できます。 要素のグループのタイトルを持つコンテナ。 、または 、ドロップダウン リストから選択するオプションを指定します。 スクリプトを使用して計算された計算結果を表示するフィールド。 テキスト内の段落。 要素を使用して埋め込まれたプラグインのパラメータを定義します。 1 つの要素を含むコンテナ要素 および 0 個以上の要素。 それ自体では何も表示されません。 ブラウザが最も適切な画像を選択できるようにします。
フォーマットせずにテキストを出力し、スペースやテキストの区切りを保持します。 コンピューターコード、メッセージの表示に使用可能 Eメール等 あらゆる種類のタスクの完了を示す指標。 短い引用を定義します。 東アジアのシンボルとそのデコード用のコンテナ。 ネストされたテキストを注釈の基本コンポーネントとして定義します。 追加 簡単な説明要素に含まれる文字の上または下に小さいフォントで表示されます。 埋め込まれたテキストを追加の注釈としてマークします。 出力 代替テキストブラウザがその要素をサポートしていない場合。 現在ではないテキストを取り消し線付きで表示します。 実行結果を表すテキストを表示するために使用されます プログラムコードまたはスクリプトも同様に システムメッセージ。 等幅フォントで表示されます。 クライアント側のスクリプト (通常は JavaScript) を定義するために使用されます。 スクリプト テキストまたはポイントが含まれます。 外部ファイル src 属性を使用したスクリプト。 ページの論理領域 (セクション) を定義します。通常はヘッダーが含まれます。 提案されたセットから値を選択できるようにするコントロール要素。 バリアント値は に配置されます。 テキストを小さいフォント サイズで表示します。 、 、 の代替メディア リソースの場所とタイプを指定します。 のコンテナ インライン要素。 個々の単語を強調表示するなど、テキストの一節を書式設定するために使用できます。 テキストを太字で強調表示して強調します。 埋め込み可能なスタイルシートが含まれています。 化学式の元素インデックスなどの記号の下付き表記を指定します。 作成します 表示されるヘッダータグ用に。 黒三角で表示され、クリックするとタイトルの詳細が表示されます。 文字の上付きスペルを指定します。 テーブルを作成するためのタグ。 テーブルの本体を定義します。 表のセルを作成します。 スクリプトによってクローンを作成してドキュメントに挿入できる HTML コード フラグメントを宣言するために使用されます。 タグの内容はその子ではありません。 大きなテキスト入力フィールドを作成します。 テーブルのフッターを定義します。 表のセルのタイトルを作成します。 テーブルのタイトルを定義します。 日付/時刻を定義します。 ブラウザのタイトル バーの上部に表示される HTML ドキュメントのタイトル。 検索結果にも表示される場合があるため、タイトルを指定する際にはこれを考慮する必要があります。 テーブルの行を作成します。 要素と にサブタイトルを追加します。 追加の強調を行わずに、下線を引いてテキストの一節を強調表示します。 箇条書きリストを作成します。 プログラムの変数を斜体で表示して強調表示します。 動画ファイルをページに追加します。 MP4、WebM、Ogg の 3 つのビデオ形式をサポートします。 長い行がどこで途切れる可能性があるかをブラウザに示します。 タグは、山括弧で囲まれた特別な予約語です (例: )。 タグは HTML の主要コンポーネントです。コードはタグで始まりタグで終わり、Web ページに表示される情報はタグ内に含まれます。 それらを小文字、つまり通常の小さな文字で書くことをお勧めします: not but。
タグにはどんな種類があるの？ほとんどの HTML タグはペアになっています。開始タグ (たとえば、) と終了タグがあり、最初の山括弧 (たとえば、) の後のスラッシュ (/) によって開始タグと区別されます。 タグのペア内にあるものはすべて、そのコンテンツと呼ばれます。
コンテンツ これらのタグ内に配置されたテキストは太字になります
タグと呼ばれる、ペアになっていない (単一の) タグもあります。 これらは、ペアのタグとは異なり、コンテンツとは連携せず、独自に何らかの機能を実行するため、閉じる必要はありません。 単一タグの例 -
。 テキストの回り込みを次のように設定します 次の行.ロシア語との類似点を引くと、ペアのタグは、タグに含まれるテキストのプロパティに影響を与える引用符または括弧であり (引用符をすぐに閉じないように注意してください)、単一のタグ (マーク) は句読点 (感嘆符、疑問符、またはドット)。
タグは次のもので構成されます。
- 開き山かっこ (< ).
- 特別な単語（タグ名）。 たとえば、 hr 、 iframe 、 b です。
- 閉じ山括弧 (> )。
タグはマークアップ言語の基礎であるため、タグが非常に多く存在することは驚くべきことではありません。 最も重要な主要なタグを見てみましょう。
- - コメントを含む単一のタグ。 コメントはブラウザによって処理されないテキストです。 タグ内には、他のタグも含めて何でも書き込むことができますが、それらは機能せず、画面に表示されません。 開発者は、他のウェブマスターが理解しやすくするため、または長い時間が経っても自分自身ですぐに理解できるようにするために、コードにコメントします。
- 、、、、、は、適切な HTML ドキュメントに存在する必要があるタグです (詳細については、「メモ帳で Web サイトを作成する方法」を参照してください)。
- - タグにはブラウザと検索エンジンの補助情報が含まれています。 中に書き込むことができます キーワード、ページの説明、ドキュメントのエンコード、作成者名など。
- スクリプト ファイルまたはコード自体へのリンクが含まれています。
- - ドキュメントおよび/またはその要素のスタイルを指定するタグ CSSを使用する。 HTML ドキュメントには、定義する多くのタグを含めることができます。 さまざまなスタイルページのさまざまな部分。
- - まったく逆で、それを補完します。 タグはセクションまたはページ全体の「ヘッダー」（タイトル）を指定します。
- サイトまたはセクションの「脚」を保管します。 その中にサポート情報、著作権、連絡先情報などを配置できます。
- ページのメインコンテンツが含まれます。 ヘッダーでも、メニュー ブロックでも、サイトの「脚部」でもなく、ページが何のために作成されたかです。 たとえば、今読んでいるページでは、この記事が中にあるはずです。
- リンクを作成するために設計されています。 リンクはハイパーテキストの根幹であるため、この記事ではリンクについて取り上げます。
Web ページに画像を追加するために必要です (このアクションは、貴社のサービスが担当します)。
-
,
, - , , ,、、、およびその他のテキスト書式設定タグは、HTML タグの大きなグループを構成します。これらについては、「HTML でのテキストの書式設定」の記事で説明します。
- - ブロック要素。 内部のテキストは CSS (カスケード スタイル シート、チュートリアルの第 2 部の主題) を使用して書式設定されています。
- 。 段落があります
またはブロック その中のテキストは次のようにフォーマットされています ユニフォームスタイル, しかし、構造を壊さずに、いくつかの単語を別のフォント サイズまたは色で表示したいとします。 タグが意図されているのはそのような状況です。
-
,
-
,
- - タグをリストします。 マークと番号が付けられているのは、これらのタグの働きです。 タグが対応する定義のリストもありますが、これら 6 つすべてについては「リストの作成」の記事で詳しく説明します。
, , ,
、 そして はテーブルを作成するときに使用され、別の記事で詳しく説明されています。 - - ページに対話性を追加するタグ。つまり、ユーザーが Web サイトと対話できるようにします。 もちろん、フォームにはハンドラーが必要ですが、内部のタグを使用してインターフェイスを作成できます。 チェックボックス、ボタン、ラジオ ボタン、入力フィールド、およびユーザーによるアクティブなアクションを必要とするその他のオブジェクトはすべてフォーム要素であり、そのコードはコンテナ内に配置されます。
- - インタラクティブなボタンを作成するタグ。 クリックしたときに何かが起こるためには、ボタンがフォーム内 (タグの間にある) に存在する必要があります。
- スイッチ、チェックボックス、ボタン、あらゆる種類の入力フィールドなどのフォーム要素を作成します。 容器に入れました。 しかし、汎用のものがあるのに、なぜ個別に必要なのでしょうか? 高度なパラメータを備えたボタンを作成できます。 たとえば、ボタンに画像を配置できます。 これは、 を通じて作成された要素に対しては実行できません。
- - HTML 5 のメニュー作成タグ。 - これは要素が配置されるコンテナであり、要素を追加するとメニュー項目が作成されます。 なかなか面白いカップルですね。 たとえば、このツールを使用すると、ページまたはその個々の要素に独自のコンテキスト メニューを作成できます。
- - 大きなフィールドを作成するもう 1 つの form タグ。そこに 1 行のテキストだけでなく段落全体を入力できます。
最初に例で何かを示してから、より詳細な説明に進む方がよいと思われるため、いくつかの HTML タグにコメントが与えられた単純なページを作成する例を検討しました。 ページの作成については 2 番目のレッスンで説明し、3 番目のレッスンでさらに詳しく説明したのはこのためです。
したがって、以下は、サイトのほぼすべてのページで使用される一般的な HTML タグの説明です。 信じてください、ウェブサイト全体を書くのに十分な数がすでにあります。
HTML タグのリスト 1. HTML タグ (段落用) - テキスト段落を表示します (style、class、id 属性を使用できます)。 テキストが配置されることが最も多いため、最も一般的なタグです (ただし、これがそのために作成されたものです)。例えば、 htmlコード:
テキスト段落番号 1
そしてこれは別の段落です
テキスト段落番号 1
そしてこれは別の段落です
タグにスタイルパラメータを追加することもできます。
これらの異なる値を使用して編集できます 外観フォント。 これらのパラメータについては、別のレッスン「HTML のスタイルと CSS フォント プロパティ」で読むことができます。
CLASS 属性と ID 属性を指定することもできます。 例えば：
2. HTMLタグと(太字)そして - フォントを太字にするための 2 つのタグ。 これらのタグに違いはありません。
例を挙げてみましょう。 HTMLコード:
サムネイルページ上で次のように変換されます。
サムネイル
CLASS 属性と ID 属性を指定することもできます (Note の場合と同様)
これらのタグは、ドキュメントのランキングにほとんど影響を与えません。 サーチエンジン, なので、むやみに使わないほうが良いでしょう。
3.HTMLタグ (斜体を作成)- 斜体フォント (スタイル、クラス、ID パラメータを使用可能)
たとえば、HTML コードは次のようになります。
斜体のテキストページ上で次のように変換されます。
4.HTMLタグ (下線付きのテキスト)- 下線付きフォント (スタイル、クラス、ID パラメータを使用可能)
たとえば、HTML コードは次のようになります。
下線付きのテキストページ上で次のように変換されます。
下線付きのテキスト
5.HTMLタグ (ハイパーリンクの作成)ページ上にリンクを作成します (スタイル、クラス、その他のパラメーターを使用できます)。
たとえば、HTML コードは次のようになります。
リンクテキストページ上で次のように変換されます。
すべてのタグのパラメータと属性 これについては別のレッスンで説明します。 htmlタグ。
6. HTMLタグ（コンテンツ内の見出し）,..., - コンテンツ内のヘッダー タグ (style、class、id パラメーターを許可します)。 さらに、数値が小さいほど、これらのタグで囲まれたテキストの重みとサイズ (デフォルト) が大きくなります。
たとえば、HTML コードは次のようになります。
見出し h1このタグはページのタイトル（タイトルだけでなく）にも使用されます。
これらのタグは、本来の目的にのみ使用する必要があります。 記事にタイトルが必要な場合のみ。 これは、タグが検索エンジンに大きな影響を与えるためです。 正しく使えば、検索結果の上位に表示される可能性が非常に高くなります。
7. HTMLタグ（アライメント）- コンテンツを中央に配置します。
たとえば、HTML コードは次のようになります。
このテキストは中央に表示されますページ上で次のように変換されます。
このテキストは中央に表示されます
注記- - テキスト用
- ... - すべてのもの (画像など)
- 下付きフォントを表示します。
たとえば、HTML コードは次のようになります。
プレーンテキスト、行間テキストページ上で次のように変換されます。
プレーンテキスト、行間テキスト
9. HTMLタグ（上付き文字）- 上付きフォントを表示します。
たとえば、HTML コードは次のようになります。
プレーンテキスト、上付きテキストページ上で次のように変換されます。
プレーンテキスト、上付きテキスト
10.HTMLタグ、, - 現在のサイズより 1 ピクセル大きい/小さいフォントを表示します (style、class、id パラメーターで許可されます)。
たとえば、HTML コードは次のようになります。
通常のフォント、このフォントは 1 ピクセル大きくなりますページ上で次のように変換されます。
通常のフォント、このフォントは 1 ピクセル大きくなります
11.HTMLタグ- (リストの作成)
- そして .
- リストの最初の要素
- リストの 2 番目の要素
- リストの最初の要素
- リストの 2 番目の要素
- accesskey を使用すると、特定のページ オブジェクトにアクセスするためのキーボード ショートカットを設定できます。 たとえば、ユーザーが Alt+1 キーの組み合わせを使用して特定のリンクをたどることを確認できます。 したがって、キーナビゲーションシステムを開発します。
- クラスを使用すると、タグを事前定義されたタグに関連付けることができます。 CSS スタイル。 属性を使用すると、同じ CSS ブロックを繰り返し入力する代わりに、対応するクラスの名前を入力するだけで済むため、コードを大幅に削減できます。
- contenteditable を使用すると、ユーザーが HTML ページの任意の要素 (テキストの削除、挿入、変更) を編集できるようになります。 同じ属性により、編集と無効化が可能になります。 値は 2 つだけです。true - 編集を許可、false - 無効です。
- contextmenu 属性を使用すると、任意のドキュメント要素に固有の項目を与えることができます。 コンテキストメニューあなた自身の裁量で。 メニュー自体はタグ内に作成され、contextmenu 属性にその識別子が割り当てられます。
- dir は、テキストの方向を指定します。左から右 (ltr) または右から左 (rtl) です。
- draggable を使用すると、この属性が与えられたページ要素のドラッグをユーザーが無効 (false) または許可 (true) することができます。
- Dropzone は、ドロップされた要素をどう処理するか、つまりコピー (値のコピー)、移動 (移動)、またはその要素へのリンクの作成 (リンク) をブラウザーに指示します。
- hidden - 要素のコンテンツを非表示にして、ブラウザーに表示されないようにする属性。 この属性が false に設定されている場合はオブジェクトが表示され、true に設定されている場合は非表示になります。
- id は要素の識別子を指定します。これは、オブジェクトのスタイルを単に変更するだけでなく、スクリプトがアクセスできるようにするために必要な一種の名前です。 属性の値はその名前になります。 それは必ず始まります ラテン文字、数字、同じラテンアルファベットの文字 (大小)、ハイフン (-) およびアンダースコア (_) 記号を含めることができます。 ロシア語の文字を含めることはできません。
- lang は、ブラウザがコンテンツがどの言語で記述されているかを理解し、それに応じてスタイルを設定するのに役立ちます (たとえば、言語によって異なる引用符が使用される場合があります)。 値は言語コード (ロシア語 - ru、英語 - en など) です。
- Spellcheck は、スペル チェックを有効 (true) または無効 (false) にします。 ユーザーがテキストを入力するフォーム フィールド タグでこの属性を使用すると特に便利です。
- style を使用すると、CSS コードを使用して要素のデザインを設定できます。
- tabindex を使用すると、その属性を持つオブジェクトがフォーカスを受け取るためにユーザーが Tab キーを何回押す必要があるかを決定できます。 クリック数によって属性値 (正の整数) が決まります。
- title - 要素の上にマウスを移動し、しばらく静止したままにすると表示されるツールチップ。 意味中のセリフがヒントになります。
- translation は、タグの内容の変換を許可 (yes) または拒否 (no) します。
- align は要素の配置を指定します。 たとえば、テキストを左揃え、右揃え、中央揃え、または両端揃えに使用できます。 画像の場合（タグ
) の上端に合わせて配置 高元素線 (上)、下の境界線 (下) に沿った線、および値 middle は、画像の中央の線を線のベース ラインと一致させます。
リストを表示します (スタイル、クラス、ID パラメータを受け入れます)。 新しい要素はそれぞれ、
たとえば、HTML コードは次のようになります。
リスト：ページ上で次のように変換されます。
リスト：
(テーブルの作成)
- テーブルを作成します (スタイル、クラスパラメータを許可します)。 それぞれの新しい行はタグによって作成されます
、およびコラム . たとえば、HTML コードは次のようになります。
1行1要素 1行目2要素 2行1要素 2行2エレメント ページ上で次のように変換されます。
すべてのタグ機能
13. HTMLタグ
(改行)
- 次の行への遷移は単一のタグです。たとえば、HTML コードは次のようになります。
ライン1
2行
3 行目 トランジションがないため、このテキストは 3 行目に表示されます。ページ上で次のように変換されます。
1行
14. HTMLタグ（横線）
2行
3 行目 トランジションがないため、このテキストは 3 行目に表示されます。- 線を描画し、単一のタグを表します (スタイル、クラス パラメーターを使用できます)。
たとえば、HTML コードは次のようになります。
一部のテキストが行の上にあり、このテキストは行の下に表示されますページ上で次のように変換されます。
一部のテキストが行の上にあり、このテキストは行の下に表示されます
15. HTMLタグ(映像出力)
たとえば、HTML コードは次のようになります。
http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">
ページ上で次のように変換されます。
すべてのタグ機能
16. HTMLタグ（テキストの整形）これについては、別のレッスンで説明します。
- テキストの書式設定、スタイルの変更など。 (パラメータのスタイル、クラス、ID を許可します)。 検索エンジンの目で見ても重みがないので、使いたいだけ使えます。
たとえば、HTML コードは次のようになります。
このテキストは緑色で、サイズは 15 ピクセルですページ上で次のように変換されます。
注記同様のタグは です。
17. HTMLタグ（フォーム作成）- ページ上にフォームを作成します (スタイル、クラス パラメーターを許可します)。
たとえば、ログイン名とパスワードの入力、任意のボタン、任意の登録フォーム、これらはすべてフォームです。
18. HTMLタグ（ブロックの作成）- ページ上にブロックを作成するために使用されます (スタイル、クラス パラメーターを許可します)。 以前は、テーブルは主にページをマークアップするために使用されていました。 タグが表示されてから作業が楽になりました。 ほとんどすべての Web サイトには、テーブルの便利な代替手段としてブロックが含まれています。
私たちはすでにそれを理解しています。 コンテンツがあることがわかりました。 しかし、それだけではありません。 タグにはその機能を強化する属性もあり、属性には値もあります。 彼らの助けを借りて、要素のパラメータを設定し、デザイン スタイルを決定できます。 たとえば、タグを使用すると、
段落にマークを付けました。 しかし、それを右揃えにするにはどうすればよいでしょうか? これを行うには、対応する値を持つ特定の属性が必要です。 一部のタグにはペアがないのと同様に、一部の属性は値なしで使用できます。
属性ってどうやって書くの？属性は予約語 (タグと同様、山括弧なしのみ) ですが、その意味は異なる場合があります。 タグと同様に、値を持つ属性を小さな文字で書くことをお勧めしますが、ブラウザは一般に気にしません。これは単なるマナーのルールです。ロシア語では、Caps Lock キーを押しながら書くこともできません。有効になっています。 なぜ HTML は劣悪なのでしょうか?
属性値は次の形式で記述されます。
属性=”値” lang=”en”
属性は常に開始タグ内の予約語の後に記述する必要があります。
段落
通常、1 つのタグに複数の属性を使用できます。 リストされている順序は関係ありません。
普遍的な属性各 HTML タグには独自の属性セットがあります。 一部の属性は複数のタグで使用できる場合がありますが、他の属性は 1 つでのみ機能する場合があります。 任意のタグで使用できるユニバーサル (グローバル) 属性のグループもあります。 このカテゴリの属性を簡単に見てみましょう。
属性値には、0 ～ 9 の数字またはラテン文字を使用できます。
align 属性の使用は推奨されず、CSS を使用してテキストを整列させることをお勧めします。
属性の使用例例として、次の HTML コード行を考えてみましょう。
このテキストは編集できます
行全体により、ユーザーがブラウザで編集できるテキストの段落が作成されます。
行の各要素を見てみましょう。
- 段落を格納するコンテナの開始タグ。
- 終了タグ。記号 > と< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable =”true” - これは属性とその値です。 学校でのやり方を思い出してください: x=3。 ここでも同じです: contenteditable = "true"。 contenteditable 属性は、ユーザーが要素のコンテンツを編集できるかどうかを指定します。値 true を等号で区切って引用符で囲むと、編集が許可されます。
属性=”値” contenteditable=”true”
で HTML言語 HTML ドキュメントに記述したものはすべて、ブラウザ画面にソリッド テキストとして表示されます。つまり、ブラウザは改行を無視し、連続して入力したいくつかのスペースは 1 つに置き換えられます。
タグは、テキストをフォーマットするために発明された制御コマンドです。 タグは、タグで囲まれたテキストの部分を表示する方法をブラウザに正確に指示します。 タグを作成するには、ブラウザ専用の HTML コードを山かっこの間に入力します。 サイト訪問者にはタグが表示されません。
上で述べたように、すべてのタグは山かっこで始まります< и заканчиваются угловой скобкой >。 開始山括弧の後にタグ (コマンド) の名前が続きます。
たとえば、タグはテキストを強調することを目的としており、ブラウザではそのようなテキストが斜体で表示されます。 ブラウザがこのタグを検出すると、書式設定に切り替わります。 斜体フォントタグに続くテキスト。
例を見てみましょう:
このテキストは正常です。 このテキストは斜体です。
タグは開始タグまたは開始タグと呼ばれ、ブラウザーに特定のコマンドが含まれていることを意味します（ この場合斜体で書かれています）。 ほとんどのタグには、コマンドを無効にする終了タグの形式のペアがあります。
終了タグは開始タグと同じように見えますが、スラッシュで始まります。 したがって、斜体の終了タグは です。
例を見てみましょう:
このテキストは正常です。 注意！ イタリック体。こちらも通常のフォントです。
お気づきかと思いますが、ブラウザは HTML ドキュメントを順番に分析してコマンド (タグ) を検索し、さまざまなテキスト書式設定オプションを適用または無効にします。 ブラウザは、フォーマットされたテキスト (タグではないすべて) をウィンドウに表示します。
書式設定されていないプレーン テキストにタグを挿入するプロセスは、HTML ドキュメントではマークアップと呼ばれ、タグはマークアップ文字と呼ばれます。 タグを記述する場合、大文字と小文字は考慮されません。タグは小文字でも大文字でも記述できますが、それでも大文字を使用することをお勧めします。 以下に主な例を示します HTMLタグ、その使用方法の説明と、HTML ドキュメントでのアプリケーションの例を示します。
見出しHTML で見出しを指定するための特別なタグがあります。 HTML には、最も重要なお知らせから最も重要でないお知らせまで、6 つのレベルの見出しがあります。