Programmation
Référence consultable pour tags, éléments, attributs, régions de page, formulaires et labels d'accessibilité.
51 résultats
Bases
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.
Bases
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.
Bases
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.
Bases
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.
Document
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.
Document
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.
Document
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.
Document
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.
Document
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.
Document
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.
Zones de page
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.
Zones de page
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.
Zones de page
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.
Zones de page
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.
Zones de page
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.
Zones de page
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.
Zones de page
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.
Contenu
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.
Contenu
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.
Contenu
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.
Contenu
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.
Contenu
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.
Contenu
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.
Contenu
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.
Média
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.
Média
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.
Média
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.
Formulaires et contrôles
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.
Formulaires et contrôles
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.
Formulaires et contrôles
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.
Formulaires et contrôles
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.
Formulaires et contrôles
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.
Formulaires et contrôles
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.
Attributs
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.
Attributs
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.
Attributs
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.
Attributs
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.
Attributs
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.
Accessibilité
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.
Accessibilité
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.
Accessibilité
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.
Relations
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.
Relations
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.
Relations
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.
Relations
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.
Relations
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.
Relations
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.
Accessibilité
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.
Accessibilité
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.
Accessibilité
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.
Accessibilité
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.