AI Engineering Tools

プログラミング

ページ編集のためのHTML構造用語

タグ、要素、属性、ページ領域、フォーム、アクセシビリティラベルを検索できるHTML用語集です。

51 件

基本

タグ

Tag

<header>...</header>

意味

ブラウザに作成する要素の種類を指示する、角括弧で囲まれたマークアップキーワード。

対象指定

ターゲットが広範な要素タイプ（すべてのボタンやすべてのリンクなど）である場合は、タグ名を使用してください。

マークアップ

<header>...</header>

依頼例

ヘッダー内のすべてのボタンタグのスタイルを変更します。

基本

要素

Element

<button>Menu</button>

意味

通常は、開始タグ、コンテンツ、および終了タグから構成される、完全なHTMLの断片。

対象指定

ページの一部の可視部分、たとえばタイトル、カード、またはボタンを意味する場合、「要素」と言ってください。

マークアップ

<button>Menu</button>

依頼例

言語選択要素を、メニューボタンの隣に移動します。

基本

属性

Attribute

<a href="/ko">Home</a>

意味

開始タグ内に記述された追加情報（例：`href`、`class`、`id`、`src`、または`aria-label`）。

対象指定

同じタグが何度も現れるが、特定のクラス、ID、またはラベルを持つものが1つだけの場合に、属性が役立ちます。

マークアップ

<a href="/ko">Home</a>

依頼例

アイコンのみのメニューボタンに、aria-label属性を追加する。

基本

開始タグと終了タグ

Opening and closing tag

<section>Content</section>

意味

多くの要素は、開始タグで始まり、対応する終了タグで終わります。

対象指定

これは、マークアップでセクションの開始と終了を説明するのに役立ちます。

注意

閉じタグがないと、ブラウザは後続のコンテンツを誤った要素の一部として扱う可能性があります。

マークアップ

<section>Content</section>

依頼例

カードセクションに、対応する開始タグと終了タグがあることを確認します。

文書構造

DOCTYPE

DOCTYPE

<!doctype html>

意味

ブラウザにドキュメントを最新のHTMLとしてレンダリングするように指示する宣言。

対象指定

通常はフレームワークによって処理され、コンポーネントの作業中に編集されることはまれです。

マークアップ

<!doctype html>

依頼例

ドキュメントの種類を変更しないでください。ページコンポーネントのみを編集してください。

文書構造

html

html

<html lang="ko">...</html>

意味

HTMLドキュメント全体を囲むルート要素。

対象指定

HTML要素は、言語やテーマ属性などのドキュメント全体の構成に使用されます。

マークアップ

<html lang="ko">...</html>

依頼例

各ロケールに対して、htmlの`lang`属性を正しく設定します。

文書構造

ヘッダー

head

<head><title>...</title></head>

意味

メタデータ、タイトル、アイコン、SEOタグ、およびページコンテンツとして表示されないスクリプトのためのドキュメント領域。

対象指定

SEOタイトル、説明、カノニカルURL、またはメタデータを変更するように要求する場合は、この用語を使用してください。

マークアップ

<head><title>...</title></head>

依頼例

HTMLの構造用語のページ用のメタデータタイトルを更新します。

文書構造

ボディ

body

<body>Visible page</body>

意味

ページの内容が表示されるドキュメント領域。

対象指定

ほとんどのレイアウト、ヘッダー、メニュー、およびツールの編集は、本文内で行われます。

マークアップ

<body>Visible page</body>

依頼例

ライトモードとダークモードの両方で、背景の色を一定に保ちます。

文書構造

タイトル

title

<title>AI Engineering Tools</title>

意味

ブラウザのタブに表示され、検索エンジンによって使用されることが多いページタイトル。

対象指定

可視のH1は適切だが、ブラウザまたはSEOのタイトルを変更する必要がある場合に利用します。

マークアップ

<title>AI Engineering Tools</title>

依頼例

ブラウザのタイトルを、表示されているページの見出しを変更せずに、より具体的にします。

文書構造

meta

meta

<meta name="description" content="...">

意味

ページ、ビューポート、エンコーディング、またはソーシャルプレビュー情報を記述するメタデータタグ。

対象指定

メタデータは、プレビューや検索スニペットに影響を与えますが、表示されるページテキストには影響を与えません。

マークアップ

<meta name="description" content="...">

依頼例

検索可能なHTML用語に言及するように、メタディスクリプションを更新します。

