a! HTML5. Currently, it is already actively used when developing web interfaces and applications. We all know that HTML5 brought many new tags, attributes and elements. Some of them are really useful for our sites. Thus, in this article, I will briefly tell about several useful and important HTML5 tags and attributesYou need to know and use in practice!
Structural markup HTML5
A few new tags appeared in HTML5, which are designed to replace the already seized Div blocks (not all of course 🙂). Externally, so to speak, nothing has changed, but in essence new tags carry a semantic (semantic) load, and strictly define its place and role for each block:
- - determines the "basement", a web pages of the site or partition, in which additional information is usually accommodated in the cat;
- - determines the navigation area, as a rule list of links;
The form
New Types Input Fields
HTML5 introduced new types input fields. They allow you to write more semantically correct code adapted for mobile devices. For example, when using the Email type, automatic validation of the entered text occurs, on the identity of the email address and so on.
1 | <iNPUT TYPE \u003d "URL"\u003e
|
Regular validation expressions
Before the appearance of HTML5, when using the form on your site, you had to skip the entered text through Javascript. for check. Now with HTML5 and the Pattern attribute, you can define a regular expression template to verify the data.
1 |
|
Autocomplete with HTML5 DataList
Using the DataList HTML5 element allows you to create a data list for autofill input fields. Super useful!
1 |
|
Autofocus Field Fields
The autofocus attribute will allow you to set the focus to any form element (including the button).
Hidden Elements with HTML5
HIDDEN attribute entered in HTML5, which allows you to hide a certain element, like this applies to CSS using Dispaly: None
PellentSQue Habitant Morbi Tristique Senectus et Netus .... Pellentesque Habitant Morbi Tristique Senectus et Netus et Malesuada ... Create an accordion for the site - In HTML5, a new attribute appeared for references. Now to specify the browser that the link must be downloaded, and not to open enough to use this attribute. To stay up to date with fresh articles and lessons watch Long ago, during XHTML / HTML4, the developers had only a few features that they could use in order to store arbitrary data related to DOM. You could invent your own attributes, but it was risky - your code would not be valid, browsers could ignore your data, and it could cause problems if the name coincided with standard HTML attributes. Therefore, most developers were tied to the Class or REL attributes as they were the only reasonable way to store additional lines. For example, suppose we create a widget for displaying messages like a temporary message line in Twitter. Ideally, JavaScript should be able to configure without the need to rewrite the code, so we define the user ID in the Class attribute, for example:
Title 2.
Attribute Download
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 this user.
Let's say we would also like to set the maximum number of messages, and skip messages over six months (180 days):
Our attribute class It is very quickly climbing - it is easier to allow an error, and the analysis of the strings on JavaScript becomes more complicated.
HTML5 Data Attributes
Fortunately, in HTML5, the ability to use custom attributes was introduced. You can use any name in the lower register with the prefix data-, eg:
Custom Data Attributes:
- these lines are in them you can store any information that can be represented or encoded as a string, such as JSON. Types must be brought using JavaScript
- should be used in cases where there are no suitable HTML5 elements or attributes
- apply only to the page. Unlike microformats, they must be ignored by external systems, such as search engines and search robots
Example No. 1 of processing on JavaScript: GetAttribute and SetAttribute
All browsers allow you to get and change the DATA attributes using GetAttribute and SetAttribute methods:
Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.getattribute ("Data-List-Size"); msglist.setattribute ("Data-List-Size", + Show + 3);
It works, but should only be used to maintain compatibility with old browsers.
Example # 2 processing on JavaScript: Data () method jQuery library
Starting from JQuery 1.4.3 Data () method processes HTML5 Data attributes. You do not need to explicitly specify the prefix data-So such code will work:
Var msglist \u003d $ ("# msglist"); var show \u003d msglist.data ("List-Size"); msglist.data ("List-Size", Show + 3);
But be that as it may, keep in mind that jQuery is trying to convert values \u200b\u200bof such attributes to the sweeping types (Boolean values, numbers, objects, arrays, or null) and affect DOM. Unlike setAttribute., Method data () physically will not replace the attribute data-List-Size - If you check its value outside jQuery - it will still remain equal to 5.
Example No. 3 of processing on JavaScript: API for working with data sets
And finally, we have an API to work with HTML5 data sets, which returns the DomStringMap object. It must be remembered that DATA attributes are displayed in the object without prefixes data-From the names are removed signs of hyphena, and the names themselves are converted to CamelCase, for example:
| Attribute name | Name in the data set API |
| data-User. | user. |
| data-Maxage. | maxage. |
| data-List-Size | listsize |
Our new code:
Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.dataset.listsize; msglist.dataset.listsize \u003d + show + 3;
This API is supported by all modern browsers, but not IE10 and below. For such browsers, there is a workaround, but, probably, it is more practical to use jQuery if you write for old browsers.
HTML - Hypertext Marking Language. It is based on the so-called tags. Tags - these are some elements of the overtakes that specify the format and properties of the web page elements. On the same page, we have collected the current HTML tag directory for you.
In total there are more than a hundred markup elements. Each has a number of attributes and its own syntax. HTML tag guide will help to quickly find the item you need.
List of html tags
The table below shows the list of HTML5 tags with a brief description in Russian.
| Tag | Short description |
|---|---|
| Comment. | |
| Defines the type of document. | |
| Link, hyperlink, anchor. | |
| Determines the text as an abbreviation. | |
| Contact Information author or owner of the document. | |
| Determines the area on the map image | |
| Article | |
| Content aside (content is not the main on the page by meaning) | |
| Allows you to insert a reproducible audio file. | |
| Bold text. | |
| Specifies the basic URL or target attribute for relative references in the document. | |
| The area where the writing of the text may have other directions. | |
| Sets the direction of writing text. Unlike The direction indicates the physical direction | |
| Quote. | |
| Specifies the Body Document area. | |
| Line break. | |
| Clickable button | |
| Used to draw graphics using scripts | |
| Signature tables. | |
| Footnote on the name of the material. | |
|
Used to insert a computer code in text form. |
| Specifies the characteristics of the columns in the table. | |
| Specifies a group of one or more table columns for formatting. | |
| Used to determine predefined options to choose when entering in the text field | |
Determines the description of the term from the tag
|
|
| Text that is removed in new version Document. | |
| Defines additional information that the user can view or hide | |
| Indicates that the contents are the term. | |
| Determines the dialog box or interactive element | |
| Block element is one of the main elements of the layout. | |
| Defines a list of definitions. | |
The name of the term in the list of definitions
|
|
| the text dedicated in meaning (usually, text selected in italics). | |
| Container for external application | |
| Group of related elements in the form | |
| Title for |
|
| Determines the autonomous group of several elements (for example, the picture with the signature) | |
| footer | |
| Defines the form of user input | |
- |
HTML headers of different levels: , , , |
| Indicates the area of \u200b\u200bthe HEAD document. | |
| Block header | |
| Horizontal line - thematic separator. | |
| Root element. Reports the browser that this document is an HTML document. | |
| Selects text in italics. | |