HTML5 attributes. HTML attributes. HTML5 Page Layout Structure

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.

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.

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 make sure that the user uses the Alt+1 key combination to follow 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.
• 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 values: true - allow editing, false - disable.
• Using the contextmenu attribute, you can provide any document element with unique context menu items at your discretion. The menu itself is created in the tag, and the contextmenu attribute is assigned its identifier.
• dir specifies the direction of the text: left to right (ltr) or right to left (rtl).
• draggable allows you to disable (false) or allow (true) the user to drag a page element endowed with this attribute.
• dropzone tells the browser what to do with the dropped 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 identifier of the element - 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, etc.).
• spellcheck enables (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 allows you to determine how many times the user will have to press the Tab key for an object with that attribute to receive focus. The number of clicks determines the attribute value - a positive integer.
• title - a tooltip that will appear if you move the mouse over an element and leave it motionless for a while. The line in the meaning will be a hint.

• translate allows (yes) or denies (no) translation of the tag contents.
• align specifies the element's alignment. For example, you can use it to align text to the left (left), right, center, or justify. For images (tag ) it is also possible to align to the top border of the highest element of the line (top), to the bottom border (bottom), and the value middle makes the middle line of the image coincide with the baseline of the line.

It is worth keeping in mind that using the align attribute is not recommended, and it is better to align text using CSS.

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.

Between the symbols > and< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true” - this is the attribute and its value. Remember how in school: x=3. Same here: contenteditable = “true”. The contenteditable attribute specifies whether the user can edit the content of the element; the value true , written in quotes separated by an equal sign, allows editing:

Attribute=”value” contenteditable=”true”

Way back in the days of XHTML/HTML4, developers had just a few options they could use to store arbitrary DOM-related data. You could invent your own attributes, but this was risky - your code wouldn't be valid, browsers might ignore your data, and it could cause problems if the name matched standard HTML attributes.

Therefore, most developers stuck to the class or rel attributes as they were the only reasonable way to store additional rows. For example, let's say we're creating a widget to display messages like a Twitter message timeline. Ideally, JavaScript should be configurable without having to rewrite the code, so we define the user ID in the class attribute, like this:

Our JavaScript code will look for an element with ID msglist . Using the script, we will search for classes starting with user_ , and “bob” in our case will be the user ID, and we will display all messages of that user.

Let's say we would also like to set a maximum number of messages, and skip messages older than six months (180 days):

Our class attribute It gets cluttered very quickly - it's easier to make a mistake, and parsing strings in JavaScript becomes more and more difficult.

Fortunately, HTML5 introduced the ability to use custom attributes. You can use any lowercase name prefixed with data- , for example:

Custom data attributes:

• these are strings - you can store any information in them that can be represented or encoded as a string, such as JSON. Type casting must be done using JavaScript
• should be used in cases where there are no suitable HTML5 elements or attributes
• refer only to the page. Unlike microformats they should be ignored external systems, type search engines and search robots

All browsers allow you to get and change data attributes using the getAttribute and setAttribute methods:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

This works, but should only be used to maintain compatibility with older browsers.

As of jQuery 1.4.3, the data() method handles HTML5 data attributes. You don't need to explicitly specify the data- prefix, so code like this will work:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

However, be aware that jQuery attempts to convert the values ​​of such attributes to appropriate types (booleans, numbers, objects, arrays, or null) and will affect the DOM. Unlike setAttribute , the data() method will not physically replace the data-list-size attribute - if you check its value outside of jQuery - it will still be 5.

Finally, we have an API for working with HTML5 datasets that returns a DOMStringMap object. It is important to remember that data attributes are mapped to an object without data- prefixes, hyphens are removed from names, and the names themselves are converted to camelCase, for example:

Our new code:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

This API is supported by all modern browsers, but not IE10 and lower. There is a workaround for these browsers, but it's probably more practical to use jQuery if you're writing for older browsers.

Attributes provide Additional information about the 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 are universal and can be applied to almost any tag, so 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:

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.

On HTML5, although all modern browsers already support this standard. As of December 2011, the standard is still under development.

HTML5 adds many new syntactic features - , , and . These elements are designed to make it easier to embed and manage graphics and media on the web without having to resort to native plugins and APIs. Other new elements such as , , and are designed to enrich the semantic content of the document (page).

• 1. Section tags (article, aside, footer, header, hgroup, nav, section)
• 2. Content grouping tags (figure, figcaption)
• 3. Tags for semantic text highlighting (bdo, mark, time, ruby, rt, rp, wbr)
• 4. Tags for inserting content (audio, video, canvas, embed, source)
• 5. Tags for form elements (datalist, keygen, output, progress, meter)
• 6. Interactive elements (details, summary, command, menu)

When using the usual website page structure, you can identify several typical blocks, described by a div tag with the corresponding class (, , , , etc.).

When used using HTML5, these blocks are described by structural tags , , , , etc., which makes life very easy for developers. These tags are structural equivalents and they make the markup more visual and easier to understand. Also, by default they are inline, so they need to be made block using display:block.

It is important to use these tags correctly. In order not to get confused when to use which one, there is a wonderful resource on the Internet, and you can also use the following algorithm:

All modern browsers (Opera, Safari, Chrome, Mozilla, IE9+) already have support for HTML5. For browsers IE8 and less, you should connect javascript, which will “teach” them to understand the new tags. The code to connect it is below:

When creating layouts, we switched to using the new HTML5 standard. If you want to order a website or separately, you can leave a request by writing to any of the addresses indicated on the page or through the form feedback. We look forward to collaborating!

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 associate a specific tag with a stylesheet. 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.

Sets the context menu for an element. The value is the identifier of the menu created using the tag.

Sets the direction and display of text - left to right or right to left. Browsers usually differentiate the direction of text if it is in Unicode, but you can use the dir attribute to specify which direction to display text. For Arabic and Hebrew characters, the Unicode direction takes precedence, so the dir attribute will not affect them.

Allows you to drag an element for further manipulation.

Specifies what to do with the element being dragged.

Hides the contents of an element from view. Such an element is not displayed on the page, but is accessible through scripts.

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

A group of attributes designed to work with microdata.

The text of the document can be typed in one language or contain inserts in other languages, which may differ in their text formatting rules. For example, for Russian, German and in English Characteristic are the different quotation marks in which the quotation 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 to check whether or not the spelling and grammar in the text is correct. Although the attribute can be set on almost all elements, the effect will only be noticeable on form fields ( , ) and editable elements (they have the contenteditable attribute set).

Used to style an element using CSS rules.

The tabindex attribute sets the order in which focus is received 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 from any number. If the tabindex values ​​of the elements are the same, then their order of appearance in the code is taken into account.

Creates a text tooltip that appears when you hover over an element. The type of this hint depends on the browser and settings operating system and cannot be changed using HTML code or styles.