ページ領域

ヘッダー

header

<header>...</header>

意味

導入またはトップナビゲーションコンテンツのための意味的領域。

対象指定

サイトのタイトル、トップナビゲーション、テーマボタン、言語ボタン、またはメニューボタンをターゲットにする場合は、ヘッダーを使用します。

マークアップ

<header>...</header>

依頼例

言語選択要素を、メニューボタンの隣のヘッダーコントロール内に移動します。

ページ領域

nav

nav

<nav>...</nav>

意味

主要なナビゲーションリンクのための意味的領域。

対象指定

カテゴリリンク、メニューグループ、またはページナビゲーションを編集する場合に、navを使用します。

マークアップ

<nav>...</nav>

依頼例

メニューリンクを、Converter、Math、Programmingの各カテゴリにグループ化します。

ページ領域

main

main

<main>...</main>

意味

ページの主要なコンテンツ領域。ページには通常、1つの主要な要素があります。

対象指定

ページコンテンツとヘッダー、フッター、またはメニューを区別する場合に、mainを使用します。

マークアップ

<main>...</main>

依頼例

メインコンテンツを押し下げないように、浮動メニューを上部に配置します。

ページ領域

セクション

section

<section>...</section>

意味

関連するコンテンツをまとめたテーマグループ。通常、見出しが付いています。

対象指定

ヒーロー、ツール、または参照コンテンツなど、大きなページブロックをターゲットにする場合に、sectionを使用します。

マークアップ

<section>...</section>

依頼例

モバイルでのツールセクションの垂直方向のパディングを縮小します。

ページ領域

記事

article

<article>...</article>

意味

カード、投稿、参照エントリ、または結果など、自己完結型のコンテンツ項目。

対象指定

各繰り返しカードに独自のタイトルと本文がある場合は、articleを使用します。

マークアップ

<article>...</article>

依頼例

各用語の記事を、デスクトップではよりコンパクトにします。

ページ領域

脇

aside

<aside>...</aside>

意味

メインコンテンツに関連するサポートコンテンツの領域で、通常はサイドバーまたは注釈。

対象指定

フィルターパネル、サイドナビゲーション、またはサポートノートを移動させる必要がある場合は、asideを使用します。

マークアップ

<aside>...</aside>

依頼例

モバイルでは、サイドバーをメインコンテンツの下に移動します。

ページ領域

フッター

footer

<footer>...</footer>

意味

法律に関するリンク、セカンダリナビゲーション、連絡先情報、またはコンテンツの終了部分を配置する領域。

対象指定

セクションの最下部ではなく、ページ全体の最下部をターゲットにする場合は、footerを使用します。

マークアップ

<footer>...</footer>

依頼例

フッターに、小さな法的リンクグループを追加する。

コンテンツ

Heading

Heading

<h1>Page title</h1>

意味

h1からh6までの見出し要素で、ページコンテンツの構造を定義します。

対象指定

階層構造を変更するのではなく、視覚的なサイズのみを変更する場合は、見出しレベルを使用します。

注意

サイズのためにh1またはh2を選択しないでください。視覚的なサイズにはCSSを使用し、ドキュメントの構造には見出しを使用してください。

マークアップ

<h1>Page title</h1>

依頼例

ページタイトルをh1とし、カードのタイトルをh2またはh3にします。

コンテンツ

段落

p

<p>Description text.</p>

意味

テキストの段落。

対象指定

説明的な本文またはその間隔を変更する場合に、paragraphを使用します。

マークアップ

<p>Description text.</p>

依頼例

メインタイトル下の段落を短くします。

コンテンツ

アンカーリンク

a

<a href="/ko/tools/math-prompt">Start</a>

意味

別のページ、ルート、ファイル、または場所に移動するリンク要素。

対象指定

要素が別の場所に移動する場合に、アンカーまたはリンクを使用します。

マークアップ

<a href="/ko/tools/math-prompt">Start</a>

依頼例

ツールへのリンクである「Browse」リンクを、ツールセクションまでスクロールするように変更します。

コンテンツ

リスト

List

<ul><li>Item</li></ul>

意味

無順序リスト（ul）または順序リスト（ol）で構成される、関連する項目のグループ。

対象指定

繰り返しテキスト項目を追加、削除、並べ替え、またはグループ化する際に、リストを使用します。

マークアップ

<ul><li>Item</li></ul>

