What's new in HTML5? Five things to know about HTML5 New inline elements.
The HTML5 specification brings with it many changes of varying levels and varying importance. Fundamentally, key changes can be divided into 7 blocks:
a) Semantics (semantic meaning of language units)
HTML5 introduces a number of new semantic tags that allow you to more meaningfully organize the internal structure of web pages. This includes both block tags like header, footer, article, and text markup tags like mark, ruby, details. A number of existing HTML4 tags have been declared obsolete, individual tags have changed their meaning, and attributes have undergone certain changes.
b) Multimedia
HTML5 adds native support for multimedia content (audio and video) right in HMTL markup -- with the associated API for management.
c) Graphics
Working with graphics on the client side has become noticeably easier. The canvas element and a special JavaScript API for working with it have been added to HTML5. Canvas is a dynamic "surface" on which you can programmatically draw. HTML5 also officially includes the svg tag, which allows you to implement vector graphics described by the corresponding web standard SVG (Scalable Vector Graphics).
d) Web forms
New web form elements: types and attributes that allow you to extend the capabilities of traditional forms with built-in tools without the use of additional libraries - from hints in the input field (placeholder) and validation of entered values to special elements for entering dates and colors.
e) JavaScript APIs.
HTML5 includes new capabilities for moving objects (Drag & Drop), working with the history of transitions (History API), as well as a number of little things, such as the ability to make content editable right in the current location using Content Editable attributes.
f) New DOCTYPE
The DOCTYPE tag is a key component of web pages that claim to comply with standards: without it, the code will not pass the validator. DOCTYPE is also important for the page to display and function correctly in standards-compliant browsers.
In HTML 4 there were 3 types of element:
- 1. Strict
- 2. Transitional
- 3. With frames (Frameset)
Often, choosing one or another DOCTYPE element was quite difficult. In HTML5 DOCTYPE there is only one, it is written like this:
This short entry replaces the older, longer form:
g) Syntax
HTML 5 will have two syntaxes - "custom" HTML and XML. HTML syntax defines detailed parsing rules (including "error handling").
The XML syntax is compatible with XHTML1 documents and its implementations. To use this syntax, the MIME (Multipurpose Internet Mail Extensions) type must be declared as an XML type, and the elements must be constructed according to the XML specification.
Figure 2 - Basic HTML5 Properties
IntroductionHTML 4 has been with us for about 10 years. During this time there were no serious steps to improve it. Of course, XHTML came along, however, it simply tightened the rules and forced us to write better and higher quality code. At the same time, you are completely concerned about compliance with the standard. HTML 5 is designed to do more. It adds a series of very important innovations.
Work on HTML5 began back in 2004, but only now (2009) is it beginning to attract serious interest. Browser support is increasing, and the element I like best (CANVAS) is supported by 4 of the 5 most common browsers. At the same time, it is not entirely realistic, although possible, to use HTML 5, since the new standard is not supported in MSIE.
So what's new in HTML 5?is a 2D graphics drawing box controlled using JavaScript. You can use it to create graphs and other dynamic images.
The tag makes it easy to add video clips to HTML pages. It may contain src, autoplay and loop attributes. The tag also allows you to specify a text description for the video (for example, for blind people). Ideally, this should be a full text interpretation of the video.
The tag is very similar to , but is intended for audio files. Unexpected, isn't it?
Context menusHTML5 also provides a method for easily adding context menus to a web page. Perhaps such menus are not very useful for ordinary sites. But for applications in which many functions would like to be grouped and displayed contextually, this opportunity is just right.
Since HTML 4 is poorly structured, new elements were added to version 5 of the specification to correct this shortcoming:
- - section or paragraph.
- - page header (not to be confused with)
- - page footer.
- - contains a set of links to other pages. For example, you can place the navigation for your site there.
- - this tag can include, for example, a blog article.
- - can be used to provide additional information to a text block.
- - can be used, for example, to create diagrams.
The HTML5 standard introduces new elements that allow you to specially highlight text fragments containing times and numbers:
- - marks a piece of text. You can, for example, mark the terms found in the list of search results.
- - you can use this tag to display the time or date in a text block.
- - to represent numbers in a certain range. It can have various attributes: value, min, max, low, high and optimum.
- Can be used to display a process status indicator. It has a couple of attributes: value and max.
HTML5 adds a number of new types for data entry fields:
- datetime
- datetime-local
- month
- number
- range
Some of them are widely used in desktop application user interfaces. And, most likely, they will already be familiar to all your users.
Deprecated elementsThe following HTML elements are deprecated:
- acronym
- applet
- basefont
- center
- frame
- frameset
- isindex
- noframes
- noscript
- strike
The syntax for setting a document's encoding in HTML5 is now very simple:
Interactive innovationsSeveral innovations that will make creating websites and web applications easier and more enjoyable:
- - additional information about something. For example, this tag can be used in browsers to implement a tooltip. A tag may have an open attribute, which indicates whether the content of the tag will initially be shown to the user or not.
- - Unlike traditional tables (which are intended to be static), this tag can be used to represent an interactive set of data. For example, for a table with selecting rows or columns, inline data editing, sorting, etc.
- - previously deprecated, the tag has returned to the HTML5 standard in a new guise. Now it can contain, for example, elements that call the corresponding commands. This element can be used to present a toolbar or context menu (see above). A tag can have label and icon attributes. They can be added to create multi-level menus.
HTML5 has made it much easier to declare DTDs: Declaring DTDs has become prettier and, I believe, easier to remember. This is most likely a result of HTML no longer being linked to SGML.
Optional href in linksThe href attribute is now optional because links can be used in conjunction with scripts. This will probably be useful in web applications.
async attributeThe attribute gives the browser a hint that the script block can be executed asynchronously, instead of waiting until the page has fully loaded.
ConclusionNaturally, not all browsers will support the entire standard (I think the reader just remembered his “favorite” MSIE). But support will come over time. And the new HTML 5 elements have been designed keeping the current situation in mind. On the other hand, most browsers already partially support the specification. For example, the tag is supported in Firefox, Opera, Chrome and Safari. Plus, as far as I know, Firefox 3.5 will support and .
So, we are looking forward to it.
For those interested, the HTML 5 specification can be found at the following link -
HTML 5 is a new version of the most popular markup language.
For more than 10 years, the hypertext markup language HTML has remained virtually unchanged, which was very strange, given the enormous speed of development of Web technologies, and finally, a change happened and HTML 5 appeared.
HTML 5 adds several new elements and attributes, and removes several old ones (such as font and center ).
The following elements have been added:
1) header.
2) footer.
4) section.
5) article.
6) aside.
7) figure .
8) dialog.
9) m (mark) .
10) time.
11) meter.
12) progress.
13) video.
14) audio.
15) details.
16) datagrid.
17) menu.
18) command.
Everything else remains unchanged. That is, there will be no problems with it, provided that you are familiar with the standard one. Actually, everything remains the same, only new features have been added.
Thanks to the innovations of HTML 5, the work of Webmasters can be significantly simplified by simplifying the same markup.
Surely, you are wondering: “Will HTML 5 work with older browsers?” The answer is: "Of course, yes, but new elements, of course, will not be displayed." Or in other words, everyone will see the new pages, but owners of modern browser versions will see a little more and differently.
I am sure that in the near future HTML 5 will be seen by the same percentage of users as HTML 4, which is already more than 10 years old, is now seeing.
We will talk to you about using the new features of HTML 5 in the following articles.
HTML5 - the new generation. More than 10 years have passed since the release of the HTML 4.01 recommendation (1999), and therefore a lot of changes and additions should be expected. The HTML5 specification is currently still under development. The World Wide Web Consortium does not develop standards, but only issues recommendations. It all starts with working discussions, then a working draft is initiated, then a candidate for the role of recommendation is released, and only then the specification finally receives the status of a recommendation. Currently, work on HTML5 is still at the working draft stage. Despite this, most of the most popular Internet browsers already partially support HTML5 innovations. Before making a brief overview of them, I will repeat that not all browsers implement this functionality and not yet in full. Today we can count on Opera, Chrome, Firefox, Safari and Internet Explorer supporting HTML5 to varying degrees.
What's new in HTML5And there really is a lot that is new. Now web developers will have a number of additional features, such as drawing geometric shapes on the web canvas, built-in drag-and-drop capabilities, and playing video and audio files (previously this could only be done using plug-in components such as Adobe Flash Player) and much more, which will be discussed a little later. To begin with, I would like to say a few words about the general trends in the development of HTML.
The part of the HTML5 specification that sticks out in the form of new tags is just the tip of the iceberg. Most of the advanced features of HTML5 are only available using a scripting programming language, which is the basis of client-side web programming. If we take the same drawing functionality implemented using the tag, then we are not talking about “drawing markup” using geometric shape tags, as one might assume. The canvas layout ends with placing the canvas element on the page and that's it. The drawing itself is a JavaScript function that, once accessed to the canvas, will draw shapes on it in much the same way that regular Windows applications display graphics to windows via GDI (Graphics Device Interface) interfaces. Thus, the HTML5 specification imposes quite serious requirements on Internet browsers in terms of implementing work with JavaScript, which largely regulate the program interface () for working with the document object model (DOM). This is good news, since many people know that different browsers can organize work with the object model through program interfaces that differ from each other. In part, the specification of the software interface is the merit of the organization Web Hypertext Application Technology Working Group (WHATWG), which is making efforts to standardize not only the markup language but also the APIs used in applications written in scripting languages such as JavaScript. The WHATWG is also involved in development with the W3C.
We can also conclude that the authors of HTML5 tried to transfer the implementation of some popular and sought-after web programming tasks to the responsibility of the Internet browsers themselves. For example, using HTML5, you can quite easily implement the functionality of dragging and dropping elements, which has become so popular in the user interfaces of online stores (selecting products to the cart). Previously, to do this, you had to write a script in JavaScript using various kinds of supporting libraries, such as . It's now much easier to implement drag and drop by defining a number of additional attributes and adding a few event handlers for the tags you need. Organizing “drag&drop” using jQuery is also not particularly complicated, but in the case of HTML5, we will be dealing with a single recommendation for all Internet software clients, and this is a completely different level of support and guarantee of cross-browser compatibility. It turns out that browsers that support HTML5 recommendations will now provide the ability to save and restore session settings in the context of the web session itself. For example, when the page is reloaded, the information previously entered on it will not be lost, but will be restored from the environment of the current session. This is already “entering the territory” of server-side web programming, since previously this could not be done only using HTML and JavaScript.
Well, now a list of the most notable innovations in HTML5:
Drawing on the web canvas or using the canvas elementAs already mentioned, the main part of the recommendations regarding the use of the new element is a specification for a software interface for displaying graphics on it. To begin, you place a tag on the page a certain width and height, then in JavaScript code you access it (for example, by id) and start drawing on it. Drawing comes down to sequentially defining the line style strokeStyle , the fill style fillStyle and calling drawing methods such as moveTo (move the pen), lineTo (draw a line), arc (draw an arc), etc. Below, see an example - the simplest tool for drawing with a mouse. Below is its source code in JavaScript and HTML markup. To draw with a pen, press the left mouse button and move the cursor across the canvas. In the "lines" or "polygons" mode, simply click sequentially on the canvas, thereby indicating the vertices of polylines or area objects.
Example of drawing on a canvas elementAn example of implementing drawing operations on an element using HTML5.
JavaScript source code//Code of the current operation var operation=0; //Operation status var active=false; //Start a graphical operation function startOperation(e) ( if (operation==0) return; if (active) return; var context = getContext(); context.strokeStyle = getColor("stroke"); context.fillStyle = getColor( "fill"); context.beginPath(); var point = getPoint(e); context.moveTo(point.x, point.y); active = true; ) //Completing the graphical operation function stopOperation() ( if (! active) return; var context = getContext(); context.closePath(); active = false; ) //Mouse events function mouseDown(e) ( var e = e || window.event; if (!active) ( startOperation( e); return; ) else ( var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); if (operation == 3) context .fill(); ) return true; ) function mouseUp(e) ( var e = e || window.event; if (!active || operation != 1) return; stopOperation(); return true; ) function mouseMove( e) ( var e = e || window.event; if (!active || operation != 1) return; var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); return true; ) function getColor(control) ( var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; ) //Canvas element function getCanvas() ( return document. getElementById("canvas"); ) //Context for displaying 2d graphics on the canvas element function getContext() ( return getCanvas().getContext("2d"); ) //Element "selected operation" function getSelected() ( return document. getElementById("selected"); ) //Relative coordinates of the mouse cursor function getPoint(e) ( var x = event.pageX || event.x; var y = event.pageY || event.y; var rect = getCanvas() .getBoundingClientRect(); var point = (); point.x = x - rect.left; point.y = y - rect.top; return point; ) //Select an operation function selectOperation(code) ( stopOperation(); operation = code; switch(operation) ( case 1: ( getSelected().innerText = "Selected: pen"; break; ) case 2: ( getSelected().innerText = "Selected: lines"; break; ) case 3: ( getSelected().innerText = "Selected: polygons"; break; ) ) )
Source HTML codepen lines polygons Selected: line color fill color
Drag and drop elementsThis is nothing more than browser support for the classic “drag and drop” model, which is very popular in regular GUI applications. For the elements that you will “drag”, define the draggable attribute, and for the elements on which you will “throw” the dragged elements, you define event handlers ondragenter , ondragover and ondorp . That's all, actually. Example below.
HTML5 drag and drop example - "Basketball Basket"An example of implementing drag and drop operations (dragging elements) using HTML5.
Source HTML codeHTML5: Drag and Drop html, body ( font-family: Arial font-size: 11px; ) .basket ( border: 1px solid #777; width: 105px; height: 120px; padding: 10px; border-radius:0 0 10px 10px; background-color: #eee; box-shadow: inset 0px 0px 5px #777; ) .basket .ball ( width: 30px; height: 30px; border-radius:15px; box-shadow: 5px 5px 10px #777; float: right; ) .ball ( border: 1px solid #FF7F50; width: 20px; height: 20px; border-radius:10px; background-color: #FF8C00; box-shadow: 0px 0px 5px #777; float: left; margin: 1px; ) function startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer.effectAllowed="move"; return true ; ) function endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) function drop(e) ( var e = e || window.event; e .target.appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; return false; ) ...
Playing video and audio filesEverything is quite simple here; there would be something to reproduce and where. Place tags And on your page, define the src attribute for them, indicating the playback source, and wait for Internet browsers to learn to process these wonderful instructions and play the most common formats.
New custom web form elementsHTML5 promises new element types , which control the input of an Internet address, email address, numerical values, date, time, color, etc. If your browser already supports all these innovations, then below you will see how it does it. If the browser does not support all new element types, then those that it does not yet know how to work with will look like regular text input fields.
User ControlsElement variants with different type attribute values:
If the address value does not match the format url, then after clicking [confirm], the browser will attempt to correct it. If it cannot do this, it will display an error message. If the email value does not match the format email, then after clicking [confirm], the browser will either correct the address or report an input error.
Visualization of numerical valuesPresentation of a numerical value in the form of a scale with the ability to indicate intervals below the low norm and above the high norm, as well as the optimal value optimum.
Element:
Visualization of the execution process. You can only specify the maximum max and current value.
Element HTML Source Code
Number from the interval:
Integer:
Date and time:
Date of:
Time:
Month:
A week:
Color:
url:
email:
It will be possible to independently manage the transition to previously loaded pages using JavaScript and the object history. For example, calling window.history.length will return the “history length”, and calling window.history.back() , window.history.forward() or window.history.go(stepCount) will perform the appropriate transitions. Below is a small example:
Forward>
Saving session state
This great functionality will allow you to save and restore session data. We filled out the order, went to view the product, returned (using the link) again to filling out the order, but the previously entered data was still there. Previously, in order to provide such a page property, it was impossible to do without additional efforts on the server side of the web application. It will now be possible to save data in the context of a web session ( sessionStorage) or locally in the browser's RAM ( localStorage). sessionStorage is supposed to allow data to be retained as long as the session in which it was initialized is active. The stored data can be accessed from various website pages loaded by the browser. The option with localStorage, apparently, should save data while the browser itself is open. Since access to localStorage should always be available, even if there is no connection with the server, any page opened by the browser can receive data from localStorage. The session state in both cases is a set of key-value pairs accessed by calls to xxxStorage.setItem(key, value) and xxxStorage.getItem(key) .
Example: See the section on editing element content using the new attribute contenteditable, introduced in HTML5, is. Two buttons have been added below, one of which saves the contents of the edited block, and the second restores it. Click [Save], edit the contents of the block and click [Restore]. If your browser supports HTML5 functionality sessionStorage, then the contents of the block contenteditable will be restored.
Restore
Save Restore
If your page contains elements that load the contents of other pages: not only pages of your site, but also pages from a completely different domain, then with the implementation of HTML5 recommendations it will be possible to exchange messages with such windows. The page sending the message does this using the window.postMessage(message, target) function call, and the page receiving the message must contain an “onmessage” event handler, where it must already process the message text event.data if it is indeed its recipient - corresponds value event.origin . Before the advent of this mechanism, it was not possible to communicate with various Internet resources on the client side. An example of the simplest implementation of communication between two pages using the new HTML5 message mechanism is given below. At first glance, it may seem that nothing special is happening in the example. More precisely, it is not clear why all this is needed. In fact, messaging can become popular when creating information portals that combine various Internet services in one place. For example, suppose there is a certain Internet service, the services of which can be used only after filling out a voluminous electronic application. Also, suppose there is a client who quite often uses the services of this service, but his requests differ little from each other each time (most of the parameters are always the same). If such an Internet service, in addition to the electronic form for filling out an application, also supported a “message receiver” for automatically placing an order for its services, then its clients would be able to “drag” the window of this service onto their pages (using the element ), create there own (optimized for yourself) application forms and functions for sending them to the target service in the form of messages. Most of the parameters in this case would be generated automatically, for example, client details. Of course, similar communication can be implemented through HTTP requests from the client to the server, in the header of which the required parameters are passed, but it is worth noting that in the case of the HTML5 message mechanism, there is zero traffic when passing parameters, since everything happens on the client side.
Example of two pages exchanging messagesAn example of implementing message exchange between pages using HTML5.
Source code of the message source pagefunction init() ( document.getElementById("form").onsubmit = sendMessage; ) function sendMessage() ( var location = window.location; var message = document.getElementById("message").value; var target = document. getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host); return false; ) ...
message_source.html:
Failed to load messages_target.html!Message text
Source code of the message receiver page
function init() ( if (window.addEventListener) window.addEventListener("message", receiveMessage, false); else window.attachEvent("onmessage", receiveMessage); ) function receiveMessage(event) ( document.getElementById("target" ).innerHTML = event.data; document.getElementById("origin").innerHTML = "from " + event.origin; ) ...
messages_target.html:
I'm waiting for a message... from... Editing element contentNow, by defining the contenteditable attribute, you can make individual markup elements editable, for example, blocks of text, lists, etc. Using the designmode attribute, you can make the entire page editable. This functionality can be useful for organizing feedback with the owner of the resource, for example, for filling out and sending him an application, order, or something else like that. You create an HTML page of the form in its original form and give it to the user to fill out. After filling out, the user confirms the entered data, and the edited document is sent to the server. An example of editable markup is shown below:
The contents of this block can be edited because the attribute is defined for it contenteditable:
When editing table cells, the width of the columns and the height of the lines change automatically.
To enter a new list item, press .
- List item 1
- List item 2
- List item 3
After adding a new item to the list, the numbering will be updated automatically.
Support expected SVG- vector graphics markup language based on . The graphics will be inserted into the markup, which is logical, using the tag , for example like this:
If you see the geometric shapes below, it means your browser already supports svg.
Mathematical ExpressionsSupport is also expected MathML- a markup language for mathematical expressions based on XML. Here is an example of marking the formula for calculating the length of a side of a triangle using the cosine theorem:
a = b 2 + c 2 - 2 b c cos α
If you see a formula with a square root symbol, then your browser already understands MathML.
A = b 2 + c 2 - 2 b c cos α
Other markup elementsFirst of all, I would like to highlight a group of new page markup elements that did not exist explicitly before. These include the tag - article, note, news, etc.; - article title or header - footer or footer - section or chapter of the article. Why is this needed if the same thing can be done using elements different classes? This is necessary so that the meaning of your markup is also clear to those who are trying to analyze it. I’m not talking about the person reading your text (he doesn’t see the markup, everything is clear to him without it), but about automated systems and, first of all, this applies to search engines. Semantic load is very important for search engines when calculating the relevance of your pages to a specific search query. In this context, the element deserves special attention , because it is designed to highlight the block with the main navigation links on your page. Perhaps search engines will treat such links differently. Below is a summary table of the new HTML5 tags that add meaning to the markup.
| Article, news, note, comment or any other type of individual publication. Tag article combines information related to one topic or issue. One element article may include other elements article(example below). | |
| Remark, digression. Tag aside can also be used to highlight portions of text that are not related to the main content of the page, for example to place advertisements. | |
| A block of detailed information that can be expanded upon request. | |
| Signature of the drawing. Tag figcaption used inside a tag figure. | |
| Drawing with signature. This element must contain an image img and signature figcaption. | |
| Footer. Tag footer it makes sense to also place it inside a tag article to indicate the author of an article or note. | |
| Page title or introduction to the article. When placed inside a tag article to tag header you can include a title, a short description of the publication, and links to related materials. | |
| Heading grouping h1 - h6 into a multi-level header. | |
| Mark. Tag mark It makes sense to use if you need to highlight part of the text with a different style and refer to it from another place in the document. | |
| Block of navigation links. | |
| Page section, article chapter. When placed inside an article (tag article) can be interpreted as its own separate chapter. |
Below is an example of HTML markup using the listed tags.
HTML5 has not yet become a recommendation, and there is controversy over the use of its "semantic tags" such as And already quite a lot. Nobody really knows yet how they should be inserted into markup correctly, but there are a number of tips for using the new HTML5 structural tags, which are difficult to argue with, since their meaning is obvious. Here are some of them:
Comment text
Published...That’s all for me about the new features of the hypertext markup language that should appear with the release of the HTML5 recommendation.
What's new in HTML5 that wasn't in HTML4?And basically everything is new. The HTML5 specification brings with it many changes of varying levels and importance. Fundamental changes can be divided into several blocks:
- Semantics of language. HTML5 introduces a number of new semantic tags that allow you to more meaningfully organize the internal structure of web pages.
Let's look at the most famous of them:
- nav - used to create a navigation bar;
- aside - is a unifying tag, most suitable for highlighting a sidebar. It may include both nav blocks and other non-navigation elements (advertising banners, author’s photo, social network buttons, etc.);
- section is also a unifying tag. Moreover, it can act in different roles: either divide the page into several thematic areas, or divide the article itself on the page into separate sections;
- article - serves to split the page into separate articles. Both section and article tags have a number of interesting features. For example, you can now safely use the first-level H1 heading on one page several times, which was previously unacceptable;
- hgroup - the tag is designed to group page headings into one logical unit;
- video - serves for simple insertion of video on site pages;
- audio - also designed for simple insertion of media content into website pages;
- canvas - creates an area in which, using JavaScript, you can draw various objects, display images, transform them and change properties.
You can find out about other tags from htmlbook.ru.
- Multimedia. HTML5 now supports multimedia content (audio and video player) in HMTL markup out of the box - with the corresponding API for controlling playback and codecs.
- Graphic arts . Working with graphics has become much easier, thanks to the canvas tag and a special JavaScript API for working with it. Also, HTML5 officially includes the svg tag, which allows you to implement vector graphics described by the corresponding web standard (SVG, Scalable Vector Graphics).
- Web forms. New web form elements: both types and attributes that allow you to expand the capabilities of traditional forms with built-in tools, without using additional libraries for validating input data and tooltips in forms.
- JavaScript API. An API for working with graphics and multimedia, new advanced capabilities for moving objects and working with the history of transitions (History API), as well as a number of little things, like the ability to make content editable right in the current location using Content Editable attributes.
- Much more. Advanced network communications. Significantly improved data storage. Web Worker tools for executing background processes. WebSocket interface for establishing a persistent connection between a resident application and the server. Increased speed of saving and loading pages. CSS3 support for UI control, ensuring HTML5 is content-centric.
So, it is obvious that the HTML5 format demonstrates a fundamentally new approach to creating effective and memorable graphics, interactive elements and other components of high-quality web design and interface. This gives an undoubted advantage - the ability to avoid flash elements, which create certain difficulties in loading pages. At the same time, it still takes some time to load such pages. In addition, to work correctly with HTML5, you need a computer with the appropriate system capacity, and browser developers are too lazy to add full support for all HTML5 features.
