What are global attributes in html. HTML5 Elements and Attributes
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
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.
How to write attributes?
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?
Attribute values are written in the following format:
Attribute=”value” lang=”en”
You should always write attributes inside the opening tag, after the reserved word.
Paragraph
Typically there are multiple attributes available for a single tag. It doesn't matter in what order they are listed.
Universal attributes
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.
- accesskey allows you to set a keyboard shortcut to access specific object pages. For example, you can use the keyboard shortcut to Alt+1 the user followed a specific link. Thus, develop a key navigation system.
The attribute value can be numbers 0-9 or letters of the Latin alphabet:
The link will be opened by pressing the key combination with one
- class allows you to associate a tag with a predefined one using CSS styling. 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.
- By using contenteditable 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: true- allow editing, false- prohibit.
- Using attribute contextmenu You can assign any element of the document with unique context menu items at your discretion. The menu itself is created in the tag , and the contextmenu attribute is given its identifier.
- dir determines the direction of the text: from left to right (ltr) or from right to left (rtl).
- draggable allows you to prohibit (false) or allow (true) the user can drag and drop a page element endowed with this attribute.
- dropzone tells the browser what to do with the dragged element: copy(value copy), move ( move) or create a link to it (link).
- hidden- 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.
- id 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 (-) and underscores (_) . Cannot contain Russian letters.
- lang 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 - ru, English - en and so on.).
- spellcheck includes (true) or disables (false) spell checking. It is especially useful to use the attribute in form field tags where the user will enter text.
- style allows you to set the design of an element with using CSS-code.
- tabindex 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.
- title- 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.
- translate allows (yes) or prohibits (no) translation of tag contents.
- align sets the element's alignment. For example, you can use it to align text to the left (value left), along the right edge ( right), in the center (center) or width (justify). For images (tag
) alignment to the top border of the tallest element in the line is also available ( top), along the lower boundary (bottom), and the value middle makes the middle line of the image coincide with the baseline of the row.
It is worth keeping in mind that using the attribute align It is not recommended, and it is better to align the text using CSS.
Example of using attributes
As an example, consider the line of HTML code:
This text can be edited
The entire line creates a paragraph of text that the user can edit in the browser.
Let's look at each element of the line.
- the opening tag of the container storing the paragraph.
- closing tag.Between characters > And < 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.
contenteditable=”true” - this is the attribute and its meaning. Remember how in school: x=3. Same here: contenteditable=”true" Attribute contenteditable specifies whether the user can edit the contents of the element, the value true, written in quotes separated by an equal sign, editing allows:
Attribute=”value” contenteditable=”true”
Along with attributes specific to specific tags, in HTML5 there are a number of attributes that can be added to any tags, so the attributes included in this group are called global or universal. They are listed below with brief description. Available via link detailed description attribute.
The accesskey attribute allows you to activate a link using a certain key combination with a letter or number specified in the link code. Browsers use different key combinations. For example, for accesskey="s" the following combinations work.
- Internet Explorer:Alt+S
- Chrome: Alt+S
- Opera: Shift + Esc , S
- Safari: Alt+S
- Firefox: Shift + Alt + S
Specifies a style class that allows you to link specific tag with style. It is possible to specify several classes in a value at once, separating them with a space.
Informs that the element is available for editing by the user - it is allowed to delete text and enter a new one. Standard commands like undo, paste text from the buffer, etc. also work.
Installs context menu for the element. The value is the identifier of the menu created using the tag