Программирование
Поиск терминов для тегов, элементов, атрибутов, областей страницы, форм и меток доступности.
51 результатов
Основы
Tag
<header>...</header>Ключевое слово разметки, заключенное в угловые скобки, которое сообщает браузеру, какой тип элемента создать.
Используйте имя тега, когда целевой элемент является общим типом элемента, например, каждая кнопка или каждая ссылка.
<header>...</header>Измените стиль всех тегов button, расположенных в заголовке.
Основы
Element
<button>Menu</button>Полный фрагмент HTML, обычно состоящий из открывающего тега, содержимого и закрывающего тега.
Используйте слово "элемент", когда имеете в виду одну видимую часть страницы, например, заголовок, карточку или кнопку.
<button>Menu</button>Переместите элемент переключателя языка рядом с кнопкой меню.
Основы
Attribute
<a href="/ko">Home</a>Дополнительная информация, записанная внутри тега открытия, такая как href, class, id, src или aria-label.
Атрибуты полезны, когда один и тот же тег встречается многократно, но только один из них имеет определенный класс, id или метку.
<a href="/ko">Home</a>Добавить атрибут aria-label к кнопке меню, содержащей только иконку.
Основы
Opening and closing tag
<section>Content</section>Многие элементы начинаются с открывающего тега и заканчиваются соответствующим закрывающим тегом.
Это помогает объяснить, где начинается и заканчивается раздел в разметке.
Отсутствующий закрывающий тег может привести к тому, что браузер будет рассматривать последующий контент как часть неправильного элемента.
<section>Content</section>Проверьте, что раздел карточек содержит соответствующие открывающие и закрывающие теги.
Документ
DOCTYPE
<!doctype html>Объявление, которое указывает браузеру отображать документ как современный HTML.
Обычно это обрабатывается фреймворком и редко редактируется во время работы с компонентами.
<!doctype 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 name="description" content="...">Метки метаданных, описывающие страницу, область просмотра, кодировку или информацию для предварительного просмотра в социальных сетях.
Мета-описания влияют на предварительные просмотры и фрагменты поиска, а не на видимый текст страницы.
<meta name="description" content="...">Обновляйте мета-описание, чтобы указать на искомые термины HTML.
Области страницы
header
<header>...</header>Семантическая область для вводного или верхнего навигационного контента.
Используйте `header`, когда вы нацелены на заголовок сайта, верхнюю навигацию, кнопку темы, кнопку языка или кнопку меню.
<header>...</header>Переместите элемент переключателя языка внутрь элементов управления заголовка рядом с кнопкой меню.
Области страницы
nav
<nav>...</nav>Семантическая область для основных ссылок навигации.
Используйте nav при редактировании ссылок на категории, групп меню или навигации по страницам.
<nav>...</nav>Группируйте ссылки меню внутри навигации по категориям: Converter, Math и Programming.
Области страницы
main
<main>...</main>Основная область содержимого страницы. Страница обычно должна иметь один основной элемент.
Используйте main для различения содержимого страницы от заголовка, подвала или меню.
<main>...</main>Оставляйте плавающее меню над основным контентом, не отодвигая его вниз.
Области страницы
section
<section>...</section>Тематическая группа связанных элементов контента, обычно с заголовком.
Используйте раздел, когда вы нацелены на большой блок страницы, например, заголовок, инструменты или справочный контент.
<section>...</section>Уменьшить вертикальный отступ раздела "Инструменты" на мобильных устройствах.
Области страницы
article
<article>...</article>Самодостаточный элемент контента, такой как карточка, публикация, запись ссылки или результат.
Используйте `article`, когда каждая повторяющаяся карточка имеет свой собственный заголовок и текст.
<article>...</article>Сделайте каждую статью термина более компактной на рабочем столе.
Области страницы
aside
<aside>...</aside>Область для вспомогательного контента, связанного с основным контентом, часто боковая панель или примечание.
Используйте `aside`, когда требуется панель фильтров, боковая навигация или вспомогательная заметка.
<aside>...</aside>Переместите боковую панель ниже основного содержимого на мобильных устройствах.
Области страницы
footer
<footer>...</footer>Нижний регион для юридических ссылок, вторичной навигации, контактной информации или закрытия контента.
Используйте `footer`, когда вы нацелены на нижнюю часть страницы, а не на нижнюю часть раздела.
<footer>...</footer>Добавить небольшую группу ссылок на юридическую информацию в подвал.
Контент
Heading
<h1>Page title</h1>Элемент заголовка от h1 до h6, который придает структуру содержимому страницы.
Используйте уровень заголовка, когда вы хотите изменить иерархию, а не только визуальный размер.
Не используйте теги h1 или h2 только для изменения размера; используйте CSS для визуального размера и заголовки для структуры документа.
<h1>Page title</h1>Оставляйте заголовок страницы как h1 и используйте h2 или h3 для заголовков карточек.
Контент
p
<p>Description text.</p>Абзац текста.
Используйте абзац при изменении описательного текста или его форматирования.
<p>Description text.</p>Сократите абзац под заголовком "hero".
Контент
a
<a href="/ko/tools/math-prompt">Start</a>Элемент ссылки, который переходит на другую страницу, маршрут, файл или местоположение.
Используйте якорь или ссылку, когда элемент перемещается в другое место, а не выполняет действие на месте.
<a href="/ko/tools/math-prompt">Start</a>Измените ссылку "Инструменты" так, чтобы она прокручивала страницу к разделу "Инструменты".
Контент
List
<ul><li>Item</li></ul>Группа связанных элементов, упорядоченных либо без порядка (ul), либо упорядоченных (ol).
Используйте список, когда требуется добавить, удалить, изменить порядок или сгруппировать повторяющиеся текстовые элементы.
<ul><li>Item</li></ul>Группируйте элементы меню в списки категорий.
Контент
table
<table><tr><td>Cell</td></tr></table>Структурированная сетка строк и ячеек для табличных данных.
Используйте таблицу, когда содержимое представляет собой данные в формате строк и столбцов, а не просто визуальную сетку карточек.
<table><tr><td>Cell</td></tr></table>Используйте таблицу для данных таблицы истинности вместо обычных блоков `div`.
Контент
code / pre
<pre><code>npm run build</code></pre>теги кода обозначают текст кода. `pre` сохраняет переносы строк и отступы для многострочного кода.
Используйте блок кода, когда команды или примеры должны сохранять точное форматирование.
<pre><code>npm run build</code></pre>Отображать команды терминала в блоке кода.
Контент
strong / em
<strong>Important</strong>Семантические элементы выделения. `strong` означает важность; `em` означает акцентированное выделение.
Используйте их для значительного выделения, а не просто для декоративного выделения полужирным или курсивом шрифтом.
<strong>Important</strong>Используйте слово "strong" для предупреждающего сообщения внутри заметки.
Медиа
img
<img src="/hero.png" alt="Tool preview">Элемент, отображающий файл изображения.
Используйте `image`, когда требуется заменить, изменить размер, обрезать или добавить альтернативный текст к визуальному контенту.
<img src="/hero.png" alt="Tool preview">Добавить четкий атрибут alt к изображению-заставке.
Медиа
alt
<img alt="Menu panel open">Текст, описывающий изображение для программ чтения с экрана и когда изображение не может быть загружено.
Используйте атрибут `alt`, когда требуется улучшить доступность или уточнить значение изображения.
Декоративные изображения могут использовать пустой атрибут alt, но для значимых изображений требуется полезное описание.
<img alt="Menu panel open">Добавить текст alt, который объясняет, что показывает скриншот.
Медиа
svg
<svg>...</svg>Графический элемент, часто используемый для значков, диаграмм и масштабируемых фигур.
Используйте SVG, когда визуальный элемент представляет собой простую форму или значок, который должен оставаться четким.
<svg>...</svg>Используйте SVG-иконку для кнопки меню, если нет доступной библиотеки иконок.
Формы и элементы
button
<button type="button">Menu</button>Элемент управления, который выполняет действие при нажатии или касании.
Используйте кнопку, когда элемент управления изменяет состояние UI, открывает меню, отправляет форму или выполняет действие.
Для навигации ссылка обычно лучше, чем кнопка.
<button type="button">Menu</button>Сделайте кнопку меню закрывающей выпадающее меню выбора языка перед открытием меню.
Формы и элементы
form
<form>...</form>Группа элементов управления, используемых для сбора и отправки пользовательского ввода.
Используйте `form`, когда поля ввода принадлежат к одной отправке или одному рабочему процессу ввода.
<form>...</form>Группируйте поле поиска и элементы управления категориями в одной области, похожей на форму.
Формы и элементы
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>Нативный выпадающий список для выбора одного варианта из списка.
Используйте элемент "select", когда элемент управления является нативным выпадающим списком формы, а не пользовательской панелью меню.
<select><option>English</option></select>Примените стиль к элементу выбора языка, чтобы выбранный вариант был читаемым в темном режиме.
Формы и элементы
textarea
<textarea>Long text</textarea>Многострочный текстовый ввод.
Используйте текстовое поле, когда пользователям необходимо вставлять или редактировать более длинный текст.
<textarea>Long text</textarea>Увеличьте высоту текстового поля для ввода длинных запросов.
Атрибуты
class
<button class="icon-button">...</button>Атрибут, используемый для группировки элементов для стилизации или поведения.
Класс часто является наиболее практичным способом применения повторяющегося элемента UI.
<button class="icon-button">...</button>Примените один и тот же класс ко всем кнопкам переключения категорий меню.
Атрибуты
id
<section id="tools">...</section>Уникальный идентификатор одного элемента на странице.
Используйте `id`, когда ссылка должна прокручивать определенный раздел, или метка должна быть связана с одним полем ввода.
Один и тот же идентификатор не должен использоваться повторно для нескольких элементов на одной странице.
<section id="tools">...</section>Добавьте идентификатор (id) к разделу "Инструменты", чтобы ссылка "Просмотр инструментов" могла прокручивать страницу до этого раздела.
Атрибуты
href
<a href="/ko/reference/html-structure-terms">HTML</a>URL-адрес назначения или фрагмент для ссылки.
Используйте `href`, когда ссылка ведет на неправильную страницу или раздел.
<a href="/ko/reference/html-structure-terms">HTML</a>Измените атрибут href элемента меню "Программирование" на новую страницу со структурой HTML.
Атрибуты
src
<img src="/images/example.png" alt="Example">Путь к исходному файлу для изображений, скриптов, iframes и аналогичных медиафайлов.
Используйте атрибут "src", когда изображение или скрипт отсутствует, недействителен или должен быть заменен.
<img src="/images/example.png" alt="Example">Заменить атрибут src изображения на новый путь к изображению-превью.
Атрибуты
data-*
<html data-theme="dark">Пользовательские атрибуты, используемые для хранения состояния или метаданных в элементе.
Используйте атрибуты данных, когда стиль зависит от состояния, такого как тема, открыто, закрыто или выбрано.
<html data-theme="dark">Используйте `data-theme` в элементе `html` для переключения цветов темного режима.
Доступность
role
<div role="menu">...</div>Атрибут доступности, который описывает, какой тип объекта UI представляет элемент.
Используйте атрибут "role", когда пользовательскому компоненту требуется четкая семантика, например, меню, диалоговое окно, вкладка или уведомление.
Нативные семантические элементы обычно лучше, чем добавление атрибута role к обычному элементу div.
<div role="menu">...</div>Назначьте списку пользовательских языков соответствующую роль в меню.
Доступность
aria-label
<button aria-label="Toggle menu">...</button>Текстовая метка для вспомогательных технологий, когда видимый текст отсутствует или недостаточен.
Используйте `aria-label` для элементов управления, состоящих только из иконок, таких как кнопки меню, поиска, закрытия или темы.
<button aria-label="Toggle menu">...</button>Добавьте атрибут aria-label, который четко определяет кнопку меню "гамбургер".
Доступность
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`.
Доступность
Semantic HTML
<main><section><h1>...</h1></section></main>HTML, использующий элементы в соответствии с их значением, а не только с их визуальным видом.
Используйте семантический HTML при улучшении структуры, доступности, SEO или удобства обслуживания.
<main><section><h1>...</h1></section></main>Используйте семантический HTML для разделов справочной страницы вместо общих div-элементов.
Доступность
Landmark
<header> <nav> <main> <footer>Важные области страницы, которые помогают пользователям вспомогательных технологий быстро ориентироваться.
Заголовок, навигация, основная часть, боковая панель и подвал могут служить ориентирами.
<header> <nav> <main> <footer>Оставляйте один четкий основной элемент на каждой странице.
Доступность
Accessible name
<button aria-label="Open menu">☰</button>Имя, которое вспомогательная технология использует для объявления элемента управления.
Используйте атрибут `accessible name`, когда элемент управления визуально понятен, но не имеет имени для программ чтения с экрана.
<button aria-label="Open menu">☰</button>Дайте переключателю темы понятное и доступное имя в каждой локали.
Доступность
tabindex
<button tabindex="0">Action</button>Атрибут, который может влиять на порядок фокуса клавиатуры.
Используйте это осторожно, когда пользовательские элементы управления недоступны с помощью клавиатуры.
Положительные значения tabindex могут создавать запутанный порядок навигации с клавиатуры. Нативная последовательность фокуса обычно лучше.
<button tabindex="0">Action</button>Избегайте положительных значений tabindex и сохраняйте естественный порядок навигации с помощью клавиатуры.