编程
搜索标签、元素、属性、页面区域、表单控件与无障碍标签。
51 个项目
基础
Tag
<header>...</header>A markup keyword wrapped in angle brackets that tells the browser what kind of element to create.
Use the tag name when the target is a broad element type, such as every button or every link.
<header>...</header>Change the style of all button tags inside the header.
基础
Element
<button>Menu</button>A complete piece of HTML, usually made from a start tag, content, and an end tag.
Say element when you mean one visible part of the page, such as a title, card, or button.
<button>Menu</button>Move the language switcher element next to the menu button.
基础
Attribute
<a href="/ko">Home</a>Extra information written inside a start tag, such as href, class, id, src, or aria-label.
Attributes are useful when the same tag appears many times but only one has a specific class, id, or label.
<a href="/ko">Home</a>Add an aria-label attribute to the icon-only menu button.
基础
Opening and closing tag
<section>Content</section>Many elements start with an opening tag and end with a matching closing tag.
This helps when explaining where a section begins and ends in markup.
A missing closing tag can make the browser treat later content as part of the wrong element.
<section>Content</section>Check that the card section has matching opening and closing tags.
文档结构
DOCTYPE
<!doctype html>A declaration that tells the browser to render the document as modern HTML.
It is usually handled by the framework and rarely edited during component work.
<!doctype html>Do not change the document type; only edit the page component.
文档结构
html
<html lang="ko">...</html>The root element that wraps the whole HTML document.
The html element is used for document-wide settings such as language or theme attributes.
<html lang="ko">...</html>Set the html lang attribute correctly for each locale.
文档结构
head
<head><title>...</title></head>The document area for metadata, title, icons, SEO tags, and scripts that are not visible page content.
Use this term when asking to change SEO title, description, canonical URL, or metadata.
<head><title>...</title></head>Update the metadata title for the HTML structure terms page.
文档结构
body
<body>Visible page</body>The document area that contains visible page content.
Most layout, header, menu, and tool edits happen inside the body.
<body>Visible page</body>Keep the body background consistent in light and dark mode.
文档结构
title
<title>Engineering Tools for AI</title>The page title shown in the browser tab and often used by search engines.
Use it when the visible H1 is fine but the browser or SEO title needs to change.
<title>Engineering Tools for AI</title>Make the browser title more specific without changing the visible page heading.
文档结构
meta
<meta name="description" content="...">Metadata tags that describe the page, viewport, encoding, or social preview information.
Meta descriptions affect previews and search snippets, not visible page text.
<meta name="description" content="...">Update the meta description to mention searchable HTML terms.
页面区域
header
<header>...</header>A semantic region for introductory or top navigation content.
Use header when targeting the site title, top navigation, theme button, language button, or menu button.
<header>...</header>Move the language switcher inside the header controls next to the menu button.
页面区域
nav
<nav>...</nav>A semantic region for major navigation links.
Use nav when editing category links, menu groups, or page navigation.
<nav>...</nav>Group the menu links inside nav by Converter, Math, and Programming.
页面区域
main
<main>...</main>The primary content area of a page. A page should generally have one main element.
Use main when distinguishing page content from the header, footer, or menu.
<main>...</main>Keep the floating menu above the main content without pushing it down.
页面区域
section
<section>...</section>A thematic grouping of related content, usually with a heading.
Use section when targeting a large page block, such as hero, tools, or reference content.
<section>...</section>Reduce the vertical padding of the tools section on mobile.
页面区域
article
<article>...</article>A self-contained content item, such as a card, post, reference entry, or result.
Use article when each repeated card has its own title and body.
<article>...</article>Make each term article more compact on desktop.
页面区域
aside
<aside>...</aside>A region for supporting content related to the main content, often a sidebar or note.
Use aside when asking for a filter panel, side navigation, or supporting note to move.
<aside>...</aside>Move the aside below the main content on mobile.
页面区域
footer
<footer>...</footer>A bottom region for legal links, secondary navigation, contact information, or closing content.
Use footer when targeting the page bottom rather than a section bottom.
<footer>...</footer>Add a small legal link group to the footer.
内容
Heading
<h1>Page title</h1>A heading element from h1 to h6 that gives structure to page content.
Use heading level when asking to change the hierarchy, not only the visual size.
Do not choose h1 or h2 only for size; use CSS for visual size and headings for document structure.
<h1>Page title</h1>Keep the page title as h1 and make card titles h2 or h3.
内容
p
<p>Description text.</p>A paragraph of text.
Use paragraph when changing descriptive body text or its spacing.
<p>Description text.</p>Shorten the paragraph under the hero title.
内容
a
<a href="/ko/tools/math-prompt">Start</a>A link element that navigates to another page, route, file, or location.
Use anchor or link when the element moves somewhere instead of performing an in-place action.
<a href="/ko/tools/math-prompt">Start</a>Change the Browse tools link so it scrolls to the tools section.
内容
List
<ul><li>Item</li></ul>A group of related items, either unordered with ul or ordered with ol.
Use list when asking to add, remove, reorder, or group repeated text items.
<ul><li>Item</li></ul>Group the menu items into category lists.
内容
table
<table><tr><td>Cell</td></tr></table>A structured grid of rows and cells for tabular data.
Use table when the content is true row-and-column data, not just a visual grid of cards.
<table><tr><td>Cell</td></tr></table>Use a table for truth table data instead of plain div blocks.
内容
code / pre
<pre><code>npm run build</code></pre>code marks code text. pre keeps line breaks and spacing for multi-line code.
Use code block when commands or examples must keep exact spacing.
<pre><code>npm run build</code></pre>Show terminal commands in a pre/code block.
内容
strong / em
<strong>Important</strong>Semantic emphasis elements. strong means importance; em means stress emphasis.
Use these for meaningful emphasis, not just decorative bold or italic styling.
<strong>Important</strong>Use strong for the warning phrase inside the note.
图片与媒体
img
<img src="/hero.png" alt="Tool preview">An element that displays an image file.
Use image when asking to replace, resize, crop, or add alternative text to visual media.
<img src="/hero.png" alt="Tool preview">Add a clear alt attribute to the hero image.
图片与媒体
alt
<img alt="Menu panel open">Text that describes an image for screen readers and when the image cannot load.
Use alt when asking to improve accessibility or image meaning.
Decorative images can use empty alt text, but meaningful images need a useful description.
<img alt="Menu panel open">Add alt text that explains what the screenshot shows.
图片与媒体
svg
<svg>...</svg>A vector graphic element often used for icons, diagrams, and scalable shapes.
Use SVG when the visual is a simple shape or icon that should remain crisp.
<svg>...</svg>Use an SVG icon for the menu button if there is no icon library available.
表单与控件
button
<button type="button">Menu</button>A control that performs an action when clicked or tapped.
Use button when the control changes UI state, opens a menu, submits a form, or runs an action.
For navigation, a link is usually better than a button.
<button type="button">Menu</button>Make the menu button close the language dropdown before opening the menu.
表单与控件
form
<form>...</form>A group of controls used to collect and submit user input.
Use form when inputs belong to one submission or one input workflow.
<form>...</form>Group the search input and category controls in one form-like control area.
表单与控件
label
<label for="search">Search</label>Text that names a form control.
Use label when an input needs visible or screen-reader-friendly naming.
<label for="search">Search</label>Add a label for the search input without cluttering the UI.
表单与控件
input
<input type="search" placeholder="Search">A field where the user types or chooses a value.
Use input when targeting search fields, text fields, numbers, checkboxes, or other simple controls.
<input type="search" placeholder="Search">Make the search input full width on mobile.
表单与控件
select
<select><option>English</option></select>A native dropdown control for choosing one option from a list.
Use select when the control is a native form dropdown, not a custom menu panel.
<select><option>English</option></select>Style the language select so the selected option is readable in dark mode.
表单与控件
textarea
<textarea>Long text</textarea>A multi-line text input.
Use textarea when users need to paste or edit longer text.
<textarea>Long text</textarea>Increase the textarea height for long prompt input.
属性
class
<button class="icon-button">...</button>An attribute used to group elements for styling or behavior.
Class is often the most practical way to target a repeated UI pattern.
<button class="icon-button">...</button>Apply the same class to all menu category toggle buttons.
属性
id
<section id="tools">...</section>A unique identifier for one element on a page.
Use id when a link needs to scroll to a specific section or a label must connect to one input.
The same id should not be reused for multiple elements on one page.
<section id="tools">...</section>Add an id to the tools section so the Browse tools link can scroll there.
属性
href
<a href="/ko/reference/html-structure-terms">HTML</a>The destination URL or fragment for a link.
Use href when a link points to the wrong page or section.
<a href="/ko/reference/html-structure-terms">HTML</a>Change the Programming menu href to the new HTML structure terms page.
属性
src
<img src="/images/example.png" alt="Example">The source file path for images, scripts, iframes, and similar media.
Use src when an image or script is missing, wrong, or should be replaced.
<img src="/images/example.png" alt="Example">Replace the image src with the new preview image path.
属性
data-*
<html data-theme="dark">Custom attributes used to store state or metadata on an element.
Use data attributes when styling depends on a state such as theme, open, closed, or selected.
<html data-theme="dark">Use data-theme on the html element to switch dark mode colors.
无障碍
role
<div role="menu">...</div>An accessibility attribute that describes what kind of UI object an element represents.
Use role when a custom component needs clear semantics, such as menu, dialog, tab, or alert.
Native semantic elements are usually better than adding role to a generic div.
<div role="menu">...</div>Give the custom language list an appropriate menu role.
无障碍
aria-label
<button aria-label="Toggle menu">...</button>A text label for assistive technologies when visible text is missing or insufficient.
Use aria-label for icon-only controls such as menu, search, close, or theme buttons.
<button aria-label="Toggle menu">...</button>Add an aria-label that clearly names the hamburger menu button.
无障碍
aria-expanded
<button aria-expanded="false">Menu</button>An accessibility attribute that tells whether a controlled panel is open or closed.
Use it for dropdown buttons, accordions, and menu toggles.
<button aria-expanded="false">Menu</button>Update aria-expanded when the menu category opens or closes.
层级与关系
Parent and child
<nav><a>Link</a></nav>A parent element contains child elements inside it.
Use this when the target depends on where it is located, such as links inside nav or buttons inside header.
<nav><a>Link</a></nav>Style only the links that are children of the header nav.
层级与关系
Sibling
<button /> <button />Elements that share the same parent are siblings.
Use sibling when spacing or interaction depends on neighboring items.
<button /> <button />Reduce the gap between sibling header buttons.
层级与关系
Nesting
<section><article><h2>Title</h2></article></section>The structure created when elements are placed inside other elements.
Use nesting when explaining exactly which inner element should change.
<section><article><h2>Title</h2></article></section>In each card, move the request example below the property chips.
层级与关系
Wrapper
<div class="container">...</div>An element used mainly to group, constrain, or position other elements.
Use wrapper when the layout needs a surrounding element rather than changes to each child.
<div class="container">...</div>Add a wrapper around the header controls so the dropdown can align to the right.
层级与关系
Container
<div class="container">Page content</div>A wrapper that keeps page content aligned and constrained to a readable width.
Use container when changing the overall content width or side padding.
<div class="container">Page content</div>Make the main content container slightly narrower on desktop.
层级与关系
Fragment
<>...</>A wrapper used in React to group elements without adding an extra DOM element.
Use fragment when grouping elements without affecting layout or CSS selectors.
<>...</>Use a fragment instead of adding an unnecessary wrapper div.
无障碍
Semantic HTML
<main><section><h1>...</h1></section></main>HTML that uses elements according to their meaning, not only their visual appearance.
Use semantic HTML when improving structure, accessibility, SEO, or maintainability.
<main><section><h1>...</h1></section></main>Use semantic HTML for the reference page sections instead of generic divs everywhere.
无障碍
Landmark
<header> <nav> <main> <footer>Important page regions that help assistive technology users navigate quickly.
Header, nav, main, aside, and footer can act as landmarks.
<header> <nav> <main> <footer>Keep one clear main landmark on each page.
无障碍
Accessible name
<button aria-label="Open menu">☰</button>The name assistive technology uses to announce a control.
Use accessible name when a control is visually clear but not named for screen readers.
<button aria-label="Open menu">☰</button>Give the theme toggle a clear accessible name in every locale.
无障碍
tabindex
<button tabindex="0">Action</button>An attribute that can affect keyboard focus order.
Use it carefully when custom controls are not reachable by keyboard.
Positive tabindex values can create confusing keyboard order. Native focus order is usually better.
<button tabindex="0">Action</button>Avoid positive tabindex values and keep keyboard order natural.