{"id":7967,"date":"2016-08-26T12:00:19","date_gmt":"2016-08-26T08:00:19","guid":{"rendered":"http:\/\/www.idg.net.ua\/blog\/?p=7967"},"modified":"2017-12-14T07:33:22","modified_gmt":"2017-12-14T03:33:22","slug":"sovety-html","status":"publish","type":"post","link":"https:\/\/idg.net.ua\/blog\/sovety-html","title":{"rendered":"\u0421\u043e\u0432\u0435\u0442\u044b \u043f\u043e HTML: \u0430\u0431\u0437\u0430\u0446\u044b, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u0444\u043e\u0440\u043c\u044b \u0438 SVG-\u0438\u043a\u043e\u043d\u043a\u0438"},"content":{"rendered":"<p>\u0412 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u043c \u043f\u043e\u0441\u0442\u0435 \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c, \u0430 \u0441\u0430\u0439\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u2014 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. <!--more-->\u042d\u0442\u0438\u043c\u0438 \u0441\u043e\u0432\u0435\u0442\u0430\u043c\u0438 \u043f\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u043d\u0435\u0434\u0430\u0432\u043d\u043e <a rel=\"nofollow\" href=\"https:\/\/hacks.mozilla.org\/2016\/08\/a-few-html-tips\/\" target=\"_blank\">\u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0430\u0441\u044c<\/a> Bel\u00e9n Albeza \u2014 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 Mozilla Developer Relations. \u041c\u044b \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0435\u0451 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u0438\u0445. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043a\u0430\u043a \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<br \/>\n&nbsp;<\/p>\n<h2 style=\"text-align: center;\">\u0421\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443<\/h2>\n<p>&nbsp;<\/p>\n<div class=\"divider\"><h5><span>\u0410\u0431\u0437\u0430\u0446\u044b<\/span><\/h5><\/div>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0442\u0435\u043a\u0441\u0442, \u0442\u043e \u0434\u0435\u043b\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u0430\u0431\u0437\u0430\u0446\u044b. \u0412 HTML \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u0442\u0435\u0433 <code>&lt;p&gt;<\/code> (<em>paragraph<\/em>). \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0442\u0435\u0433 <code>&lt;br&gt;<\/code> \u0441 \u0446\u0435\u043b\u044c\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0430\u0431\u0437\u0430\u0446\u044b, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u043e\u0433\u043e.<\/p>\n<p><span class=\"not-recommended\">\u041d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\r\nincididunt ut labore et dolore magna aliqua.\r\n\r\n&lt;br&gt;\r\n\r\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\naliquip ex ea commodo consequat.\r\n<\/pre>\n<p><span class=\"recommended\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\r\nincididunt ut labore et dolore magna aliqua.&lt;\/p&gt;\r\n\r\n&lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\naliquip ex ea commodo consequat.&lt;\/p&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u0422\u0435\u0433 <code>&lt;br&gt;<\/code> (<em>break row<\/em>) \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0441\u0442\u0440\u043e\u043a \u0432 \u0441\u0442\u0438\u0445\u0435 \u0438\u043b\u0438 \u043a\u0443\u043f\u043b\u0435\u0442\u0435 \u043f\u0435\u0441\u043d\u0438:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;p&gt;Oh mother, tell your children&lt;br&gt;\r\nNot to do what I have done&lt;br&gt;\r\nSpend your lives in sin and misery&lt;br&gt;\r\nIn the house of the Rising Sun&lt;\/p&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<div class=\"divider\"><h5><span>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438<\/span><\/h5><\/div>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0435\u0433 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043e\u0442 <code>&lt;h1&gt;<\/code> \u0434\u043e <code>&lt;h6&gt;<\/code>, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0442.&nbsp;\u043d. \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438, \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d. \u0422\u0430\u043a, <code>&lt;h1&gt;<\/code> (<em>heading 1<\/em>) \u2014 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, <code>&lt;h2&gt;<\/code> \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, <code>&lt;h3&gt;<\/code> \u2014 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u0442.&nbsp;\u0434. \u0422\u0435\u0433 <code>&lt;h6&gt;<\/code> \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a.<\/p>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 <code>&lt;h1&gt;<\/code> \u0441\u0430\u043c\u044b\u043c \u043a\u0440\u0443\u043f\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c, \u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u0432\u0441\u0451 \u043c\u0435\u043d\u044c\u0448\u0438\u043c \u0438 \u043c\u0435\u043d\u044c\u0448\u0438\u043c. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f \u0432 <a rel=\"nofollow\" href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#headings-and-sections\" target=\"_blank\">\u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435<\/a> \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0451 \u0434\u043e\u043b\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0430 \u043d\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 (\u0432\u0435\u0434\u044c \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0435\u0441\u0442\u044c CSS!).<\/p>\n<p><span class=\"not-recommended\">\u041d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;article&gt;\r\n    &lt;h1&gt;The Most Endangered Feline Species&lt;\/h1&gt;\r\n    &lt;h4&gt;Amur leopards&lt;\/h4&gt;\r\n    &lt;!-- ... --&gt;\r\n&lt;\/article&gt;\r\n<\/pre>\n<p><span class=\"recommended\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;article&gt;\r\n    &lt;h1&gt;The Most Endangered Feline Species&lt;\/h1&gt;\r\n    &lt;h2&gt;Amur leopards&lt;\/h2&gt;\r\n    &lt;!-- ... --&gt;\r\n&lt;\/article&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0438 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043f\u043e\u0434\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432, \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0438 \u0441\u0442\u0440\u043e\u043a \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u044e\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a. \u0412 <a rel=\"nofollow\" href=\"https:\/\/www.w3.org\/TR\/html5\/common-idioms.html#common-idioms\" target=\"_blank\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 W3C \u0441\u043a\u0430\u0437\u0430\u043d\u043e<\/a>, \u0447\u0442\u043e \u0432 HTML \u043d\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043d\u043e \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 (\u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u0433\u043e\u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432).<\/p>\n<p><span class=\"not-recommended\">\u041d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;header&gt;\r\n    &lt;h1&gt;Star Trek IV&lt;\/h1&gt;\r\n    &lt;h2&gt;The Voyage Home&lt;\/h2&gt;\r\n&lt;\/header&gt;\r\n<\/pre>\n<p><span class=\"recommended\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;header&gt;\r\n    &lt;h1&gt;Star Trek IV&lt;\/h1&gt;\r\n    &lt;p&gt;The Voyage Home&lt;\/p&gt;\r\n&lt;\/header&gt;\r\n<\/pre>\n<h2 style=\"text-align: center;\">\u0421\u043e\u0432\u0435\u0442\u044b \u043f\u043e HTML-\u0444\u043e\u0440\u043c\u0430\u043c<\/h2>\n<p>&nbsp;<\/p>\n<div class=\"divider\"><h5><span>\u041f\u043b\u044d\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u044b<\/span><\/h5><\/div>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>placeholder<\/code> \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;input&gt;<\/code> HTML-\u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u043b\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043d\u0430\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0442\u0435\u043a\u0441\u0442. \u0426\u0435\u043b\u044c \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u0430 \u2014 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f.<\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 <code>placeholder<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u043e\u043b\u044c \u0442\u0435\u0433\u0430 <code>&lt;label&gt;<\/code> \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u043b\u0438\u0448\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u043e\u043b\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, e-mail \u0438\u043b\u0438 \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430), \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u0438 \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u043e\u0433\u043e \u0436\u0435 e-mail \u043b\u0438\u0431\u043e \u043d\u043e\u043c\u0435\u0440\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430. \u0422\u0430\u043a\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 <a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/Accessibility\" target=\"_blank\">\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439<\/a>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0438\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0435\u0451.<\/p>\n<p><span class=\"not-recommended\">\u041d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;email&quot; placeholder=&quot;Your e-mail&quot; name=&quot;mail&quot;&gt;\r\n<\/pre>\n<p><span class=\"recommended\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label&gt;\r\n    Your e-mail:\r\n    &lt;input type=&quot;email&quot; placeholder=&quot;james.kirk@enterprise.uss&quot; name=&quot;mail&quot;&gt;\r\n&lt;\/label&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<div class=\"divider\"><h5><span>\u041a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445<\/span><\/h5><\/div>\n<p>\u041e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043b\u044e\u0434\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u0438\u043b\u0438 \u043f\u043b\u0430\u043d\u0448\u0435\u0442) \u0434\u043b\u044f \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u043e\u0432. \u0418 \u043a\u0440\u0430\u0439\u043d\u0435 \u0432\u0430\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0438\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u043f\u0440\u0438 \u043d\u0430\u0431\u043e\u0440\u0435 \u0442\u0435\u043a\u0441\u0442\u0430. \u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0432\u044b\u0431\u043e\u0440\u0435 <a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input#Attributes\" target=\"_blank\">\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430<\/a> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;input&gt;<\/code>.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f HTML5-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e <code>type=&quot;number&quot;<\/code> \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0446\u0438\u0444\u0440\u043e\u0432\u0443\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0431\u0443\u043a\u0432\u0435\u043d\u043d\u043e-\u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <code>tel<\/code>, <code>email<\/code> \u0438 \u0442.&nbsp;\u0434.<\/p>\n<p><span class=\"not-recommended\">\u041d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label&gt;Phone number: &lt;input type=&quot;text&quot; name=&quot;mobile&quot;&gt;&lt;\/label&gt;\r\n<\/pre>\n<p><span class=\"recommended\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f:<\/span><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label&gt;Phone number: &lt;input type=&quot;tel&quot; name=&quot;mobile&quot;&gt;&lt;\/label&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u0412\u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435: \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u0441\u043b\u0435\u0432\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d <code>type=&quot;tel&quot;<\/code>, \u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043f\u0440\u0438 <code>type=&quot;text&quot;<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/label-tel-text-compressor.png\" alt=\"HTML label tel \u0438 text \u2014 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c\" \/><br \/>\n&nbsp;<\/p>\n<h2 style=\"text-align: center;\">\u0421\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c<\/h2>\n<p>\u0421\u043a\u0430\u0436\u0438\u0442\u0435 \u00ab\u0434\u0430\u00bb SVG-\u0444\u0430\u0439\u043b\u0430\u043c! \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0432 \u0442\u0435\u0433\u0430\u0445 <code>&lt;img&gt;<\/code>, \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;img src=&quot;acolyte_cartoon.svg&quot; alt=&quot;acolyte&quot;&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c SVG-\u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0445\u0430\u043a\u043e\u043c \u0438 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u0430\u0451\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 (\u0432\u0435\u0434\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0441\u0451 \u0436\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f). \u0415\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u0440\u0435\u043a\u043b\u0430\u043c\u044b, \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u0435\u0431-\u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0435 \u0447\u0438\u0442\u0430\u043b\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c&#8230; \u0415\u0441\u043b\u0438 \u044d\u0442\u0438\u0445 \u0434\u043e\u0432\u043e\u0434\u043e\u0432 \u0432\u0430\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0432 \u0421\u0435\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0435\u0449\u0451 \u043c\u0430\u0441\u0441\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a rel=\"nofollow\" href=\"https:\/\/css-tricks.com\/svg-sprites-use-better-icon-fonts\/\" target=\"_blank\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u0418\u0434\u0435\u044f SVG-\u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0441\u0445\u043e\u0436\u0430 \u0441 <a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Images\/Implementing_image_sprites_in_CSS\" target=\"_blank\">CSS-\u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438<\/a>. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0445 \u0432\u0430\u0448\u0438\u0445 SVG \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 SVG \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u0435\u0433 <code>&lt;symbol&gt;<\/code>, \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;svg&gt;\r\n    &lt;symbol id=&quot;social-twitter&quot; viewBox=&quot;...&quot;&gt;\r\n        &lt;!-- actual image data here --&gt;\r\n    &lt;\/symbol&gt;\r\n&lt;\/svg&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0438\u043a\u043e\u043d\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 HTML \u0441 \u0442\u0435\u0433\u043e\u043c <code>&lt;svg&gt;<\/code>, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 ID \u0432 \u0444\u0430\u0439\u043b\u0435 SVG:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;svg class=&quot;social-icon&quot;&gt;\r\n    &lt;use xlink:href=&quot;icons.svg#social-twitter&quot; \/&gt;\r\n&lt;\/svg&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u0412\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 SVG \u2014 \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u043d\u044f\u0442\u0438\u0435. \u0427\u0442\u043e \u0436, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a rel=\"nofollow\" href=\"https:\/\/github.com\/w0rm\/gulp-svgstore\" target=\"_blank\">gulp-svgstore<\/a> \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432.<\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0438 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0442\u0435\u0433 <code>&lt;svg&gt;<\/code> (\u0432\u043c\u0435\u0441\u0442\u043e <code>&lt;img&gt;<\/code>), \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a \u043d\u0438\u043c \u0441\u0442\u0438\u043b\u0438 CSS. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0432\u0435\u0431-\u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438, \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0441 SVG-\u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.social-icon {\r\n    fill: #000;\r\n    transition: all 0.3s;\r\n}\r\n\r\n.social-icon:hover {\r\n    fill: #3b5998;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442, \u043f\u0440\u0430\u0432\u0434\u0430, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043f\u043e CSS: \u043a\u043e\u0433\u0434\u0430 SVG \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c (<code>&lt;use&gt;<\/code> \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <code>&lt;symbol&gt;<\/code>), \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 <a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Shadow_DOM\" target=\"_blank\">Shadow DOM<\/a>, \u0438 \u043c\u044b \u043b\u0438\u0448\u0430\u0435\u043c\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 CSS. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0434\u043b\u044f SVG \u0438 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>fill<\/code>) \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0442\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u0432\u0441\u0435 \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u043c\u044b.<\/p>\n<p>\u0412 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d SVG-\u0441\u043f\u0440\u0430\u0439\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438. \u0415\u0441\u043b\u0438 \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043e\u0433\u043e\u043d\u044c \u0444\u0430\u043a\u0435\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0441\u0432\u043e\u0439 \u0446\u0432\u0435\u0442 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f CSS (\u0435\u0441\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 RERUN).<\/p>\n<p data-height=\"265\" data-theme-id=\"light\" data-slug-hash=\"OXBQZq\" data-default-tab=\"html,result\" data-user=\"ladybenko\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/ladybenko\/pen\/OXBQZq\/\">SVG acolyte demo<\/a> by ladybenko (<a rel=\"nofollow\" href=\"http:\/\/codepen.io\/ladybenko\">@ladybenko<\/a>) on <a rel=\"nofollow\" href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>\u041d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e HTML \u0431\u044b\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u044b. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u0441\u043e\u0432\u0435\u0442\u043e\u043c \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435, \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u043c \u043f\u043e\u0441\u0442\u0435 \u043c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c, \u0430 \u0441\u0430\u0439\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u2014 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. <\/p>\n<p><span class=\"more-link\"><a href=\"https:\/\/idg.net.ua\/blog\/sovety-html\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<\/a><\/span><\/p>\n","protected":false},"author":6,"featured_media":8129,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,19,7],"tags":[],"_links":{"self":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/7967"}],"collection":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/comments?post=7967"}],"version-history":[{"count":63,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/7967\/revisions"}],"predecessor-version":[{"id":11422,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/7967\/revisions\/11422"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/media\/8129"}],"wp:attachment":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/media?parent=7967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/categories?post=7967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/tags?post=7967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}