依頼例

メニュー項目をカテゴリリストにグループ化します。

コンテンツ

テーブル

table

<table><tr><td>Cell</td></tr></table>

意味

表形式のデータ用の、行とセルの構造化されたグリッド。

対象指定

データが単なる視覚的なカードのグリッドではなく、行と列のデータである場合は、tableを使用してください。

マークアップ

<table><tr><td>Cell</td></tr></table>

依頼例

真理値データには、プレーンなdivブロックではなく、テーブルを使用します。

コンテンツ

コードブロック

code / pre

<pre><code>npm run build</code></pre>

意味

`code` はコードテキストをマークします。`pre` は、複数行のコードの改行と空白を保持します。

対象指定

コマンドまたは例の正確な間隔を維持する必要がある場合は、コードブロックを使用します。

マークアップ

<pre><code>npm run build</code></pre>

依頼例

ターミナルコマンドを`<pre>`または`<code>`ブロック内に表示します。

コンテンツ

強調

strong / em

<strong>Important</strong>

意味

セマンティックな強調表示要素。`strong` は重要性を示し、`em` は強調を示します。

対象指定

意味のある強調のために使用し、単なる装飾的な太字やイタリックのスタイルには使用しないでください。

マークアップ

<strong>Important</strong>

依頼例

メッセージ内の警告フレーズには、strongタグを使用してください。

画像とメディア

画像

img

<img src="/hero.png" alt="Tool preview">

意味

画像ファイルを表示する要素。

対象指定

視覚メディアを置き換える、リサイズする、トリミングする、または代替テキストを追加する場合は、画像を使用します。

マークアップ

<img src="/hero.png" alt="Tool preview">

依頼例

メイン画像に、内容を明確に示す代替テキストを追加する。

画像とメディア

代替テキスト

alt

<img alt="Menu panel open">

意味

スクリーンリーダーで使用される画像の説明文、または画像が読み込めない場合に表示されるテキスト。

対象指定

アクセシビリティの改善や画像の意味について問い合わせる場合は、alt属性を使用します。

注意

装飾的な画像は、空のaltテキストを使用できますが、意味のある画像には、役立つ説明が必要です。

マークアップ

<img alt="Menu panel open">

依頼例

スクリーンショットの内容を説明する代替テキストを追加する。

画像とメディア

SVG

svg

<svg>...</svg>

意味

アイコン、図、およびスケーラブルな形状によく使用されるベクトルグラフィック要素。

対象指定

視覚的な要素が単純な形状またはアイコンであり、鮮明さを維持する必要がある場合は、SVGを使用します。

マークアップ

<svg>...</svg>

依頼例

アイコンライブラリが利用できない場合は、メニューボタンにSVGアイコンを使用します。

フォームとコントロール

ボタン

button

<button type="button">Menu</button>

意味

クリックまたはタップされたときにアクションを実行するコントロール。

対象指定

コントロールがUIの状態を変更したり、メニューを開いたり、フォームを送信したり、アクションを実行したりする場合は、ボタンを使用します。

注意

ナビゲーションの場合、通常はボタンよりもリンクの方が適しています。

マークアップ

<button type="button">Menu</button>

依頼例

メニューボタンをクリックすると、まず言語ドロップダウンを閉じ、次にメニューを開きます。

フォームとコントロール

フォーム

form

<form>...</form>

意味

ユーザーからの入力を収集および送信するために使用される、コントロールのグループ。

対象指定

入力が1つの送信または1つの入力ワークフローに属している場合は、フォームを使用します。

マークアップ

<form>...</form>

依頼例

検索入力とカテゴリコントロールを、1つのフォームのようなコントロール領域にグループ化します。

フォームとコントロール

ラベル

label

<label for="search">Search</label>

意味

フォームコントロールの名前を付けるテキスト。

対象指定

入力に、可視またはスクリーンリーダーフレンドリーな名前が必要な場合に、ラベルを使用します。

マークアップ

<label for="search">Search</label>

依頼例

検索入力フィールドに、UIを煩雑にしないラベルを追加する。

フォームとコントロール

入力

input

<input type="search" placeholder="Search">

意味

ユーザーが値を入力または選択するフィールド。

対象指定

検索フィールド、テキストフィールド、数値、チェックボックス、またはその他の単純なコントロールをターゲットにする場合は、inputを使用します。

マークアップ

<input type="search" placeholder="Search">

