Introduction to HTML5 forms and new attributes. How to use HTML5 data attributes Global html attributes

Attributes provide additional information about an element, and they are always defined in the start tag, regardless of whether it is a paired tag or a single tag.

There are a number of attributes in HTML that universal and can be applied to almost any tag, which is why the attributes included in this group are called global attributes.

Global attributes will be often encountered in the examples of this tutorial; I suggest you quickly review the attributes that we have already reviewed and familiarize yourself with the global attributes that will be discussed in upcoming articles:

Questions and tasks on the topic

Before moving on to the next topic, complete the practice assignment:

Tip: Don't forget to define the language of the page content and elements where required. After you complete the exercise, inspect the page code by opening the example in a separate window to make sure you completed it correctly.

To see a description and example of using the global attribute you are interested in, click on it or scroll down the page to its description.

accesskey

The accesskey attribute is used by browsers as a guide to create a keyboard shortcut that activates an element or gives it focus.

Note: Before HTML5, the accesskey attribute could only be used with the following tags: , , , ,

And . Since the fifth version of HTML, 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 attribute values.</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 this case, the class names must be separated by spaces; the order of the class names does not matter:</p><p> <p>If declaration blocks of different classes use the same CSS properties with different values, then the value that is defined lower than the others 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 content of this element can be edited by the user. The attribute can take one of the following values:</p> <ul><li>true or empty string ("") - the contents 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 an element using the drag-and-drop API. The attribute can take one of three values:</p> <ul><li>true - indicates that the element can be dragged</li> <li>false - indicates that the element is not dragged</li> <li>auto - specifies that dragging of an element will depend on the default value set in the browser.</li> </ul><p>Using the id attribute, you can create links to a specific element, and not just to the page as a whole. Such links can lead either to a section of this page or to a section of another page. To create a link to an element, you need to 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 identifier name can be specified as the address; if the link leads to a section of another page, then the identifier name is indicated at the very end of the address:</p><h2>lang</h2> <p>The lang attribute allows you to specify what language is used for the text inside the element. Language codes are used as the attribute value:</p><p> <p>Text in English: <span lang="en">"Hello world!"</span>.</p> </p><p>Using this attribute helps browsers correctly display some national characters, speech programs determine the language of the text, and check the text for spelling and grammar checking programs.</p> <p>The lang attribute can also be used to improve the quality of search results that are based on the user's linguistic preferences.</p> <h2>spellcheck</h2> <p>The spellcheck attribute specifies whether the element's contents can 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 if possible.</li> <li>false - indicates that the element should not be checked for spelling errors.</li> </ul><p>The spellcheck attribute is an enumerable attribute. 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 specifies only a browser recommendation: browsers should not be able to check for spelling errors. Typically, 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 using the style attribute take precedence over styles located within the element <style>or in an external file.</p> <p>When adding styles to an attribute value, the selector and curly braces are not used. Each declaration must end with a semicolon, after which the next declaration can be written. Between properties and their values, as well as between declarations, spaces are optional:</p><p> <span style="color: red; font-weight: bold;">Bold red text</p><h2>tabindex</h2> <p>The tabindex attribute specifies whether an element can have focus and the order of priority when moving focus between elements (using the "tab" key). The attribute takes an integer as its value:</p><p> <textarea tabindex="5"> </p><p>The number 5 means that the element will receive focus after the element with tabindex="4" and before the element with tabindex="6" . But it is not necessary to give sequential values; in any case, elements with a lower value will receive focus before elements with a higher value. If several elements have the same positive values, then the order in which focus will be received will depend on the order in which they appear in the document source code.</p> <h2>title</h2> <p>The title attribute is used to indicate additional information about the content of an element (displayed by browsers as a tooltip when hovering the mouse over the element).</p> <p>The title attribute is often used with images to add a description of the image:</p><p> <img src='https://i0.wp.com/1.png' loading=lazy loading=lazy> </p><p>Note: Tooltip appearance and size, font and text color are browser dependent and cannot be changed using CSS styles.</p> <p>We've already figured it out. We found out that they have content. However, that's not all. Tags also have attributes that enhance their capabilities, and attributes in turn have values. With their help, you can set parameters for an element and determine the design style. For example, with the tag</p> <p>you have marked the paragraph. But how to make it aligned to the right? To do this, you will need a specific attribute with the corresponding value. Just as some tags do not have a pair, some attributes can be used without values.</p> <h2>How to write attributes?</h2> <p>Attributes are reserved words (like tags, only without angle brackets), but their meanings can be different. Just like tags, it is recommended to write attributes with values ​​in small letters, although browsers, in general, do not care - this is just a rule of good manners: in Russian, it is ALSO NOT ACCEPTABLE TO WRITE WHEN CAPS LOCK IS ENABLED. Why is HTML worse?</p> <p>Attribute values ​​are written in the following format:</p><p>Attribute=”value” lang=”en”</p> <p>You should always write attributes inside the opening tag, after the reserved word.</p> <p> <p align=”center”>Paragraph</p></p> <p>Typically there are multiple attributes available for a single tag. It doesn't matter in what order they are listed.</p> <h2>Universal attributes</h2> <p>Each HTML tag has its own set of attributes. Some attributes may be available for multiple tags, while others may only work with one. There is also a group of universal (global) attributes that can be used with any tag. Let's briefly look at the attributes of this category.</p> <ul><li><b>accesskey</b> allows you to set a keyboard shortcut to access a specific page object. For example, you can use the keyboard shortcut to <b>Alt+1</b> the user followed a specific link. Thus, develop a key navigation system.</li> </ul><p>The attribute value can be numbers 0-9 or letters of the Latin alphabet:</p> <p> <a acceskey=”1” href=”https://youtube.com”>The link will be opened by pressing the key combination with one</a></p> <ul><li><b>class</b> allows you to associate a tag with a predefined design using CSS. Using an attribute allows you to significantly reduce the code, because instead of repeatedly entering the same CSS block, you can simply enter the name of the corresponding class.</li> <li>By using <b>contenteditable</b> you can allow the user to edit any element of the HTML page: delete, insert, change text. The same attribute makes it possible to edit and disable. It has only two meanings: <b>true</b>- allow editing, <b>false</b>- prohibit.</li> <li>Using attribute <b>contextmenu</b> You can assign any element of the document with unique context menu items at your discretion. The menu itself is created in the tag <b><menu> </b>, and the contextmenu attribute is given its identifier.</li> <li><b>dir</b> determines the direction of the text: from left to right <b>(ltr)</b> or from right to left <b>(rtl)</b>.</li> <li><b>draggable</b> allows you to prohibit <b>(false)</b> or allow <b>(true)</b> the user can drag and drop a page element endowed with this attribute.</li> <li><b>dropzone</b> tells the browser what to do with the dragged element: copy(value <b>copy</b>), move ( <b>move</b>) or create a link to it <b>(link)</b>.</li> <li><b>hidden</b>- an attribute that allows you to hide the content of an element so that it is not displayed in the browser. If the attribute is set to false, the object is displayed, true - it is hidden.</li> <li><b>id</b> specifies the element identifier - a kind of name that is needed to simply change the style of the object, as well as so that scripts can access it. The value of the attribute will be its name. It must begin with a Latin letter, and can contain numbers, letters of the same Latin alphabet (large and small), as well as hyphens <b>(-) </b> and underscores <b>(_) </b>. Cannot contain Russian letters.</li> <li><b>lang</b> helps the browser understand what language the content is written in and style it accordingly (for example, languages ​​may use different quotes). The values ​​are language codes (Russian - <b>ru</b>, English - <b>en</b> etc.).</li> <li><b>spellcheck</b> includes <b>(true)</b> or disables <b>(false)</b> spell checking. It is especially useful to use the attribute in form field tags where the user will enter text.</li> <li><b>style</b> allows you to set the design of an element using CSS code.</li> <li><b>tabindex</b> makes it possible to determine how many times the user will have to press the Tab key for an object with this attribute to receive focus. The number of clicks determines the attribute value - a positive integer.</li> <li><b>title</b>- a tooltip that appears if you move the mouse to an element and leave it motionless for a while. The line in the meaning will be a hint.</li> </ul> <ul><li><b>translate</b> allows <b>(yes)</b> or prohibits <b>(no)</b> translation of tag contents.</li> <li><b>align</b> sets the element's alignment. For example, you can use it to align text to the left (value <b>left</b>), along the right edge ( <b>right</b>), in the center <b>(center)</b> or width <b>(justify)</b>. For images (tag <b><img> </b>) alignment to the top border of the tallest element in the line is also available ( <b>top</b>), along the lower boundary <b>(bottom)</b>, and the value middle makes the middle line of the image coincide with the baseline of the row.</li> </ul><p>It is worth keeping in mind that using the attribute <b>align</b> It is not recommended, and it is better to align the text using CSS.</p> <h2>Example of using attributes</h2> <p>As an example, consider the line of HTML code:</p> <p> <p contenteditable=”true”>This text can be edited</p></p> <p>The entire line creates a paragraph of text that the user can edit in the browser.</p> <p>Let's look at each element of the line.</p> <p><b><p> </b>- the opening tag of the container storing the paragraph.</p> </b>- closing tag.</p> <p>Between characters <b>> </b> And <b>< </b> text is located This text can be edited. This is an inscription outside the tags (between them), which means it will be visible to the user who opens the page. The browser perceives it as simple text that needs to be displayed on the screen.</p> <p><b>contenteditable</b>=”<b>true</b>” - this is the attribute and its meaning. Remember how in school: x=3. Same here: <b>contenteditable</b>=”<b>true</b>" Attribute <b>contenteditable</b> specifies whether the user can edit the contents of the element, the value <b>true</b>, written in quotes separated by an equal sign, editing allows:</p> <p>Attribute=”value” contenteditable=”true”</p> <p>Last update: 04/08/2016</p> <p>Before moving directly to creating your web pages in HTML5, let's look at the basic building blocks that make up a web page.</p> <p>An HTML5 document, like any HTML document, is made up of elements, and elements are made up of tags. Typically, elements have an opening and closing tag, which are enclosed in angle brackets. For example:</p><p> <div>div element text</div> </p><p>Here's a div element defined that has an opening tag <div>and closing tag</div>. Between these tags is the content of the div element. In this case, the content is the simple text "Text of the div element".</p> <p>Elements can also consist of a single tag, for example element <br />, whose function is to break a line.</p><p> <div>Text <br />div element</div> </p><p>Such elements are also called empty elements. Although I used a closing slash, its presence is optional according to the specification, and is equivalent to using a tag without a slash: <br></p> <p>Each element inside the opening tag can have attributes. For example:</p><p> <div style="color:red;">Button</div> <input type="button" value="Click"> </p><p>There are two elements defined here: div and input. The div element has a style attribute. After the equal sign, the attribute value is written in quotes: style="color:red;" . In this case, the value is "color:red;" indicates that the text color will be red.</p> <p>The second element - the input element, consisting of one tag, has two attributes: type (indicates the type of element - button) and value (defines the text of the button)</p> <p>There are global or common attributes for all elements, such as style, and there are specific ones that apply to certain elements, such as type.</p> <p>In addition to regular attributes, there are also Boolean attributes. Such attributes may not be meaningful. For example, you can set the disabled attribute for a button:</p><p> <input type="button" value="Click" disabled> </p><p>The disabled attribute indicates that the element is disabled.</p> <h3>Global attributes</h3> <p>HTML5 has a set <span>global attributes</span>, which apply to any HTML5 element:</p> <ul><p>accesskey : defines a key for quick access to an element</p> <p>class : specifies the CSS class that will be applied to the element</p> <p>contenteditable: determines whether the element's content can be edited</p> <p>contextmenu : Defines the context menu for an element that is displayed when you right-click the element</p> <p>dir: sets the direction of text in an element</p> <p>draggable: determines whether the element can be dragged</p> <p>dropzone: determines whether drop zone data can be copied when dropped onto an element</p> <p>hidden : hides the element</p> <p>id : The element's unique identifier. Elements on a web page should not have duplicate identifiers</p> <p>lang : specifies the language of the element</p> <p>spellcheck : indicates whether spell check will be used for this element</p> <p>style : sets the style of the element</p> <p>tabindex : Defines the order in which items can be toggled using the TAB key</p> <p>title : sets an additional description for the element</p> <p>translate : determines whether the element's content should be translated</p> </ul><p>But, as a rule, from this entire list, three are most often used: class, id and style.</p> <h3>Custom Attributes</h3> <p>Unlike the previous version of the markup language, custom attributes were added to HTML5. Now the developer or creator of the web page can define any attribute by prefixing it with a prefix <i>data-</i>. For example:</p><p> <input type="button" value="Click" data-color="red" > </p><p>The data-color attribute is defined here and has the value "red". Although there is no such attribute for this element, nor in html in general. We define it ourselves and set it to any value.</p> <h3>Single or double quotes</h3> <p>You can often find cases where both single and double quotes are used in html when defining attribute values. For example:</p><p> <input type="button" value="Click"> </p><p>Both single and double quotes are acceptable in this case, although double quotes are more often used. However, sometimes the attribute value itself may contain double quotes, in which case it is better to put the entire value in single quotes:</p><p> <input type="button" value="Button"Привет мир""> </p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?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> </article> <div class="tags"></div> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter" ></div> <div id="venus-269"></div> </div> <div class="seealso"> <span class="title">Read more:</span> <ul> <li> <div> <a href='https://periscopes.ru/en/nastroika-printera-dlya-konfiguracii-roznica.html' title='Setting up the printer for the Retail configuration'> <noindex><img width="640" height="426" src="/uploads/e404a1b11db23bd1931805bb0999d6ec.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Setting up the printer for the Retail configuration" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-09-09 01:04:43</noindex></span> <div><a href='https://periscopes.ru/en/nastroika-printera-dlya-konfiguracii-roznica.html' title='Setting up the printer for the Retail configuration'>Setting up the printer for the Retail configuration</a></div> </li> <li> <div> <a href='https://periscopes.ru/en/dostavka-pochtoi-gonkonga-pochta-gonkonga-hongkong-post-i-honkong-speedpost-kak-otsledit.html' title='Delivery by Hong Kong Post'> <noindex><img width="640" height="426" src="/uploads/d95c4fa8e27e72946163a8223f6dd252.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Delivery by Hong Kong Post" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-09-09 01:04:43</noindex></span> <div><a href='https://periscopes.ru/en/dostavka-pochtoi-gonkonga-pochta-gonkonga-hongkong-post-i-honkong-speedpost-kak-otsledit.html' title='Delivery by Hong Kong Post'>Delivery by Hong Kong Post</a></div> </li> <li> <div> <a href='https://periscopes.ru/en/abonent-ne-podtverdil-tranzakciyu-aliekspress-kak-oplatit-pokupku-na.html' title='How to pay for a purchase on Aliexpress from a mobile phone?'> <noindex><img width="640" height="426" src="/uploads/859197c917622c931dbfcfd9914722a7.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="How to pay for a purchase on Aliexpress from a mobile phone?" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-09-08 01:06:17</noindex></span> <div><a href='https://periscopes.ru/en/abonent-ne-podtverdil-tranzakciyu-aliekspress-kak-oplatit-pokupku-na.html' title='How to pay for a purchase on Aliexpress from a mobile phone?'>How to pay for a purchase on Aliexpress from a mobile phone?</a></div> </li> <li> <div> <a href='https://periscopes.ru/en/menedzher-sessii-v-firefox-kak-sdelat-sohranenie-i-vosstanovlenie-vkladok-firefox-session-manager.html' title='How to save and restore Firefox tabs - Session Manager Installing a session manager'> <noindex><img width="640" height="426" src="/uploads/fe296aeffa7c370e594ec56394624fcc.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="How to save and restore Firefox tabs - Session Manager Installing a session manager" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-09-07 01:10:21</noindex></span> <div><a href='https://periscopes.ru/en/menedzher-sessii-v-firefox-kak-sdelat-sohranenie-i-vosstanovlenie-vkladok-firefox-session-manager.html' title='How to save and restore Firefox tabs - Session Manager Installing a session manager'>How to save and restore Firefox tabs - Session Manager Installing a session manager</a></div> </li> <li> <div> <a href='https://periscopes.ru/en/pochemu-ne-zahodit-vkontakte-s-telefona-pochemu-v-vk-ne-zahodit-i.html' title='Why can’t I log into VK and what to do?'> <noindex><img width="640" height="426" src="/uploads/4a47cb2327fd2a3d6f5b6ef5c8bf1095.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Why can’t I log into VK and what to do?" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-09-07 01:10:21</noindex></span> <div><a href='https://periscopes.ru/en/pochemu-ne-zahodit-vkontakte-s-telefona-pochemu-v-vk-ne-zahodit-i.html' title='Why can’t I log into VK and what to do?'>Why can’t I log into VK and what to do?</a></div> </li> <li> <div> <a href='https://periscopes.ru/en/chto-takoe-kod-draivera-opredelenie-id-ustroistva-dlya-ustanovki.html' title='Determining the device ID for driver installation'> <noindex><img width="640" height="426" src="/uploads/40cae6802873bdb4571afa71c1458620.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Determining the device ID for driver installation" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy loading=lazy></noindex> </a> </div> <span class='date'><noindex>2024-09-07 01:10:21</noindex></span> <div><a href='https://periscopes.ru/en/chto-takoe-kod-draivera-opredelenie-id-ustroistva-dlya-ustanovki.html' title='Determining the device ID for driver installation'>Determining the device ID for driver installation</a></div> </li> </ul> </div> </div> </div> </div> <footer> <nav id="links"> </nav> <div id="footer"> <div class="icon-logos_footer" style="position:absolute; top:16px; left:18px; width: 119px; height: 19px;"> </div> <span>© 2024. Mobile technologies and telecom operators</span> <div> </div> </footer> </div> </div> </div> <script type='text/javascript' src='https://periscopes.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.7'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.2'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-article", "margin_top" : 10, "margin_bottom" : 0, "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" : ['text-20'] } ; </script> <script type='text/javascript' src='https://periscopes.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.2'></script> <script type='text/javascript' src='https://periscopes.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script> <script type="text/javascript"> $(document).ready(function(){ var bg = $(".slider > ul > li > a > img").attr ("src"); $(".slider").css("background", "url("+bg+")"); $(".slider > ul > li:first-child").addClass ("active"); } ); $(function () { $("#devider").masonry({ itemSelector: ".vpost" } ); $(".sub-menu").each(function () { $(this).parent().eq(0).hover(function () { $(this).addClass("li-hover"); } , function () { $(this).removeClass("li-hover"); } ); } ); $(".tabs-all-cat > li").each(function () { $(this).hover(function () { $(this).addClass("li-hover"); $(".tabs-all-cat > li > ul").show(); } , function () { $(this).removeClass("li-hover"); $(".tabs-all-cat > li > ul").hide(); } ); } ); $(".slider-a").click(function () { $(".slider > ul > li").removeClass ("active"); $(this).parent().addClass ("active"); var bg = $(".active > a > img").attr ("src"); $(".slider").css("background", "url("+bg+")"); } ); } ); </script> </body> </html>