प्रोग्रामिंग
टैग, तत्व, विशेषताओं, पृष्ठ क्षेत्रों, फ़ॉर्म नियंत्रणों और अभिगम्यता लेबलों के लिए खोज योग्य संदर्भ।
51 परिणाम
मूल बातें
Tag
<header>...</header>एक मार्कअप कीवर्ड जो कोण ब्रैकेट में लपेटा गया है और जो ब्राउज़र को बताता है कि किस प्रकार का तत्व बनाना है।
"tag name" का उपयोग करें जब लक्ष्य एक व्यापक तत्व प्रकार हो, जैसे कि प्रत्येक बटन या प्रत्येक लिंक।
<header>...</header>हेडर के अंदर सभी बटन टैग की शैली बदलें।
मूल बातें
Element
<button>Menu</button>HTML का एक पूर्ण टुकड़ा, जो आमतौर पर एक स्टार्ट टैग, सामग्री और एक एंड टैग से बना होता है।
"तत्व" शब्द का उपयोग तब करें जब आप पृष्ठ के एक दृश्य भाग का उल्लेख कर रहे हों, जैसे कि एक शीर्षक, कार्ड या बटन।
<button>Menu</button>मेनू बटन के बगल में भाषा स्विचर तत्व को ले जाएं।
मूल बातें
Attribute
<a href="/ko">Home</a>अतिरिक्त जानकारी जो एक शुरुआती टैग के अंदर लिखी गई है, जैसे कि href, class, id, src, या aria-label।
विशेषताएँ उपयोगी होती हैं जब एक ही टैग कई बार दिखाई देता है लेकिन केवल एक में एक विशिष्ट क्लास, आईडी या लेबल होता है।
<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 शीर्षक, विवरण, canonical 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>कन्वर्टर, गणित और प्रोग्रामिंग द्वारा नेव के अंदर मेनू लिंक को समूहित करें।
पेज क्षेत्र
main
<main>...</main>पृष्ठ का प्राथमिक सामग्री क्षेत्र। एक पृष्ठ में आम तौर पर एक मुख्य तत्व होना चाहिए।
पृष्ठ सामग्री को हेडर, फ़ुटर या मेनू से अलग करते समय "main" का उपयोग करें।
<main>...</main>फ़्लोटिंग मेनू को मुख्य सामग्री के ऊपर रखें, इसे नीचे न धकेलें।
पेज क्षेत्र
section
<section>...</section>संबंधित सामग्री का एक विषयगत समूह, आमतौर पर एक शीर्षक के साथ।
"section" का उपयोग करें जब आप एक बड़े पृष्ठ ब्लॉक को लक्षित कर रहे हों, जैसे कि हीरो, टूल या संदर्भ सामग्री।
<section>...</section>मोबाइल पर टूल सेक्शन के लंबवत पैडिंग को कम करें।
पेज क्षेत्र
article
<article>...</article>एक आत्मनिर्भर सामग्री आइटम, जैसे कि एक कार्ड, पोस्ट, संदर्भ प्रविष्टि, या परिणाम।
जब प्रत्येक दोहराए गए कार्ड का अपना शीर्षक और बॉडी हो तो लेख का उपयोग करें।
<article>...</article>प्रत्येक शब्द लेख को डेस्कटॉप पर अधिक संक्षिप्त बनाएं।
पेज क्षेत्र
aside
<aside>...</aside>मुख्य सामग्री से संबंधित सहायक सामग्री के लिए एक क्षेत्र, अक्सर एक साइडबार या नोट।
जब फ़िल्टर पैनल, साइड नेविगेशन या सहायक नोट को स्थानांतरित करने के लिए कहा जाए तो aside का उपयोग करें।
<aside>...</aside>मुख्य सामग्री के नीचे "असाइड" को मोबाइल पर ले जाएं।
पेज क्षेत्र
footer
<footer>...</footer>कानूनी लिंक, द्वितीयक नेविगेशन, संपर्क जानकारी या समापन सामग्री के लिए एक निचला क्षेत्र।
पृष्ठ के निचले भाग को लक्षित करते समय `footer` का उपयोग करें, न कि किसी अनुभाग के निचले भाग को।
<footer>...</footer>फ़ुटर में एक छोटा कानूनी लिंक समूह जोड़ें।
सामग्री
Heading
<h1>Page title</h1>एक हेडिंग तत्व h1 से h6 तक जो पृष्ठ सामग्री को संरचित करता है।
`heading level` का उपयोग करें जब पदानुक्रम को बदलने का अनुरोध किया जाए, न कि केवल दृश्य आकार को।
आकार के लिए केवल 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>"ब्राउज़" टूल लिंक को बदलें ताकि यह टूल सेक्शन पर स्क्रॉल करे।
सामग्री
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>कोड कोड टेक्स्ट को चिह्नित करता है। `pre` लाइन ब्रेक और मल्टी-लाइन कोड के लिए स्पेसिंग को बनाए रखता है।
जब कमांड या उदाहरणों को सटीक रिक्ति बनाए रखने की आवश्यकता होती है तो कोड ब्लॉक का उपयोग करें।
<pre><code>npm run build</code></pre>टर्मिनल कमांड को एक प्री/कोड ब्लॉक में दिखाएं।
सामग्री
strong / em
<strong>Important</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 का उपयोग करें।
सजावटी छवियों में खाली ऑल्ट टेक्स्ट का उपयोग किया जा सकता है, लेकिन सार्थक छवियों को एक उपयोगी विवरण की आवश्यकता होती है।
<img alt="Menu panel open">वह पाठ जोड़ें जो बताता है कि स्क्रीनशॉट में क्या दिखाया गया है।
मीडिया
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 का उपयोग करें जब उपयोगकर्ताओं को लंबे टेक्स्ट को पेस्ट करने या संपादित करने की आवश्यकता होती है।
<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>टूल सेक्शन में एक आईडी जोड़ें ताकि "ब्राउज़ टूल" लिंक वहां तक स्क्रॉल कर सके।
एट्रिब्यूट
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">छवियों, स्क्रिप्ट, 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 में भूमिका जोड़ने से बेहतर होते हैं।
<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 के अंदर लिंक या हेडर के अंदर बटन।
<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>एक तत्व जिसका उपयोग मुख्य रूप से अन्य तत्वों को समूहीकृत करने, प्रतिबंधित करने या स्थिति में लाने के लिए किया जाता है।
रैपर का उपयोग करें जब लेआउट को प्रत्येक चाइल्ड में परिवर्तन करने के बजाय एक बाहरी तत्व की आवश्यकता होती है।
<div class="container">...</div>ड्रॉपडाउन को दाईं ओर संरेखित करने के लिए हेडर नियंत्रणों के चारों ओर एक रैपर जोड़ें।
संबंध
Container
<div class="container">Page content</div>एक रैपर जो पृष्ठ सामग्री को संरेखित रखता है और इसे पठनीय चौड़ाई तक सीमित करता है।
जब समग्र सामग्री चौड़ाई या साइड पैडिंग बदलने हो तो कंटेनर का उपयोग करें।
<div class="container">Page content</div>मुख्य सामग्री कंटेनर को डेस्कटॉप पर थोड़ा संकरा बनाएं।
संबंध
Fragment
<>...</>एक रैपर जिसका उपयोग React में तत्वों को समूहीकृत करने के लिए किया जाता है बिना कोई अतिरिक्त DOM तत्व जोड़े।
`fragment` का उपयोग करें जब तत्वों को लेआउट या CSS चयनकर्ताओं को प्रभावित किए बिना समूहीकृत किया जाए।
<>...</>एक अनावश्यक रैपर div जोड़ने के बजाय एक टुकड़े का उपयोग करें।
सुलभता
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> <footer>प्रत्येक पृष्ठ पर एक स्पष्ट मुख्य लैंडमार्क रखें।
सुलभता
Accessible name
<button aria-label="Open menu">☰</button>वह नाम जिसका उपयोग सहायक तकनीक किसी नियंत्रण को घोषित करने के लिए करती है।
जब कोई नियंत्रण नेत्रहीन रूप से स्पष्ट हो लेकिन स्क्रीन रीडर के लिए नामित न हो तो सुलभ नाम का उपयोग करें।
<button aria-label="Open menu">☰</button>प्रत्येक स्थानीयकरण में थीम टॉगल को एक स्पष्ट, सुलभ नाम दें।
सुलभता
tabindex
<button tabindex="0">Action</button>एक विशेषता जो कीबोर्ड फोकस क्रम को प्रभावित कर सकती है।
इसका उपयोग सावधानी से करें जब कस्टम नियंत्रण कीबोर्ड द्वारा दुर्गम न हों।
सकारात्मक टैबइंडेक्स मान भ्रमित करने वाले कीबोर्ड क्रम बना सकते हैं। देशी फोकस क्रम आमतौर पर बेहतर होता है।
<button tabindex="0">Action</button>सकारात्मक tabindex मानों से बचें और कीबोर्ड क्रम को प्राकृतिक रखें।