HTML attributes. How to use HTML5 data attributes Global html attributes

Specifies the direction and display of text - left to right or right to left. Browsers usually recognize the direction of text when it's Unicode, but you can use the dir attribute to specify which direction to display text in. Arabic and Hebrew characters take precedence over the Unicode direction, so the dir attribute will not affect them.

draggable

Allows you to drag an element to further manipulate it.

drop zone

Specifies what to do with the dragged element.

Hides the element's content from view. Such an element is not displayed on the page, but is available through scripts.

Sets an identifier - a unique element name that is used to change its style and refer to it through scripts. The identifier in the document code must be in a single copy, in other words, it must occur only once.

itemid, itemprop, itemref, itemscope, itemtype

An attribute group designed to work with microdata.

The text of the document can be typed both in one language and contain inserts in other languages, which may differ in their text formatting rules. For example, Russian, German and English are characterized by different quotes, in which the quote is taken. To specify the language in which the text inside the current element is written and the lang attribute is applied. The browser uses its value to display certain characters correctly.

Tells the browser whether or not to check spelling and grammar in text. Although the attribute can be set on almost all elements, the result will be noticeable only for form fields ( , ), as well as editable elements (they have the contenteditable attribute set).</p> <h3></h3> <p>Used to style an element using CSS rules.</p> <h3></h3> <p>The tabindex attribute sets the order in which focus is obtained when navigating between elements using the Tab key. The transition occurs from a smaller value to a larger one, for example from 1 to 2, then to 3, and so on. In this case, the strict sequence is not important, it is allowed to skip some numbers and start with any number. If the tabindex values ​​of the elements are the same, then their order of appearance in the code is taken into account.</p> <h3></h3> <p>Creates a text tooltip that appears when you hover over an element. The appearance of such a hint depends on the browser, settings <a href="https://mdou3kursk.ru/en/os/chto-takoe-windows-phone-luchshie-smartfony-na-windows-mobile-operacionnaya-sistema-vindovs/">operating system</a> and cannot be changed with HTML code or styles.</p> <p><i><b>From the author:</b> no doubt you interact with at least one form on the Web every day. Whether you're doing content research or logging into your Facebook page, using online forms is one of the most common tasks on the web. For designers and developers, creating forms is somewhat monotonous, especially writing data validation scripts for them. HTML5 introduces many new attributes, input types, and other markup tooling elements.</i></p> <p>In this article, we'll focus on learning about the new attributes, and in the next article, we'll look at input types.</p> <p>It will become clear that the new features will make our lives much easier when impressing users. What is the most attractive thing here? You can apply them now. We'll start with a very brief history of HTML5 forms.</p> <p>This article is an excerpt from Chapter 6 of Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian published by Apress.</p> <p>Note: Since this article is an excerpt from a book, the browser's handling of attributes and input types may have changed since the screenshots were taken. Also, browser support may have expanded since publication, so please refer to the links at the end of this article for its current status.</p> <h3>History of HTML5 Forms</h3> <p>The form section in HTML5 was originally a specification called Web Forms 2.0, which added new types of form management tools. Started at Opera and edited by then-Opera employee Ian Hickson, it was approved by the W3C in early 2005. The work was originally carried out by the W3C. It was then merged with the Web Applications 1.0 specification to form the basis of the HTML5 specification of the breakaway Web Hypertext Application Technology Working Group (WHATWG).</p> <h3>Applying HTML5 Design Principles</h3> <p>One of the best things about HTML5 forms is that almost all of the new input types and attributes can be applied right away. They do not require any additional chips, hacks and other patches. It's not that they're all "supported" already, but in modern browsers that do support them, they can do cool things - and degrade nicely in browsers that don't understand them. All this is due to the design principles of HTML5. AT <a href="https://mdou3kursk.ru/en/printers/kak-sdelat-ekvivalent-lampy-podsvetki-televizora-remont-led/">this case</a> we specifically refer to the principle of beautiful degradation. In general, it is unforgivable not to immediately start using these functions. In fact, this will mean that you are ahead of the rest.</p> <h3>HTML5 form attributes</h3> <p>In this article, we will look at the following 14 new attributes.</p> <h3>placeholder</h3> <p>The first is the placeholder attribute, which allows us to set the placeholder text, which until recently was done in HTML4 with the value attribute. It can only be used for short descriptions. For longer ones, use the title attribute. The difference with HTML4 is that the text is shown only when the field is empty and not in focus. As soon as the field comes into focus (for example, when you click or point to the field) and you start typing, the text simply disappears. Very similar to the search box in Safari.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2013/23/1.jpg' align="center" height="80" width="374" loading=lazy loading=lazy></p> <p>Let's see how to implement the placeholder attribute.</p> <p><input type="text" name="user-name" id="user-name" placeholder="at least 3 characters"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" name = "user-name" id = "user-name" placeholder = "at least 3 characters" > </p> </td> </tr></table><p>Like this! I can hear you thinking, “What's so special about him? I've been doing this in JavaScript all my life." Yes, that's right. However, with HTML5 it becomes part of the browser, meaning less scripting is required to achieve a more accessible cross-browser solution (even with JavaScript disabled). The figure shows how the placeholder text attribute works in Chrome.</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2013/23/2.jpg' height="89" width="250" loading=lazy loading=lazy></p> <p>Browsers that don't support the placeholder attribute will ignore it, so it won't execute. However, by enabling it, you improve the experience of those users whose browsers support it, and also guarantee your site's prospects. All modern browsers support placeholder text.</p> <h3>autofocus</h3> <p>Autofocus does exactly what it means. Adding it to input will automatically focus the field when the page is rendered. As with placeholders, we've used JavaScript for autofocus in the past.</p> <p>However, traditional JavaScript methods have serious usability issues. For example, if the user starts filling out a form before the script is fully loaded, they will be (uncomfortably) returned to the first field of the form after loading. The autofocus attribute in HTML5 gets around this problem by focusing as the document loads, without having to wait for JavaScript to load. However, we recommend using it to prevent usability issues only for pages whose sole purpose is a form (like Google's).</p> <p>This is a boolean attribute (except when you are writing XHTML5; see note) and is executed like this:</p> <p><input type="text" name="first-name" id="first-name" autofocus></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" name = "first-name" id = "first-name" autofocus > </p> </td> </tr></table><p>It is supported by all modern browsers and, as a placeholder, non-autofocus browsers simply ignore it.</p> <p>Note: Some of the new HTML5 form attributes are boolean. It simply means that they are installed if present and not installed if not present. In HTML5, they can be written in several different ways.</p> <p>autofocus autofocus="" autofocus="autofocus"</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>autofocus</p><p>autofocus=""</p><p>autofocus="autofocus"</p> </td> </tr></table><p>However, when writing XHTML5, you should use the autofocus="autofocus" style.</p> <h3>autocomplete</h3> <p>The autocomplete attribute helps users complete forms based on previous input. The attribute has been around since IE5.5, but has finally been standardized as part of HTML5. It is active by default. This means that basically we won't have to use it. However, if you want to insist on typing into the form field every time it is filled out (as opposed to the browser autocompleting the field), then do it like this:</p> <p><input type="text" name="tracking-code" id="tracking-code" autocomplete="off"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" > </p> </td> </tr></table><p>The autocomplete state of a field overrides any autocomplete state set on the containing form element.</p> <h3>required</h3> <p>The required attribute does not require a representation; like autofocus, it does exactly what you expect it to do. When added to a form field, the browser requires the user to enter data in that field before submitting the form. It replaces the basic form validation currently done with JavaScript, making everything more convenient and saving us some more development time. required is a boolean attribute, just like autofocus. Let's see it in action.</p> <p><input type="text" id="given-name" name="given-name" required></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< input type = "text" id = "given-name" name = "given-name" required > </p> </td> </tr></table><p>Currently, required is only implemented in Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10, and Chrome 5+, so for the time being, you'll have to continue writing client-side field validation scripts for other browsers (*cough- khe*IE!). Opera, Chrome, and Firefox show an error message to the user when submitting a form. In most browsers, errors are then localized based on the declared language. Safari doesn't show an error message when submitting, but instead puts that field in focus.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2013/23/3.jpg' height="107" width="180" loading=lazy loading=lazy></p> <p>The default display of the "required" error message depends on the individual browser; Currently, the "bubble" with the error message in all browsers cannot be styled with CSS. Chrome, however, has its own property that can be used to style the error message. You can also style input with the :required pseudo-class. The alternative is to override the wording and styles in JavaScript with the setCustomValidity() method. It's also very important to remember that this browser-based validation does not replace server-side validation.</p> <h3>pattern</h3> <p>The pattern attribute is usually a big concern for many developers (well, as much as any form attribute). It defines a JavaScript regular expression for the field whose value is to be checked. Pattern makes it easy for us to apply separate checks for codes, account numbers, and so on. The possibilities of pattern are extensive, and here is just one simple example using a product number.</p> <p><label>product number: <input pattern="{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label >Product Number :</p><p>< input pattern = "{3}" name = "product" type = "text" title = <span>"Single digit followed by three uppercase letters."</span>/ > </p><p>< / label > </p> </td> </tr></table><p>This pattern dictates that the product number must be a single digit followed by three <a href="https://mdou3kursk.ru/en/laptops/javascript-regulyarnye-vyrazheniya-zamena-simvolov-regulyarnye-vyrazheniya/">capital letters</a>(3). See the HTML5 Templates website for more templates, which has a list of common style template regular expressions to help you get started with them.</p> <p>As with required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10, and Chrome 5+ are the only browsers that currently support templates. However, the rest will soon catch up due to the rapid advancement of the browser market.</p> <h3>list and datalist elements</h3> <p>The list attribute allows the user to associate a list of options with a particular field. The value of the list attribute must be the same as the ID of the datalist element in the same document. The datalist element for HTML5 is new and represents a predefined list of form control options. It works similar to in-browser search fields that automatically complete words as you type.</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2013/23/4.jpg' align="center" height="360" width="374" loading=lazy loading=lazy></p> <p>The following example shows how list and datalist are combined.</p> <p><label>Your favorite fruit: <datalist id="fruits"> <option value="blackberry">blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="blueberry">blueberry</option> <!-- … --> </datalist> If other, please specify: <input type="text" name="fruit" list="fruits"> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label >Your favorite fruit :</p><p>< datalist id = "fruits" > </p><p>< option value = "blackberry" >blackberry< / option > </p><p>< option value = "Blackcurrant" >Blackcurrant< / option > </p><p>< option value = "blueberry" >blueberry< / option > </p><p>< ! -- …-- > </p><p>< / datalist > </p><p>If other , please specify :</p><p>< input type = "text" name = "fruit" list = "fruits" > </p><p>< / label > </p> </td> </tr></table><p>By adding a select element to the datalist, you can provide great degradation by simply applying an option element. Here's an elegant markup template created by Jeremy Keith that fits perfectly with HTML5's gradual degradation principles.</p> <p><label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="blackberry">blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="blueberry">blueberry</option> <!-- … --> </select> If other, please specify:</datalist> <input type="text" name="fruit" list="fruits"> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label >Your favorite fruit :</p><p>< datalist id = "fruits" > </p><p>< select name = "fruits" > </p><p>< option value = "blackberry" >blackberry< / option > </p><p>< option value = "Blackcurrant" >Blackcurrant< / option > </p><p>< option value = "blueberry" >blueberry< / option > </p><p>< ! -- …-- > </p><p>< / select > </p><p>If other , please specify :</p><p>< / datalist > </p><p>< input type = "text" name = "fruit" list = "fruits" > </p><p>< / label > </p> </td> </tr></table><p>Browser support for list and datalist is currently limited to Opera 9.5+, Chrome 20+, Internet Explorer 10 and Firefox 4+.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2013/23/5.jpg' height="118" width="203" loading=lazy loading=lazy></p> <h3>multiple</h3> <p>You can take your list and datalist a step further by applying the boolean multiple attribute so that you can enter more than one value from the data list. Here is an example.</p> <p><label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="blackberry">blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="blueberry">blueberry</option> <!-- … --> </select> If other, please specify:</datalist> <input type="text" name="fruit" list="fruits" multiple> </label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label >Your favorite fruit :</p><p>< datalist id = "fruits" > </p><p>< select name = "fruits" > </p><p>< option value = "blackberry" >blackberry< / option > </p><p>< option value = "Blackcurrant" >Blackcurrant< / option > </p><p>< option value = "blueberry" >blueberry< / option > </p><p>< ! -- …-- > </p><p>< / select > </p><p>If other , please specify :</p><p>< / datalist > </p><p>< input type = "text" name = "fruit" list = "fruits" multiple > </p><p>< / label > </p> </td> </tr></table><p>However, multiple is not exclusively used with datalist. A further example of the use of multiple would be addresses <a href="https://mdou3kursk.ru/en/interview/kak-otpravit-fail-po-elektronnoi-pochte-ekspress-pismo-ems-mozhno-li/">Email</a> when forwarding items to a friend or attaching files, as shown here:</p> <p><label>upload files: <input type="file" multiple name="upload"></label></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< label >Upload files :</p><p>< input type = "file" multiple name = "upload" > < / label > </p> </td> </tr></table><p>multiple is supported in Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 and Chrome 4+.</p> <h3>novalidate and formnovalidate</h3> <p>The novalidate and formnovalidate attributes indicate that no validation is required when the form is submitted. They are both boolean attributes. formnovalidate can be applied to inputs of type submit or image. The novalidate attribute can only be set on the form element.</p> <p>An example of using the formnovalidate attribute can be seen on the "save draft" button, where the form has fields that are required to submit a draft but not required to save a draft. novalidate will be used when you don't need to do form validation, but want to take advantage of the better user interface offered by the new input types.</p> <p>The use of formnovalidate can be seen in the following example:</p> <p><form action="process.php"> <label for="email">Email:</label> <input type="text" name="email" value="gordo@example.com"> <input type="submit" formnovalidate value="Submit"> </form></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< form action = "process.php" > </p><p>< label for = "email" >Email :< / label > </p><p>< input type = "text" name = "email" value = "gordo@example.com" > </p><p>< input type = "submit" formnovalidate value = "Submit" > </p><p>< / form > </p> </td> </tr></table><p>And this example shows the use of novalidate:</p> <p><form action="process.php" novalidate> <label for="email">Email:</label> <input type="text" name="email" value="gordo@example.com"> <input type="submit" value="Submit"> </form></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< form action = "process.php" novalidate > </p></td></tr></table> <p>To see a description and an example of how to use the global attribute you are interested in, click on it or scroll down the page to its description.</p> <h2>access key</h2> <p>The accesskey attribute is used by browsers as a guide to creating a keyboard shortcut that activates or brings focus to an element.</p><p>Note: Prior to HTML5, the accesskey attribute could only be used with the following tags: . <a href="https://puzzleweb.rutag_area.php" target="_blank"> , <a href="https://puzzleweb.rutag_button.php" target="_blank"><button> , <input> , <label> , <legend>and <textarea>. Since HTML 5, this attribute can be used with any valid HTML tag.</p> <p>The value of the accesskey attribute must be a character that can be entered by pressing a single key. Whitespace characters are not allowed as an attribute value.</p><p>The keyboard shortcuts for the accesskey attribute depend on the browser you are using:</p> <p>Using the accesskey attribute on different elements with the same value causes the attribute to be ignored.</p> <h2>class</h2> <p>The class attribute is used to later access elements (via the class name) in CSS and JavaScript.</p> <p>In the class attribute, you can specify not one, but several classes as a value, in which case the class names must be separated by spaces, the order of the class names does not matter:</p><p> <p>If ad blocks of different classes use the same <a href="https://mdou3kursk.ru/en/interview/sozdanie-ramok-v-css-svoistvo-border-otstupy-i-ramki-v-css-s-pomoshchyu-parametrov/">CSS properties</a> with different values, then the value that is defined below the rest in the CSS code will be applied to the property. Therefore, the order of the class names in the attribute value does not matter, since in this case the cascading mechanism is triggered.</p> <h2>contenteditable</h2> <p>The contenteditable attribute specifies whether the user can edit the content of this element. The attribute can take one of the following values:</p> <ul><li>true or an empty string ("") - the content of the element can be edited</li> <li>false - content editing is prohibited</li> </ul> <bdo dir="ltr">Just some text</bdo> <h2>draggable</h2> <p>The draggable attribute determines whether the user can drag the element using the drag-and-drop API. The attribute can take one of three values:</p> <ul><li>true - indicates that the element is draggable</li> <li>false - indicates that the element is not draggable</li> <li>auto - specifies that the dragging of the element will depend on the value set in the default browser.</li> </ul><p>Using the id attribute, you can create links to <a href="https://mdou3kursk.ru/en/news/javascript-kak-poluchit-elementy-roditelya-tehniki-raboty-s-dom-roditelskie/">specific element</a>, not just the page as a whole. Such links can lead either to a section of this page or to a section of another page. To link to an element, add an id attribute to the sky. The link itself, in this case, will have to contain the name of the identifier of the element to which it refers, which must be preceded by the # symbol. If the link leads to a section of the current page, then only the name of the identifier can be specified as the address, if the link leads to a section of another page, then the name of the identifier is indicated at the very end of the address:</p><h2>language</h2> <p>The lang attribute allows you to specify which language is used for text within an element. Language codes are used as the attribute value:</p><p> <p>English text: <span lang="en">"Hello world!"</span>.</p> </p><p>Using this attribute helps browsers to correctly display certain national characters, speech programs to determine the language of the text, and checks the text for spelling and grammar checkers.</p> <p>The lang attribute can also be used to improve the quality of search results in search results that are based on the user's linguistic preferences.</p> <h2>spell check</h2> <p>The spellcheck attribute specifies whether the element's content is allowed to be checked for spelling errors. The attribute can take one of the following values:</p> <ul><li>true - indicates that the content of the element should be checked for spelling errors whenever possible.</li> <li>false - specifies that the element should not be checked for spelling errors.</li> </ul><p>The spellcheck attribute is enumerable. This means that an explicit attribute value is required. Adding an attribute without a value is prohibited:</p><p> <!-- правильное добавление атрибута --> <textarea spellcheck="false"> <!-- неправильное добавление атрибута --> <textarea spellcheck> </p><p>The spellcheck attribute only defines a recommendation to the browser that browsers should not be able to check for spelling errors. Normally, non-editable elements are not checked for errors, even if the attribute is set to true and the browser supports checking.</p> <h2>style</h2> <p>The style attribute is used to add CSS styles to an element. Styles added with the style attribute take precedence over styles located on the element<style> или во внешнем файле.</p> <p>При добавлении стилей в значение атрибута, селектор и <a href="https://mdou3kursk.ru/en/processors/js-kratkaya-zapis-if-funkcii-i-usloviya-if-else-v-javascript-ispolzovanie/">фигурные скобки</a> не используются. Каждое объявление должно заканчиваться точкой с запятой, после которой можно писать следующее объявление. Между свойствами и их значениями, так же как и между объявлениями, пробелы ставятся по желанию:</p><p> <span style="color: red; font-weight: bold;">Жирный красный текст</p><h2>tabindex</h2> <p>Атрибут tabindex указывает может ли элемент быть в фокусе и порядок приоритета при переходе фокуса между элементами (при использовании клавиши " tab "). В качестве значения атрибут принимает целое число:</p><p> <textarea tabindex="5"> </p><p>Число 5 означает, что элемент получит фокус после элемента с tabindex="4" и до элемента с tabindex="6" . Но давать последовательные значения не обязательно, в любом случае элементы, имеющие меньшее значение, получат фокус до элементов, имеющих большее значение. Если несколько элементов имеют одинаковые положительные значения, то порядок получения фокуса будет зависеть от порядка их следования в исходном коде документа.</p> <h2>title</h2> <p>Атрибут title используется для указания дополнительной информации о содержимом элемента (отображается браузерами в виде всплывающей текстовой подсказки при наведении курсора мыши на элемент).</p> <p>Атрибут title часто используется с картинками, для добавления описания картинки:</p><p> <img src='https://i0.wp.com/1.png' loading=lazy loading=lazy> </p><p>Примечание: <a href="https://mdou3kursk.ru/en/multimedia/tab-7000-proshivka-proshivka-wexler-t7008-vneshnii-vid-i-razemy/">внешний вид</a> и размер всплывающей подсказки, шрифт и цвет текста, зависят от браузера и не могут быть изменены с <a href="https://mdou3kursk.ru/en/cd-and-dvd-drives/oformlenie-teksta-s-pomoshchyu-css-css-svoistva-text-decoration-vertical-align-text-align-text-indent-dlya/">помощью CSS</a> стилей.</p> <p>Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный.</p> <p>В HTML существует ряд атрибутов, которые <b>универсальны </b> и могут применяться практически к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными атрибутами .</p><p>Глобальные атрибуты будут часто встречаться в примерах этого учебника, предлагаю Вам бегло повторить те атрибуты, которые мы уже рассмотрели и ознакомиться с теми глобальными атрибутами, которые будут рассмотрены в ближайших статьях:</p> <h2>Вопросы и задачи по теме</h2> <p>Перед тем как перейти к изучению следующей темы пройдите практическое задание:</p> <br><p>Подсказка: не забудьте определить язык содержимого страницы и элементов, где это требуется. После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы его выполнили правильно.</p> <p>Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом</p> <p>вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.</p> <h2>Как писать атрибуты?</h2> <p>Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?</p> <p>Значения с атрибутами записываются в таком формате:</p><p>Атрибут=”значение” lang=”en”</p> <p>Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.</p> <p> <p align=”center”>Абзац</p></p> <p>Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.</p> <h2>Универсальные атрибуты</h2> <p>Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.</p> <ul><li><b>accesskey </b> позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш <b>Alt+1 </b> пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.</li> </ul><p>В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:</p> <p> <a acceskey=”1” href=”https://youtube.com”>Ссылка будет открываться по нажатию сочетания клавиш с единицей</a></p> <ul><li><b>class </b> позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.</li> <li>С помощью <b>contenteditable </b> можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: <b>true </b> - правку разрешить, <b>false </b> - запретить.</li> <li>При помощи атрибута <b>contextmenu </b> вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге <b><menu> </b>, а атрибуту contextmenu присваивается его идентификатор.</li> <li><b>dir </b> определяет направление текста: слева направо <b>(ltr) </b> или справа налево <b>(rtl) </b>.</li> <li><b>draggable </b> позволяет запретить <b>(false) </b> или разрешить <b>(true) </b>пользователю перетаскивать наделённый этим атрибутом элемент страницы.</li> <li><b>dropzone </b> указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение <b>copy </b>), перемещать (<b>move </b>) или создать на него ссылку <b>(link) </b>.</li> <li><b>hidden </b> - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.</li> <li><b>id </b> задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса <b>(-) </b> и подчёркивания <b>(_) </b>. Русских букв содержать не может.</li> <li><b>lang </b> помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - <b>ru </b>, английский - <b>en </b> и т. п.).</li> <li><b>spellcheck </b> включает <b>(true) </b> или отключает <b>(false) </b> проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.</li> <li><b>style </b> позволяет задать оформление элемента с помощью CSS-кода.</li> <li><b>tabindex </b> даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.</li> <li><b>title </b> - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.</li> </ul> <ul><li><b>translate </b> разрешает <b>(yes) </b> или запрещает <b>(no) </b> перевод содержимого тега.</li> <li><b>align </b> задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение <b>left </b>), по правому краю (<b>right </b>), по центру <b>(center) </b> или по ширине <b>(justify) </b>. Для изображений (тег <b><img> </b>) также доступно выравнивание по верхней границе самого высокого элемента строки (<b>top </b>), по нижней границе <b>(bottom) </b>, а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.</li> </ul><p>Стоит иметь в виду, что использовать атрибут <b>align </b> не рекомендуется, а выравнивать текст лучше с помощью CSS.</p> <h2>Пример использования атрибутов</h2> <p>В качестве примера рассмотрим строку HTML-кода:</p> <p> <p contenteditable=”true”>Этот текст можно редактировать</p></p> <p>Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.</p> <p>Разберём каждый элемент строки.</p> <p><b><p> </b> - открывающий тег контейнера, хранящего абзац.</p> </b> - закрывающий тег.</p> <p>Между символами <b>> </b> и <b>< </b> расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.</p> <p><b>contenteditable </b>=”<b>true </b>” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: <b>contenteditable </b>=”<b>true </b>”. Атрибут <b>contenteditable </b> задаёт, сможет ли пользователь редактировать содержимое элемента, значение <b>true </b>, написанное в кавычках через знак равно, редактирование разрешает:</p> <p>Атрибут=”значение” contenteditable=”true”</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> <p style="text-align: center;"></p> <p> <div style="text-align: center; margin: 3px 0;"> </div> <div style="text-align: center; margin: 1px 0 5px;"> </div> </p><span class="adplacer_pro_adblock_end_post_content" style="display: none;width: 0;height: 0;"></span> </article> <div class="post-meta"> <div class="post-share"> <div class="post-share__title">Поделиться с друзьями:</div> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8" async="async"></script><div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter" data-counter=""></div> </div> </div> <div class="title">Похожие публикации</div> <div class="yarpp-related"> <ul class="related-items"> <style> </style> <style> #perelink-horizontal{ vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 230px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img{ width:230px; height:150px; margin-bottom:10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://mdou3kursk.ru/en/printers/umenshenie-obema-faila-pdf-onlain-instrument-dlya-szhatiya-pdf-metod/"> <img src="/uploads/aa13acba4e2e1b0a7fc6d350e7c4c121.jpg" height="150" width="230" loading=lazy loading=lazy> <span>Online tool to compress PDF</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://mdou3kursk.ru/en/laptops/klyuch-dlya-eset-8-licenzionnyi-klyuch-aktivacii-nod32-antivirus/"> <img src="/uploads/591c989be8b78f2e799d19d1a2a401d8.jpg" height="150" width="230" loading=lazy loading=lazy> <span>NOD32 Antivirus Activation Key</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://mdou3kursk.ru/en/laptops/kak-sravnit-hesh-summy-faila-proverka-hesh-summ-chto-eto-takoe-kak/"> <img src="/uploads/30fc68e81b8614f9a8772815944b7891.jpg" height="150" width="230" loading=lazy loading=lazy> <span>Hash sum verification: what is it?</span> </a> </div> </div> </ul> </div> <div class="yarpp-related"> <ul class="related-items"> <li><img src="/uploads/de9935369e959964f1e540ce48642d1f.jpg" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/monitors/disk-space-failoobmennik-skachat-igry-disk-space-obzor-zarabotok-instrumenty-dlya/" target="_blank" rel="nofollow noopener noreferrer">Disk-Space: review, earnings, tools for work</a></li> <li><img src="/uploads/b04342104f831fe6d0c0e0870f300e94.jpg" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/printers/kak-nazyvaetsya-draiver-pci-kak-obnovit-draivery-kontroller-pci/" target="_blank" rel="nofollow noopener noreferrer">How to Update PCI Controller Drivers</a></li> <li><img src="/uploads/1760cc56aa3429c43d64c3da10a9948f.jpg" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/video-cards/draiver-shiny-pci-windows-7-poslednyaya-versiya-kak-obnovit-draivery/" target="_blank" rel="nofollow noopener noreferrer">How to Update PCI Controller Drivers</a></li> </ul> </div> </main> <aside class="sidebar"> <div class="search-form ya-site-form ya-site-form_inited_no" onclick="return { 'bg': 'transparent', 'publicname': '\u041f\u043e\u0438\u0441\u043a \u043f\u043e mdou3kursk.ru', 'target': '_self', 'language': 'ru', 'suggest': true, 'tld': 'ru', 'site_suggest': true, 'action': '/search', 'webopt': false, 'fontsize': 12, 'arrow': false, 'fg': '#000000', 'searchid': '2265323', 'logo': 'rb', 'websearch': false, 'type': 2} "> <form action="/search" method="get" target="_self"> <input type="hidden" name="searchid" value="2265323"> <input type="hidden" name="l10n" value="en"> <input type="hidden" name="reqenc" value=""> <input type="text" name="text" placeholder="Site search:" class="search-form__field" value=""> <input type="submit" value="" class="search-form__button"> </form> </div> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://mdou3kursk.ru/news/html-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy/" target="_blank" class="vk">In contact with</a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Fmdou3kursk.ru%2Fen%2Fnews%2Fhtml-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy%2F" target="_blank" class="tw">Twitter</a> <a href="" target="_blank" class="gp">Google+</a> </div> <nav class="sidebar-menu section"><ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/processors/">Processors</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/hdd/">hdd</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/housings/">Corps</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/applications/">Applications</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/boards/">Boards</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/video-cards/">Video cards</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/os/">OS</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/games/">Games</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/multimedia/">Multimedia</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://mdou3kursk.ru/en/category/news/">News</a> </li> </ul></nav> <div class="section section-question"> <div class="title"><a href="https://mdou3kursk.ru/en/">New Articles</a></div> <ul class="section-question__posts"> <li> <a href="https://mdou3kursk.ru/en/printers/google-doc-gugl-doks-polnyi-obzor-servisa-gugl-dok-onlain-kak-sozdat-gugl/">Google Doc (google docs) - a complete overview of the service</a> </li> <li> <a href="https://mdou3kursk.ru/en/boards/chto-za-programma-draiver-agent-programma-obnaruzheniya-i-ustanovki/">Program to detect and install unknown devices on your computer</a> </li> <li> <a href="https://mdou3kursk.ru/en/processors/upravlenie-vai-fai-setyu-wi-fi-kontroller-upravleniya-osveshcheniem-po-toi-zhe/">Wi-Fi lighting control controller</a> </li> <li> <a href="https://mdou3kursk.ru/en/housings/david-id-agent-novaya-versiya-programma-obnaruzheniya-i-ustanovki/">Program to detect and install unknown devices on your computer</a> </li> <li> <a href="https://mdou3kursk.ru/en/applications/upravlyaemyi-wi-fi-wi-fi-ustroistva-kontrolya-i-upravleniya-master-kit/">Wi-Fi control and management devices Master Kit</a> </li> <li> <a href="https://mdou3kursk.ru/en/processors/pochemu-ne-ustanavlivaetsya-internet-explorer-i-chto-delat-ne-stavitsya/">IE 11 won't install on windows 7</a> </li> </ul> </div> <div class="section-posts-box section"> <div class="title">Popular Articles</div> <div class="section-video section-posts"> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/6e10a70afefe4ef398fa2df410e946f0.jpg" width="199" height="150" alt="hard drive partitioning software" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/interview/programmy-dlya-hdd-windows-10-na-russkom-programma-dlya-razbivki/" class="section-posts__item-title">hard drive partitioning software</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/520bd0c45bd2ed8643afdb2ea40f6610.jpg" width="199" height="150" alt="Update Internet Explorer to the latest version" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/interview/microsoft-internet-explorer-versii-10-obnovlyaem-brauzer-internet-explorer-do-aktualnoi/" class="section-posts__item-title">Update Internet Explorer to the latest version</a> </div> <div class="section-posts__item section-posts__item_popular"> <img src="/uploads/2d77ad8ad261d28e93b1b49d21035e5e.jpg" width="199" height="150" alt="Google Chrome Terms of Service Download Google Chrome in Russian" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/monitors/usloviya-predostavleniya-uslug-google-chrome-usloviya-predostavleniya-uslug-google/" class="section-posts__item-title">Google Chrome Terms of Service Download Google Chrome in Russian</a> </div> </div> </div> <div class="section-posts-box section"> <div class="title"><a href="https://mdou3kursk.ru/en/">Editor's Choice</a></div> <div class="section-video section-posts"> <div class="section-posts__item"> <img src="/uploads/71e1f7f3f771c42c34e7a965c9d5d591.jpg" width="199" height="150" alt="Icon Studio - a program for creating icons in Russian" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/monitors/redaktirovanie-ico-studiya-ikonok---programma-dlya-sozdaniya-ikonok-na/" class="section-posts__item-title section-title_video">Icon Studio - a program for creating icons in Russian</a> </div> <div class="section-posts__item"> <img src="/uploads/7f9de7726cc8ded2968fabcd1294864e.jpg" width="199" height="150" alt="Purpose of Trojan Scanners Download antivirus that removes Trojans" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/games/naznachenie-skanerov-troyanskih-programm-naznachenie-skanerov-troyanskih/" class="section-posts__item-title section-title_video">Purpose of Trojan Scanners Download antivirus that removes Trojans</a> </div> <div class="section-posts__item"> <img src="/uploads/efed62bebebad889a0d63af4121c626d.jpg" width="199" height="150" alt="Stubs for deprecated Windows updates Britain highlights the approach of the destroyer Daring"на задний двор Путина"" / loading=lazy loading=lazy> <a href="https://mdou3kursk.ru/en/printers/zaglushki-dlya-ne-rekomendovannyh-obnovlenii-windows-zaglushki-dlya-ne/" class="section-posts__item-title section-title_video">Blanks for deprecated Windows updates UK highlights destroyer Daring's entry into 'Putin's backyard'</a> </div> </div> </div> </aside> </div> <footer class="footer"> <div class="wrap"> <div class="logo logo_footer" style="background:none;"> <div class="logo__copy">All rights reserved, 2022</div> </div> <nav class="footer-navid"> <ul> <li class="menu-item type-post_type object-page "><a href="">About the site</a></li> <li class="menu-item type-post_type object-page "><a href="https://mdou3kursk.ru/en/sitemap.xml">site `s map</a></li> </ul> </nav> <div class="social-icon"> <a href="https://vk.com/share.php?url=https://mdou3kursk.ru/news/html-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy/" target="_blank" class="vk">In contact with</a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Fmdou3kursk.ru%2Fen%2Fnews%2Fhtml-atributy-kak-ispolzovat-data-atributy-html5-globalnye-atributy%2F" target="_blank" class="tw">Twitter</a> <a href="" target="_blank" class="gp">Google+</a> </div> </div> </footer> <script>var adsplacerProAdblockMessage = { "message":"<div class=\"adb-def\">\r\n <div>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 AdBlock?<\/div>\r\n <div>\u0420\u0435\u043a\u043b\u0430\u043c\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e<\/div>\r\n \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043d\u0435\u0441\u0438\u0442\u0435 \u043c\u043e\u0439 \u0441\u0430\u0439\u0442 \u0432 \u0432\u0430\u0439\u0442\u043b\u0438\u0441\u0442 \u0432\u0430\u0448\u0435\u0433\u043e AdBlock \u043f\u043b\u0430\u0433\u0438\u043d\u0430\r\n<\/div>"} </script><script>var adsplacerProAdblockFirstOnly = 0</script><script>var adsplacerProVersion = "2.5.7"</script><script>if(!AdsplacerProReadCookie('adsplacerProReferrer')){ document.cookie = "adsplacerProReferrer=" + document.referrer + "; path=/; expires=" + (new Date(new Date().getTime() + 60 * 60 * 24 * 1000)).toUTCString(); } </script><script>var adsplacerProPostId = "1848"</script><script>var CookieDate = new Date;CookieDate.setDate(391);document.cookie = 'adsplacerProDontShowAdsIds=' + JSON.stringify(adsplacerProFirstTime) + '; expires=' + CookieDate.toGMTString( ) + '; path=/';</script><script>var adsplacerProAdblockExtendMessages = []</script><script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/adsplacer_pro/assets/js/jquery.adsplacer.adblock.js?ver=2.5.7'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 150, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['custom_html-2'] } ; </script> <script type='text/javascript' src='https://mdou3kursk.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> </div> </body> </html>