依頼例

モバイルで、検索入力を全幅にします。

フォームとコントロール

選択

select

<select><option>English</option></select>

意味

リストから1つのオプションを選択するための、ネイティブのドロップダウンコントロール。

対象指定

コントロールが、ネイティブフォームのドロップダウンではなく、カスタムメニューパネルである場合に、selectを使用します。

マークアップ

<select><option>English</option></select>

依頼例

選択されたオプションがダークモードでも読みやすいように、言語選択のスタイルを設定します。

フォームとコントロール

テキストエリア

textarea

<textarea>Long text</textarea>

意味

複数行のテキスト入力。

対象指定

ユーザーが長いテキストを貼り付けたり編集したりする必要がある場合は、textareaを使用してください。

マークアップ

<textarea>Long text</textarea>

依頼例

長いプロンプト入力を処理するために、テキストエリアの高さを増やします。

属性

クラス

class

<button class="icon-button">...</button>

意味

要素をグループ化するために使用される属性。

対象指定

クラスは、繰り返されるUIパターンをターゲットにするための最も実用的な方法であることがよくあります。

マークアップ

<button class="icon-button">...</button>

依頼例

すべてのメニューカテゴリのトグルボタンに同じクラスを適用します。

属性

ID

id

<section id="tools">...</section>

意味

ページ上の要素を一意に識別する識別子。

対象指定

リンクが特定のセクションにスクロールする必要がある場合、またはラベルが入力に接続する必要がある場合は、idを使用します。

注意

同じIDは、1つのページ上の複数の要素で再利用しないでください。

マークアップ

<section id="tools">...</section>

依頼例

ツールセクションにIDを追加して、"Browse tools" リンクからそこにスクロールできるようにする。

属性

href

href

<a href="/ko/reference/html-structure-terms">HTML</a>

意味

リンクの宛先URLまたはフラグメント。

対象指定

リンクが間違ったページまたはセクションを指している場合は、hrefを使用します。

マークアップ

<a href="/ko/reference/html-structure-terms">HTML</a>

依頼例

プログラミングメニューの href を、新しい HTML 構造の用語ページに変更します。

属性

src

src

<img src="/images/example.png" alt="Example">

意味

画像、スクリプト、iframe、および同様のメディアのソースファイルパス。

対象指定

画像やスクリプトが欠落している、誤っている、または置き換える必要がある場合は、src属性を使用してください。

マークアップ

<img src="/images/example.png" alt="Example">

依頼例

画像のsrc属性を、新しいプレビュー画像のパスに置き換えます。

属性

データ属性

data-*

<html data-theme="dark">

意味

要素に状態またはメタデータを保存するために使用されるカスタム属性。

対象指定

スタイルがテーマ、開いている、閉じている、または選択されているなどの状態に依存する場合は、データ属性を使用します。

マークアップ

<html data-theme="dark">

依頼例

ダークモードの色を変更するために、html要素にdata-themeを使用します。

アクセシビリティ

ロール

role

<div role="menu">...</div>

意味

要素が表すUIオブジェクトの種類を説明するアクセシビリティ属性。

対象指定

カスタムコンポーネントに、メニュー、ダイアログ、タブ、またはアラートなど、明確な意味を与える必要がある場合に、roleを使用します。

注意

ネイティブのセマンティック要素は、通常、汎用的な div に role を追加するよりも優れています。

マークアップ

<div role="menu">...</div>

依頼例

カスタム言語リストに適切なメニューロールを割り当てます。

アクセシビリティ

`aria-label`

aria-label

<button aria-label="Toggle menu">...</button>

意味

視覚的に表示されるテキストが不足している場合、または不十分な場合に、支援技術用のテキストラベル。

対象指定

メニュー、検索、閉じる、またはテーマボタンなどのアイコンのみのコントロールには、aria-labelを使用します。

マークアップ

<button aria-label="Toggle menu">...</button>

依頼例

ハンバーガーメニューボタンを明確に名前を付けるaria-labelを追加する。

アクセシビリティ

`aria-expanded`

aria-expanded

<button aria-expanded="false">Menu</button>

意味

コントロールパネルが開いているか閉じているかを通知するアクセシビリティ属性。

対象指定

ドロップダウンボタン、アコーディオン、およびメニューの切り替えに使用します。

マークアップ

<button aria-expanded="false">Menu</button>

依頼例

