diff options
Diffstat (limited to 'files/pl/web/html')
| -rw-r--r-- | files/pl/web/html/element/heading_elements/index.html | 250 | ||||
| -rw-r--r-- | files/pl/web/html/element/input/button/index.html | 341 | ||||
| -rw-r--r-- | files/pl/web/html/element/meta/index.html | 144 | ||||
| -rw-r--r-- | files/pl/web/html/global_attributes/spellcheck/index.html | 64 |
4 files changed, 0 insertions, 799 deletions
diff --git a/files/pl/web/html/element/heading_elements/index.html b/files/pl/web/html/element/heading_elements/index.html deleted file mode 100644 index c3eafe6774..0000000000 --- a/files/pl/web/html/element/heading_elements/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: '<h1>–<h6>: The HTML Section Heading elements' -slug: Web/HTML/Element/Heading_Elements -translation_of: Web/HTML/Element/Heading_Elements ---- -<div>{{HTMLRef}}</div> - -<p id="Summary"><span class="seoSummary">Element języka <strong>HTML <code><h1></code>–<code><h6></code> </strong>reprezentuje sześć poziomów zawartości nagłówka. Zawartość nagłówka <code><h1></code> jest prezentowana największą czcionką, a nagłówków <code><h6></code> najmniejszą.</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> - -<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use a heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> - </tr> - <tr> - <th scope="row">Implicit ARIA role</th> - <td><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}} or {{ARIARole("none")}}</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLHeadingElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>These elements only include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<div class="note"> -<p>The <code>align</code> attribute is obsolete; don't use it.</p> -</div> - -<h2 id="Usage_notes">Usage notes</h2> - -<ul> - <li>Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.</li> - <li>Avoid using heading tags to resize text. Instead, use the {{glossary("CSS")}} {{cssxref("font-size")}} property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.</li> - <li>Avoid skipping heading levels: always start from <code><h1></code>, next use <code><h2></code> and so on.</li> - <li>You should only use one <code><h1></code> per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense — <code><h1></code> is the most important heading, and tells you what the purpose of the overall page is. You wouldn't have a book with more than one title, or a movie with more than one name! Having a single top-level title is also arguably better for screenreader users, and {{glossary("SEO")}}.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="All_headings">All headings</h3> - -<p>The following code shows all the heading levels, in use.</p> - -<pre class="brush: html notranslate"><h1>Heading level 1</h1> -<h2>Heading level 2</h2> -<h3>Heading level 3</h3> -<h4>Heading level 4</h4> -<h5>Heading level 5</h5> -<h6>Heading level 6</h6> -</pre> - -<p>Here is the result of this code:</p> - -<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> - -<h3 id="Example_page">Example page</h3> - -<p>The following code shows a few headings with some content under them.</p> - -<pre class="brush: html notranslate"><h1>Heading elements</h1> -<h2>Summary</h2> -<p>Some text here...</p> - -<h2>Examples</h2> -<h3>Example 1</h3> -<p>Some text here...</p> - -<h3>Example 2</h3> -<p>Some text here...</p> - -<h2>See also</h2> -<p>Some text here...</p> -</pre> - -<p>Here is the result of this code:</p> - -<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<h3 id="Navigation">Navigation</h3> - -<p>A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> - -<h4 id="Dont">Don't</h4> - -<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> -<h3>Heading level 3</h3> -<h4>Heading level 4</h4> -</pre> - -<h4 id="Do">Do</h4> - -<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> -<h2>Heading level 2</h2> -<h3>Heading level 3</h3> -</pre> - -<h4 id="Nesting">Nesting</h4> - -<p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> - -<ol> - <li><code>h1</code> Beetles - - <ol> - <li><code>h2</code> Etymology</li> - <li><code>h2</code> Distribution and Diversity</li> - <li><code>h2</code> Evolution - <ol> - <li><code>h3</code> Late Paleozoic</li> - <li><code>h3</code> Jurassic</li> - <li><code>h3</code> Cretaceous</li> - <li><code>h3</code> Cenozoic</li> - </ol> - </li> - <li><code>h2</code> External Morphology - <ol> - <li><code>h3</code> Head - <ol> - <li><code>h4</code> Mouthparts</li> - </ol> - </li> - <li><code>h3</code> Thorax - <ol> - <li><code>h4</code> Prothorax</li> - <li><code>h4</code> Pterothorax</li> - </ol> - </li> - <li><code>h3</code> Legs</li> - <li><code>h3</code> Wings</li> - <li><code>h3</code> Abdomen</li> - </ol> - </li> - </ol> - </li> -</ol> - -<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> - -<ul> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h3 id="Labeling_section_content">Labeling section content</h3> - -<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> - -<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> - -<h4 id="Example">Example</h4> - -<pre class="brush: html notranslate"><header> - <nav aria-labelledby="primary-navigation"> - <h2 id="primary-navigation">Primary navigation</h2> - <!-- navigation items --> - </nav> -</header> - -<!-- page content --> - -<footer> - <nav aria-labelledby="footer-navigation"> - <h2 id="footer-navigation">Footer navigation</h2> - <!-- navigation items --> - </nav> -</footer> -</pre> - -<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.h1")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTMLElement("p")}}</li> - <li>{{HTMLElement("div")}}</li> - <li>{{HTMLElement("section")}}</li> -</ul> diff --git a/files/pl/web/html/element/input/button/index.html b/files/pl/web/html/element/input/button/index.html deleted file mode 100644 index 8c97a75321..0000000000 --- a/files/pl/web/html/element/input/button/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: <input type="button"> -slug: Web/HTML/Element/Input/button -translation_of: Web/HTML/Element/input/button ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <strong><code>button</code></strong> are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the {{event("click")}} event).</span></p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> - - - -<div class="note"> -<p><strong>Note</strong>: While <code><input></code> elements of type <code>button</code> are still perfectly valid HTML, the newer {{HTMLElement("button")}} element is now the favored way to create buttons. Given that a {{HTMLElement("button")}}’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value")}}</strong></td> - <td>A {{domxref("DOMString")}} used as the button's label</td> - </tr> - <tr> - <td><strong>Events</strong></td> - <td>{{event("click")}}</td> - </tr> - <tr> - <td><strong>Supported common attributes</strong></td> - <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> - </tr> - <tr> - <td><strong>IDL attributes</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Methods</strong></td> - <td>None</td> - </tr> - </tbody> -</table> - -<h2 id="Value">Value</h2> - -<p>An <code><input type="button"></code> elements' {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that is used as the button's label.</p> - -<div id="summary-example3"> -<pre class="brush: html notranslate"><input type="button" value="Click Me"></pre> -</div> - -<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> - -<p>If you don't specify a <code>value</code>, you get an empty button:</p> - -<div id="summary-example1"> -<pre class="brush: html notranslate"><input type="button"></pre> -</div> - -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> - -<h2 id="Using_buttons">Using buttons</h2> - -<p><code><input type="button"></code> elements have no default behavior (their cousins,<code> <a href="/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.</p> - -<h3 id="A_simple_button">A simple button</h3> - -<p>We'll begin by creating a simple button with a {{event("click")}} event handler that starts our machine (well, it toggles the <code>value</code> of the button and the text content of the following paragraph):</p> - -<pre class="brush: html notranslate"><form> - <input type="button" value="Start machine"> -</form> -<p>The machine is stopped.</p></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const paragraph = document.querySelector('p'); - -button.addEventListener('click', updateButton); - -function updateButton() { - if (button.value === 'Start machine') { - button.value = 'Stop machine'; - paragraph.textContent = 'The machine has started!'; - } else { - button.value = 'Start machine'; - paragraph.textContent = 'The machine is stopped.'; - } -}</pre> - -<p>The script gets a reference to the {{domxref("HTMLInputElement")}} object representing the <code><input></code> in the DOM, saving this refence in the variable <code>button</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} is then used to establish a function that will be run when {{event("click")}} events occur on the button.</p> - -<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> - -<h3 id="Adding_keyboard_shortcuts_to_buttons">Adding keyboard shortcuts to buttons</h3> - -<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> - -<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p> - -<div id="accesskey-example1"> -<pre class="brush: html notranslate"><form> - <input type="button" value="Start machine" accesskey="s"> -</form> -<p>The machine is stopped.</p> -</pre> -</div> - -<div class="hidden"> -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const paragraph = document.querySelector('p'); - -button.addEventListener('click', updateButton); - -function updateButton() { - if (button.value === 'Start machine') { - button.value = 'Stop machine'; - paragraph.textContent = 'The machine has started!'; - } else { - button.value = 'Start machine'; - paragraph.textContent = 'The machine is stopped.'; - } -}</pre> -</div> - -<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> - -<div class="note"> -<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p> -</div> - -<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3> - -<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> - -<div id="disable-example1"> -<pre class="brush: html notranslate"><input type="button" value="Disable me" disabled></pre> -</div> - -<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p> - -<div class="hidden"> -<h6 id="Hidden_code_1">Hidden code 1</h6> - -<pre class="brush: html notranslate"><input type="button" value="Enabled"></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); - -button.addEventListener('click', disableButton); - -function disableButton() { - button.disabled = true; - button.value = 'Disabled'; - window.setTimeout(function() { - button.disabled = false; - button.value = 'Enabled'; - }, 2000); -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> - -<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p> - -<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> - -<div class="hidden"> -<h6 id="Hidden_code_2">Hidden code 2</h6> - -<pre class="brush: html notranslate"><fieldset> - <legend>Button group</legend> - <input type="button" value="Button 1"> - <input type="button" value="Button 2"> - <input type="button" value="Button 3"> -</fieldset></pre> - -<pre class="brush: js notranslate">const button = document.querySelector('input'); -const fieldset = document.querySelector('fieldset'); - -button.addEventListener('click', disableButton); - -function disableButton() { - fieldset.disabled = true; - window.setTimeout(function() { - fieldset.disabled = false; - }, 2000); -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> - -<div class="note"> -<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> -</div> - -<h2 id="Validation">Validation</h2> - -<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p> - -<h2 id="Examples">Examples</h2> - -<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> - -<pre class="brush: html notranslate"><div class="toolbar"> - <input type="color" aria-label="select pen color"> - <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> - <input type="button" value="Clear canvas"> -</div> - -<canvas class="myCanvas"> - <p>Add suitable fallback here.</p> -</canvas></pre> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - background: #ccc; - margin: 0; - overflow: hidden; -} - -.toolbar { - background: #ccc; - width: 150px; - height: 75px; - padding: 5px; -} - -input[type="color"], input[type="button"] { - width: 90%; - margin: 0 auto; - display: block; -} - -input[type="range"] { - width: 70%; -} - -span { - position: relative; - bottom: 5px; -}</pre> -</div> - -<pre class="brush: js notranslate">var canvas = document.querySelector('.myCanvas'); -var width = canvas.width = window.innerWidth; -var height = canvas.height = window.innerHeight-85; -var ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'rgb(0,0,0)'; -ctx.fillRect(0,0,width,height); - -var colorPicker = document.querySelector('input[type="color"]'); -var sizePicker = document.querySelector('input[type="range"]'); -var output = document.querySelector('.output'); -var clearBtn = document.querySelector('input[type="button"]'); - -// covert degrees to radians -function degToRad(degrees) { - return degrees * Math.PI / 180; -}; - -// update sizepicker output value - -sizePicker.oninput = function() { - output.textContent = sizePicker.value; -} - -// store mouse pointer coordinates, and whether the button is pressed -var curX; -var curY; -var pressed = false; - -// update mouse pointer coordinates -document.onmousemove = function(e) { - curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); - curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); -} - -canvas.onmousedown = function() { - pressed = true; -}; - -canvas.onmouseup = function() { - pressed = false; -} - -clearBtn.onclick = function() { - ctx.fillStyle = 'rgb(0,0,0)'; - ctx.fillRect(0,0,width,height); -} - -function draw() { - if(pressed) { - ctx.fillStyle = colorPicker.value; - ctx.beginPath(); - ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); - ctx.fill(); - } - - requestAnimationFrame(draw); -} - -draw();</pre> - -<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.elements.input.input-button")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> - <li>The more modern {{HTMLElement("button")}} element.</li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> -</ul> diff --git a/files/pl/web/html/element/meta/index.html b/files/pl/web/html/element/meta/index.html deleted file mode 100644 index 8fbc0241f3..0000000000 --- a/files/pl/web/html/element/meta/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: '<meta>: Element metadanych na poziomie dokumentów' -slug: Web/HTML/Element/meta -translation_of: Web/HTML/Element/meta ---- -<div>{{HTMLRef}}</div> - -<p><strong>Element HTML <code><meta></code></strong> reprezentuje {{Glossary("Metadata","metadane")}}, które nie mogą być reprezentowane przez inne elementy związane z metadanymi w HTML, takie jak {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} lub {{HTMLElement("title")}}.</p> - -<table class="properties"> - <tbody> - <tr> - <th><a href="/pl/docs/Web/Guide/HTML/Content_categories">Kategorie treści</a></th> - <td>Metadata content. If the {{htmlattrxref("itemprop")}} attribute is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th>Dozwolona zawartość</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th>Pominięcie znacznika</th> - <td>As it is a void element, the start tag must be present and the end tag must not be present.</td> - </tr> - <tr> - <th>Dozwoleni rodzice</th> - <td><code><meta charset></code>, <code><meta http-equiv></code>: a {{HTMLElement("head")}} element. If the {{htmlattrxref("http-equiv", "meta")}} is not an encoding declaration, it can also be inside a {{HTMLElement("noscript")}} element, itself inside a {{HTMLElement("head")}} element.</td> - </tr> - <tr> - <th scope="row">Domniemane role ARIA</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> - </tr> - <tr> - <th scope="row">Dozwolone role ARIA</th> - <td>No <code>role</code> permitted</td> - </tr> - <tr> - <th>Interfejs DOM</th> - <td>{{domxref("HTMLMetaElement")}}</td> - </tr> - </tbody> -</table> - -<p>The type of metadata provided by the <code>meta</code> element can be one of the following:</p> - -<ul> - <li>If the {{htmlattrxref("name", "meta")}} attribute is set, the <code>meta</code> element provides <em>document-level metadata</em>, applying to the whole page.</li> - <li>If the {{htmlattrxref("http-equiv", "meta")}} attribute is set, the <code>meta</code> element is a <em>pragma directive</em>, providing information equivalent to what can be given by a similarly-named HTTP header.</li> - <li>If the {{htmlattrxref("charset", "meta")}} attribute is set, the <code>meta</code> element is a <em>charset declaration</em>, giving the character encoding in which the document is encoded.</li> - <li>If the {{htmlattrxref("itemprop")}} attribute is set, the <code>meta</code> element provides <em>user-defined metadata</em>.</li> -</ul> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<div class="note"> -<p><strong>Note:</strong> the attribute {{htmlattrxref("name", "meta")}} has a specific meaning for the <code><meta></code> element, and the {{htmlattrxref("itemprop")}} attribute must not be set on the same <code><meta></code> element that has any existing {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} attributes.</p> -</div> - -<dl> - <dt>{{htmlattrdef("charset")}}</dt> - <dd>This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "<code>utf-8</code>".</dd> - <dt>{{htmlattrdef("content")}}</dt> - <dd>This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.</dd> - <dt>{{htmlattrdef("http-equiv")}}</dt> - <dd> - <p>Defines a pragma directive. The attribute is named <code><strong>http-equiv</strong>(alent)</code> because all the allowed values are names of particular HTTP headers:</p> - - <ul> - <li><code>content-security-policy</code> - - <p>Allows page authors to define a <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.</p> - </li> - <li><code>content-type</code> - <p>If specified, the <code>content</code> attribute must have the value "<code>text/html; charset=utf-8</code>". <strong>Note: </strong> Can only be used in documents served with a <code>text/html</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> — not in documents served with an XML MIME type.</p> - </li> - <li><code>default-style</code> - <p>Sets the name of the default <a href="/en-US/docs/Web/CSS">CSS style sheet</a> set.</p> - </li> - <li><code>x-ua-compatible</code> - <p>If specified, the <code>content</code> attribute must have the value "<code>IE=edge</code>". User agents are required to ignore this pragma.</p> - </li> - <li><code>refresh</code> - <div>This instruction specifies:</div> - - <ul> - <li>The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.</li> - <li>The number of seconds until the page should redirect to another - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer followed by the string '<code>;url=</code>', and a valid URL.</li> - </ul> - - <h5 id="Accessibility_concerns">Accessibility concerns</h5> - - <div>Pages set with a <code>refresh</code> value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.</div> - - <ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> - </ul> - </li> - </ul> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd> - <p>The <code>name</code> and <code>content</code> attributes can be used together to provide document metadata in terms of name-value pairs, with the <code>name</code> attribute giving the metadata name, and the <code>content</code> attribute giving the value.</p> - - <p>See <a href="/en-US/docs/Web/HTML/Element/meta/name">standard metadata names</a> for details about the set of standard metadata names defined in the HTML specification.</p> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: html notranslate"><meta charset="utf-8"> - -<!-- Redirect page after 3 seconds --> -<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/pl/web/html/global_attributes/spellcheck/index.html b/files/pl/web/html/global_attributes/spellcheck/index.html deleted file mode 100644 index a0b6c48785..0000000000 --- a/files/pl/web/html/global_attributes/spellcheck/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: sprawdzanie pisowni -slug: Web/HTML/Global_attributes/spellcheck -translation_of: Web/HTML/Global_attributes/spellcheck -original_slug: Web/HTML/Global_attributes/pisownia ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p>The <code><strong>spellcheck</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> is an enumerated attribute defines whether the element may be checked for spelling errors.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> - -<p>It may have the following values:</p> - -<ul> - <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> - <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> The <code>spellcheck</code> attribute is an <em>enumerated</em> one and not a <em>Boolean</em> one. This means that the explicit usage of one of the values <code>true</code> or <code>false</code> is mandatory, and that a shorthand like <code><textarea spellcheck></textarea> </code>is not allowed. The correct usage is <code><textarea spellcheck="true"></textarea></code>.</p> -</div> - -<p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <em>inherited</em>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <code>true</code>.</p> - -<p>This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <code>spellcheck</code> attribute is set to <code>true</code> and the browser supports spellchecking.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.global_attributes.spellcheck")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> -</ul> |