メニューカテゴリが開いたり閉じたりするときに、aria-expandedを更新します。

階層と関係

親と子

Parent and child

<nav><a>Link</a></nav>

意味

親要素は、その中に子要素を含みます。

対象指定

ターゲットが、それが配置されている場所によって異なる場合（ナビゲーション内のリンクやヘッダー内のボタンなど）に、これを使用してください。

マークアップ

<nav><a>Link</a></nav>

依頼例

ヘッダーナビゲーションの子であるリンクのみをスタイルします。

階層と関係

兄弟

Sibling

<button /> <button />

意味

同じ親を持つ要素は、兄弟要素です。

対象指定

間隔やインタラクションが隣接する要素に依存する場合は、siblingを使用してください。

マークアップ

<button /> <button />

依頼例

親ヘッダーボタン間の間隔を縮めます。

階層と関係

ネスト

Nesting

<section><article><h2>Title</h2></article></section>

意味

要素が他の要素の中に配置されるときに作成される構造。

対象指定

どの内部要素を変更すべきかを正確に説明する場合に、nestingを使用します。

マークアップ

<section><article><h2>Title</h2></article></section>

依頼例

各カードで、プロパティチップの下にリクエストの例を移動します。

階層と関係

ラッパー

Wrapper

<div class="container">...</div>

意味

主に他の要素をグループ化、制約、または配置するために使用される要素。

対象指定

レイアウトを変更するのではなく、周囲の要素が必要な場合は、wrapperを使用してください。

マークアップ

<div class="container">...</div>

依頼例

ドロップダウンメニューが右側に配置されるように、ヘッダーコントロールの周りにラッパーを追加する。

階層と関係

コンテナ

Container

<div class="container">Page content</div>

意味

ページコンテンツを配置し、読みやすい幅に制限するラッパー。

対象指定

全体的なコンテンツ幅またはサイドパディングを変更する場合は、コンテナを使用します。

マークアップ

<div class="container">Page content</div>

依頼例

メインコンテンツコンテナを、デスクトップでは少し狭くします。

階層と関係

フラグメント

Fragment

<>...</>

意味

Reactで使用され、追加のDOM要素を追加せずに要素をグループ化するラッパー。

対象指定

レイアウトまたはCSSセレクタに影響を与えずに、要素をグループ化する場合は、フラグメントを使用します。

マークアップ

<>...</>

依頼例

不要なラッパーdivを追加する代わりに、フラグメントを使用します。

アクセシビリティ

セマンティックHTML

Semantic HTML

<main><section><h1>...</h1></section></main>

意味

要素の意味に基づいてHTMLを使用し、視覚的な外観のみに依存するものではありません。

対象指定

構造、アクセシビリティ、SEO、または保守性を向上させる際には、意味のあるHTMLを使用してください。

マークアップ

<main><section><h1>...</h1></section></main>

依頼例

参照ページセクションでは、汎用的なdiv要素の代わりに、意味のあるHTMLを使用してください。

アクセシビリティ

目印

Landmark

<header> <nav> <main> <footer>

意味

支援技術のユーザーがすばやくナビゲートするのに役立つ、重要なページ領域。

対象指定

Header、nav、main、aside、およびfooterは、ランドマークとして機能できます。

マークアップ

<header> <nav> <main> <footer>

依頼例

各ページに、1つの明確な主要な目印を配置します。

アクセシビリティ

アクセシブルな名前

Accessible name

<button aria-label="Open menu">☰</button>

意味

アクセシビリティ技術が、コントロールを通知するために使用する名前。

対象指定

視覚的には明確だが、スクリーンリーダー向けに名前が付けられていないコントロールには、アクセス可能な名前を使用します。

マークアップ

<button aria-label="Open menu">☰</button>

依頼例

テーマの切り替えに、すべてのロケールで明確でアクセス可能な名前を付けます。

アクセシビリティ

tabindex

tabindex

<button tabindex="0">Action</button>

意味

キーボードのフォーカス順序に影響を与える可能性のある属性。

対象指定

カスタムコントロールがキーボードで操作できない場合に、注意して使用します。

注意

正のtabindex値を使用すると、キーボード操作の順序が混乱する可能性があります。 通常、ネイティブのフォーカス順序の方が適しています。

マークアップ

<button tabindex="0">Action</button>

依頼例

正の tabindex 値を避け、キーボードの順序を自然に保ってください。