{"id":322351,"date":"2021-04-29T21:00:09","date_gmt":"2021-04-29T21:00:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=322351"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=322351","title":{"rendered":"HTMHell \u2014 \u0430\u0434\u043e\u0432\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p><em>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0441 \u0441\u0430\u0439\u0442\u0430&nbsp;<\/em><a href=\"https:\/\/www.htmhell.dev\/\" rel=\"noopener noreferrer nofollow\"><em>HTMHell<\/em><\/a><em> &#8212; \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u043b\u043e\u0445\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 HTML-\u043a\u043e\u0434\u0430, \u0432\u0437\u044f\u0442\u044b\u0445 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/em><\/p>\n<p><em>\u041a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u0430\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f\u043c\u0438, \u0432 \u0447\u0451\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c. \u0410 \u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c.<\/em><\/p>\n<p><em>\u0422\u0430\u043a \u043a\u0430\u043a \u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b \u0432 \u0435\u0434\u0438\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0437\u0430\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c\u0438 \u0438 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c\u0438, \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u0441\u0435\u0431\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442 \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u043a\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u043e\u043a, \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043c\u0435\u043d\u0435\u0435 &#171;\u0441\u0443\u0445\u0438\u043c&#187; \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c.<\/em><\/p>\n<h3>1. \u041a\u043d\u043e\u043f\u043a\u0430, \u0437\u0430\u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434 \u0441\u0441\u044b\u043b\u043a\u0443<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button role=\"link\" title=\"Name of website\" tabindex=\"0\"&gt;   &lt;img alt=\"Name of website\" src=\"logo.jpg\" title=\"Name of website\"&gt; &lt;\/button&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;button&gt;<\/code>. \u0414\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0441\u0430\u0439\u0442 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code> . \u041d\u0435 \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0433\u0430\u0439\u0442\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u043e\u0439 HTML-\u0442\u0435\u0433\u043e\u0432, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u044f\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<li>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c <code>&lt;a&gt;<\/code>, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0438 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f JavaScript<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>title<\/code> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;button&gt;<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437\u043b\u0438\u0448\u043d\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>tabindex<\/code> \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0432\u0435\u0434\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"https:\/\/\"&gt;   &lt;img alt=\"Name of website\" src=\"logo.jpg\"&gt; &lt;\/a&gt;<\/code><\/pre>\n<h3>2. \u042d\u043b\u0435\u043c\u0435\u043d\u0442  \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c role=&#187;button&#187;<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div tabindex=\"-1\"&gt;   &lt;div role=\"button\"&gt;     &lt;svg width=\"28\" height=\"24\"&gt; \u2026 &lt;\/svg&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 <code>&lt;div&gt;<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>role<\/code>, \u0432\u0435\u0434\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>&lt;button&gt;<\/code> \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>tabindex<\/code> . HTML-\u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u043e\u043a\u0443\u0441<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 <code>&lt;div&gt;<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u041d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0436\u0435 <code>&lt;button&gt;<\/code> \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 <code>Enter<\/code> \u0438\u043b\u0438 <code>Space<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/p>\n<\/li>\n<li>\n<p>SVG-\u0438\u043a\u043e\u043d\u043a\u0438, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0439 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 SVG \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0438 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432, \u0432\u043d\u0443\u0442\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<pre><code class=\"xml\">&lt;button&gt;   &lt;span class=\"sr-only\"&gt;Send&lt;\/span&gt;   &lt;svg width=\"28\" height=\"24\" aria-hidden=\"true\"&gt; \u2026 &lt;\/svg&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043a\u0441\u0442\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 <code>.sr-only<\/code> \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0434\u0435\u043b\u0430\u044e\u0449\u0438\u043c \u0435\u0433\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e <\/p>\n<pre><code class=\"css\">.sr-only {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }<\/code><\/pre>\n<h3>3. \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 &#8212; \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;img src=\"\/images\/edit.gif\" onclick=\"openEditDialog(123)\"&gt; &lt;img src=\"\/images\/delete.gif\" onclick=\"openDeleteDialog(123)\"&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;img&gt;<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u043e\u0442\u043d\u044e\u0434\u044c \u043d\u0435 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JavaScript, \u0430 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438 \u043d\u0430 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u043c \u0440\u0430\u043d\u0435\u0435 <code>&lt;div&gt;<\/code>, \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>img&gt;<\/code>  \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u0415\u0441\u043b\u0438 \u0431\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> , \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0431\u044b \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043e\u043a <code>Enter<\/code> \u0438\u043b\u0438 <code>Space<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 (\u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>alt<\/code> ). \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u043e<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21161: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438, \u0430 \u043a \u043f\u043e\u043c\u0435\u0449\u0451\u043d\u043d\u044b\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043d\u043e\u043f\u043e\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <\/em><code>alt<\/code><\/p>\n<pre><code class=\"xml\">&lt;button onclick=\"openEditDialog(123)\"&gt;   &lt;img src=\"\/images\/edit.gif\" alt=\"Edit product XY\"&gt; &lt;\/button&gt; &lt;button onclick=\"openDeleteDialog(123)\"&gt;   &lt;img src=\"\/images\/delete.gif\" alt=\"Delete product XY\"&gt; &lt;\/button&gt;<\/code><\/pre>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21162: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <\/em><code>alt<\/code> \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/p>\n<pre><code class=\"xml\">&lt;button onclick=\"openEditDialog(123)\"&gt;   &lt;span class=\"sr-only\"&gt;Edit product XY&lt;\/span&gt;   &lt;img src=\"\/images\/edit.gif\" alt=\"\"&gt; &lt;\/button&gt; &lt;button onclick=\"openDeleteDialog(123)\"&gt;   &lt;span class=\"sr-only\"&gt;Delete product XY&lt;\/span&gt;   &lt;img src=\"\/images\/delete.gif\" alt=\"\"&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>alt<\/code> \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432, \u0447\u0442\u043e \u043d\u0430\u043c \u0438 \u043d\u0443\u0436\u043d\u043e, \u0432\u0435\u0434\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0431\u043e\u0440\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <code>.sr-only<\/code><\/p>\n<pre><code class=\"css\">.sr-only {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }<\/code><\/pre>\n<h3>4. \u0421\u0441\u044b\u043b\u043a\u0430 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"https:\/\/example.com\"&gt;   &lt;button&gt;Example&lt;\/button&gt; &lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0412\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u043d\u0443\u0442\u0440\u044c \u0441\u0441\u044b\u043b\u043a\u0438, \u0432\u044b \u043f\u043e\u0434\u0430\u0451\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0430 \u0441\u0438\u0433\u043d\u0430\u043b\u0430: \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u0438 \u0441\u0441\u044b\u043b\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code>, \u0430 \u043a\u043e\u0433\u0434\u0430 <code>&lt;button&gt;<\/code>, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0438\u0434\u0435\u043e &#171;<a href=\"https:\/\/www.youtube.com\/watch?v=8XjwDq9zG4I\" rel=\"noopener noreferrer nofollow\">The Links vs. Buttons Showdown<\/a>&#187; \u043e\u0442 <a href=\"https:\/\/twitter.com\/marcysutton\" rel=\"noopener noreferrer nofollow\">Marcy Sutton<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"css\">.button {   \/* \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CSS, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u0438\u0434 \u043a\u043d\u043e\u043f\u043a\u0438 *\/ }<\/code><\/pre>\n<pre><code class=\"xml\">&lt;a href=\"https:\/\/example.com\" class=\"button\"&gt;Example&lt;\/a&gt;<\/code><\/pre>\n<h3>5. \u041a\u043d\u043e\u043f\u043a\u043e\u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430, \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u0443. \u0412\u0435\u0434\u0451\u0442 \u043e\u043d\u0430 \u043d\u0430 \u0444\u043e\u0440\u043c\u0443, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u044d\u0442\u043e\u0439 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/p>\n<pre><code class=\"xml\">&lt;a href=\"#form\" role=\"button\" aria-haspopup=\"true\"&gt; &amp;nbsp;&amp;nbsp;Register&amp;nbsp;&amp;nbsp; &lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043a \u0441\u0441\u044b\u043b\u043a\u0435 <code>role=\"button\"<\/code> , \u0432\u044b \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430, \u0445\u043e\u0442\u044f \u043e\u043d\u0430 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0430. \u041d\u0435 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-haspopup=\"true\"<\/code> \u043f\u0440\u0438\u0437\u0432\u0430\u043d \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043f\u0430\u043f, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/p>\n<\/li>\n<li>\n<p>\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f <code>padding<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0447\u0435\u0440\u0435\u0437 CSS, \u0430 \u043d\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>&amp;nbsp;<\/code><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"css\">.button {   \/* \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u0438\u0434 \u043a\u043d\u043e\u043f\u043a\u0438  *\/ }<\/code><\/pre>\n<pre><code class=\"xml\">&lt;a class=\"button\" href=\"#form\"&gt; Register &lt;\/a&gt;<\/code><\/pre>\n<h3>6. \u0421\u0441\u044b\u043b\u043a\u0430 \u0441 void-\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 &#171;href&#187;<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"javascript:void(1)\" onClick='window.location=\"index.html\"'&gt;Link&lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 JavaScript-\u043a\u043e\u0434 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u0438\u043b\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0430\u044f \u0435\u0433\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430 \u0438 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript. \u0410\u0434\u0440\u0435\u0441 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>href<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 100% \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438. \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0435\u0451 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435\/\u043e\u043a\u043d\u0435 \u0449\u0435\u043b\u0447\u043a\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u043a\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043d\u0435 \u0443\u0434\u0430\u0441\u0442\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"index.html\"&gt;Link&lt;\/a&gt;<\/code><\/pre>\n<h3>7. \u0414\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b &#171;id&#187; \u0438 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\"> &lt;table&gt;    &lt;tr id=\"body\"&gt;      &lt;td id=\"body\"&gt;        &lt;table id=\"body\"&gt;          &lt;tr id=\"body_row\"&gt;            &lt;td id=\"body_left\"&gt;\u2026&lt;\/td&gt;            &lt;td id=\"body_middle\"&gt;\u2026&lt;\/td&gt;            &lt;td id=\"body_right\"&gt;\u2026&lt;\/td&gt;          &lt;\/tr&gt;        &lt;\/table&gt;      &lt;\/td&gt;    &lt;\/tr&gt;  &lt;\/table&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>id<\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u0442\u0435\u0433\u0443 \u043e\u043d\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 (\u044d\u0442\u043e \u043f\u0440\u0438 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0430\u0439\u0442\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0441\u044f \u0432 2016 \u0433\u043e\u0434\u0443). \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u0431\u043b\u0438\u0446, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043a\u0443\u0449\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 HTML5-\u0442\u0435\u0433\u0438. \u042d\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u0433\u043e\u0432 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox\" rel=\"noopener noreferrer nofollow\">Flexbox<\/a>&nbsp;\u0438&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" rel=\"noopener noreferrer nofollow\">CSS Grid<\/a>, \u043d\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0430\u0431\u043b\u0438\u0446<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>ID<\/code>\u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;main id=\"body\"&gt;    &lt;aside id=\"secondary_content\"&gt; &lt;\/aside&gt;    &lt;article id=\"primary_content\"&gt; &lt;\/article&gt;    &lt;aside id=\"tertiary_content\"&gt; &lt;\/aside&gt;  &lt;\/main&gt;<\/code><\/pre>\n<h3>8. \u042f\u043a\u043e\u0440\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0432 \u0440\u043e\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"#\" onclick=\"modal.open()\"&gt;Login&lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;a&gt;<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b: \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043b\u0438 PDF-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0436\u0435 \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2013 \u0432\u044b\u0437\u0432\u0430\u0442\u044c JavaScript-\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>type=\"button\"<\/code> , \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/p>\n<\/li>\n<li>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0438\u043c \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0447\u0451\u0442\u043e\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 JavaScript, \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21161: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <\/em><code>&lt;button&gt;<\/code><\/p>\n<pre><code class=\"xml\">&lt;button type=\"button\" onclick=\"modal.open()\"&gt;Login&lt;\/button&gt;<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0446\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f, \u0430 \u0432\u044b\u0437\u043e\u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c.<\/p>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21162: \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/em><\/p>\n<pre><code class=\"xml\">&lt;a href=\"\/login\" onclick=\"modal.open()\"&gt;Login&lt;\/a&gt;<\/code><\/pre>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code> , \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>href<\/code>\u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0435 \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0447\u0442\u043e \u0438 \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435. \u0410 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 JavaScript<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0435\u043a\u0438\u0439 \u0444\u043e\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 JavaScript \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u043e\u043d \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b<\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/p>\n<h3>9. \u0417\u0430\u043f\u0440\u043e\u0441 \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u044f \u043d\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 Cookie<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;body&gt;   &lt;header&gt;\u2026&lt;\/header&gt;   &lt;main&gt;\u2026&lt;\/main&gt;   &lt;footer&gt;\u2026&lt;\/footer&gt;    &lt;div class=\"cookie_consent modal\"&gt;     &lt;p&gt;We use cookies\u2026&lt;\/p&gt;     &lt;div class=\"cookie_consent__close\"&gt;       &lt;i class=\"fa fa-times\"&gt;&lt;\/i&gt;     &lt;\/div&gt;     &lt;div class=\"cookie_consent__ok\"&gt;OK&lt;\/div&gt;   &lt;\/div&gt; &lt;\/body&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041e\u043a\u043d\u043e \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 Cookie \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c  \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e \u0444\u043e\u043a\u0443\u0441 \u0438 \u0431\u044b\u043b\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u041d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>&lt;div&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 , \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 <code>&lt;div&gt;<\/code>-\u043a\u043d\u043e\u043f\u043e\u043a  \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u0412\u0441\u0451 \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c \u0432\u0440\u043e\u0434\u0435 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0445 \u0447\u0438\u0442\u0430\u043b\u043e\u043a \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0440\u0430\u043d\u0435\u0435, \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e \u0432\u0441\u0435\u043c\u0443, \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 <code>&lt;div&gt;<\/code>  \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u0415\u0441\u043b\u0438 \u0431\u044b \u0432\u0441\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;button&gt;<\/code>, \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 <code>Enter<\/code> \u0438\u043b\u0438 <code>Space<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0435\u0451 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/fontawesome.com\/v4.7.0\/accessibility\/\" rel=\"noopener noreferrer nofollow\">Font Awesome \u0441\u043e\u0432\u0435\u0442\u0443\u0435\u0442 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438<\/a> \u043e\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c <code>&lt;i&gt;<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-hidden=\"true\"<\/code><\/p>\n<\/li>\n<li>\n<p>Font Awesome \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 Unicode-\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>::before<\/code>. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e. \u041d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u043a\u043e\u043d\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0430 &#171;\u0440\u0430\u0437\u044b&#187; (times), <a href=\"https:\/\/fontawesome.com\/icons\/times\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 fa-times &#8212; \u044d\u0442\u043e \u043d\u0435 &#171;\u043a\u0440\u0435\u0441\u0442\u0438\u043a&#187;, \u0430 &#171;\u0437\u043d\u0430\u043a \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f<\/a>&#171;. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: Talkback \u0438 VoiceOver \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u043e\u0437\u0432\u0443\u0447\u0430\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u0440\u0430\u0439\u043d\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c <code>Escape<\/code><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;body&gt;   &lt;div class=\"cookie_consent modal\"&gt;     &lt;h2 class=\"sr-only\"&gt;Cookie notice&lt;\/h2&gt;     &lt;p&gt;We use cookies\u2026&lt;\/p&gt;     &lt;button class=\"cookie_consent__ok\"&gt;OK&lt;\/button&gt;     &lt;button class=\"cookie_consent__close\"&gt;       &lt;span class=\"sr-only\"&gt;Close notification&lt;\/span&gt;       &lt;i class=\"fa fa-times\" aria-hidden=\"true\"&gt;&lt;\/i&gt;     &lt;\/button&gt;   &lt;\/div&gt;   &lt;header&gt;\u2026&lt;\/header&gt;   &lt;main&gt;\u2026&lt;\/main&gt;   &lt;footer&gt;\u2026&lt;\/footer&gt; &lt;\/body&gt;<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0431\u043e\u0440 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>.sr-only<\/code> , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432<\/p>\n<pre><code class=\"css\">.sr-only {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }<\/code><\/pre>\n<p><strong>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Uaqo4FOI_DY\" rel=\"noopener noreferrer nofollow\">Screen readers and cookie consents<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>10. \u042d\u043b\u0435\u043c\u0435\u043d\u0442  \u043a\u0430\u043a \u0437\u0430\u043c\u0435\u043d\u0430 \u0434\u043b\u044f <\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;section id=\"page-top\"&gt;   &lt;section data-section-id=\"page-top\" style=\"display: none;\"&gt;&lt;\/section&gt; &lt;\/section&gt; &lt;main&gt;   &lt;section id=\"main-content\"&gt;     &lt;header id=\"main-header\"&gt;       &lt;h1&gt;...&lt;\/h1&gt;       &lt;section class=\"container-fluid\"&gt;         &lt;section class=\"row\"&gt;           &lt;article class=\"content col-sm-12\"&gt;             &lt;section class=\"content-inner\"&gt;               &lt;div class=\"content__body\"&gt;                 &lt;article class=\"slider\"&gt;                   &lt;section class=\"slide\"&gt; \u2026 &lt;\/section&gt;                 &lt;\/article&gt;               &lt;\/div&gt;             &lt;\/section&gt;           &lt;\/article&gt;         &lt;\/section&gt;       &lt;\/section&gt;     &lt;\/header&gt;   &lt;\/section&gt; &lt;\/main&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/sections.html#the-section-element\" rel=\"noopener noreferrer nofollow\">\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0435\u043a\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e<\/a> (<code>&lt;article&gt;<\/code>, <code>&lt;aside&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;section&gt;<\/code>)  \u2013  \u044d\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u043e\u0437\u0430\u0433\u043b\u0430\u0432\u0438\u0442\u044c<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/sections.html#headings-and-sections\" rel=\"noopener noreferrer nofollow\">\u0421\u0435\u043a\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 \u043c\u043e\u0436\u043d\u043e<\/a>, \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0435\u043a\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u044b, \u0430 \u043b\u0438\u0448\u044c \u0441 \u0446\u0435\u043b\u044c\u044e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0417\u043d\u0430\u0447\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437 \u043d\u0438\u0445 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <code>&lt;div&gt;<\/code>, \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0449\u0438\u043c\u0438 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>&lt;section&gt;<\/code>, \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0440\u043e\u043b\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2013 region. \u0423\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;section&gt;<\/code> (\u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445) \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438\u0437\u043b\u0438\u0448\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0445 \u0447\u0438\u0442\u0430\u043b\u043e\u043a<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u2013 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;section&gt;<\/code> \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u043e\u0439 <code>&lt;div&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 &#8212; \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;header&gt;<\/code>. \u041e\u0431\u044b\u0447\u043d\u043e \u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0432\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;main&gt;<\/code> \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0441\u0435\u043a\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 <code>&lt;header&gt;<\/code> \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c, <a href=\"https:\/\/www.w3.org\/TR\/html52\/sections.html#the-header-element\" rel=\"noopener noreferrer nofollow\">\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/a><\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u0438 (\u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430) <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/structure\/\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0437\u0430\u0433\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c<\/a> \u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441 \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>aria-labelledby<\/code> \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u043b\u0435\u0433\u043a\u043e \u0435\u0433\u043e \u043d\u0430\u0439\u0442\u0438<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div id=\"page-top\"&gt;   &lt;div data-section-id=\"page-top\" style=\"display: none;\"&gt;&lt;\/div&gt; &lt;\/div&gt; &lt;main&gt;   &lt;section id=\"main-content\"&gt;     &lt;header id=\"main-header\"&gt;       &lt;h1&gt;...&lt;\/h1&gt;     &lt;\/header&gt;     &lt;div class=\"container-fluid\"&gt;       &lt;div class=\"row\"&gt;         &lt;div class=\"content col-sm-12\"&gt;           &lt;div class=\"content-inner\"&gt;             &lt;section aria-labelledby=\"sliderheading\" class=\"content__body\"&gt;               &lt;h2 id=\"sliderheading\" hidden&gt;New Products&lt;\/h2&gt;               &lt;ul class=\"slider\"&gt;                 &lt;li class=\"slide\"&gt; \u2026 &lt;\/li&gt;               &lt;\/ul&gt;             &lt;\/section&gt;           &lt;\/div&gt;         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/div&gt;   &lt;\/section&gt; &lt;\/main&gt;<\/code><\/pre>\n<p><strong>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/a11ysupport.io\/tech\/html\/section_element\" rel=\"noopener noreferrer nofollow\">Accessibility Support &#8212; section element (html)<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>11. \u0422\u0440\u0438\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0435\u0431\u0430<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;span class=\"nav-toggle\"&gt; \u2630 Menu &lt;\/span&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u043e\u0432 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u043a\u0430\u043a &#171;\u0442\u0440\u0438\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0435\u0431\u0430 \u043c\u0435\u043d\u044e&#187;. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u0441\u0438\u043c\u0432\u043e\u043b\u0435 &#171;\u2630&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 unicode<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430 \u0438\u043a\u043e\u043d\u043e\u043a &#8212; \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044b \u043e\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code><\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043d\u0430 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0440\u0430\u043d\u0435\u0435 <code>&lt;div&gt;<\/code>, \u0438 <code>&lt;img&gt;<\/code>, \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;span&gt;<\/code>  \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u0415\u0441\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>&lt;button&gt;<\/code> , \u043a\u043b\u0438\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043e\u043a <code>Enter<\/code> \u0438 <code>Space<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;span&gt;<\/code> \u043a\u0430\u0441\u0430\u044e\u0442\u0441\u044f \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0444\u043e\u043a\u0443\u0441\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u0410 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e, \u0432\u0435\u0434\u044c \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-expanded<\/code> \u0434\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0430\u043d\u0435\u043b\u0438. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>true<\/code> \u2013 \u0435\u0441\u043b\u0438 \u043f\u0430\u043d\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u0430, <code>false<\/code> \u2013 \u0435\u0441\u043b\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button class=\"nav-toggle\" aria-expanded=\"false\"&gt;   &lt;span aria-hidden=\"true\"&gt;\u2630&lt;\/span&gt; Menu &lt;\/button&gt;<\/code><\/pre>\n<h3>12. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u043e\u043f\u0440\u043e\u0441 &#171;\u0414\u0430\/\u041d\u0435\u0442&#187;<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;form role=\"form\"&gt;   &lt;h2&gt;Poll title&lt;\/h2&gt;   &lt;div id=\"pollQuestion\"&gt;Is this accessible?&lt;\/div&gt;   &lt;div name=\"pollGroup\" role=\"radiogroup\"&gt;     &lt;div role=\"radiogroup\" aria-label=\"Poll title\"&gt;       &lt;input type=\"radio\" name=\"poll\" aria-labelledby=\"pollQuestion\" value=\"[object Object]\"&gt;       &lt;span&gt;Yes&lt;\/span&gt;        &lt;input type=\"radio\" name=\"poll\" aria-labelledby=\"pollQuestion\" value=\"[object Object]\"&gt;       &lt;span&gt;No&lt;\/span&gt;        &lt;input type=\"radio\" name=\"poll\" aria-labelledby=\"pollQuestion\" value=\"[object Object]\"&gt;       &lt;span&gt;Maybe&lt;\/span&gt;        &lt;input type=\"radio\" name=\"poll\" aria-labelledby=\"pollQuestion\" value=\"[object Object]\"&gt;       &lt;span&gt;Can you repeat the question?&lt;\/span&gt;     &lt;\/div&gt;      &lt;button type=\"submit\"&gt;Vote&lt;\/button&gt;   &lt;\/div&gt; &lt;\/form&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;form&gt;<\/code> \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>role=\"form\"<\/code><\/p>\n<\/li>\n<li>\n<p>\u0424\u043e\u0440\u043c\u0430 \u2013 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <a href=\"https:\/\/www.scottohara.me\/blog\/2018\/03\/03\/landmarks.html\" rel=\"noopener noreferrer nofollow\">\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u044c \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0430 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;form&gt;<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>aria-labeledby<\/code>, \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e. \u042d\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>role=\"radiogroup\"<\/code> \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0438 \u0443\u0436 \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u0434\u0432\u0430\u0436\u0434\u044b. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>&lt;fieldset&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>aria-labelledby<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c. \u0414\u0430\u043d\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;legend&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0438\u043c\u044f, \u0442\u0435\u043a\u0441\u0442 \u0438\u0437 <code>&lt;span&gt;<\/code> \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;label&gt;<\/code> \u0438 \u0441\u0432\u044f\u0436\u0438\u0442\u0435 \u0441 \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>for<\/code><\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0443 \u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c <code>&lt;fieldset&gt;<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;form aria-labelledby=\"poll-title\"&gt;   &lt;h2 id=\"poll-title\"&gt;Poll title&lt;\/h2&gt;   &lt;fieldset&gt;     &lt;legend&gt;Is this accessible?&lt;\/legend&gt;      &lt;input type=\"radio\" id=\"radio1\" name=\"poll\" value=\"yes\"&gt;     &lt;label for=\"radio1\"&gt;Yes&lt;\/label&gt;      &lt;input type=\"radio\" id=\"radio2\" name=\"poll\" value=\"no\"&gt;     &lt;label for=\"radio2\"&gt;No&lt;\/label&gt;      &lt;input type=\"radio\" id=\"radio3\" name=\"poll\" value=\"maybe\"&gt;     &lt;label for=\"radio3\"&gt;Maybe&lt;\/label&gt;      &lt;input type=\"radio\" id=\"radio4\" name=\"poll\" value=\"repeat\"&gt;     &lt;label for=\"radio4\"&gt;Can you repeat the question?&lt;\/label&gt;      &lt;button type=\"submit\"&gt;Vote&lt;\/button&gt;   &lt;\/fieldset&gt; &lt;\/form&gt;<\/code><\/pre>\n<h3>13. \u0421\u0441\u044b\u043b\u043a\u0430 \u0438\u043b\u0438 <\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;input type=\"checkbox\" id=\"accept\" required&gt; &lt;label for=\"accept\"&gt;   &lt;a href=\"\/legal\"&gt; I accept the confidentiality policy and data\u2026 &lt;\/a&gt; &lt;\/label&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0412\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 <a href=\"https:\/\/www.w3.org\/TR\/html52\/editing.html#activation-behavior\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c<\/a> (\u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a \u043a\u043b\u0438\u043a) \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u043f\u0443\u0442\u0451\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c (\u043f\u0443\u0442\u0451\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u043b\u0438\u043a\u0430)<\/p>\n<\/li>\n<li>\n<p>\u041d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0430\u0439\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;label&gt;<\/code><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;input type=\"checkbox\" id=\"accept\" required&gt; &lt;label for=\"accept\"&gt; I accept the confidentiality policy and data\u2026 &lt;\/label&gt; (read &lt;a href=\"\/legal\"&gt;Terms and conditions&lt;\/a&gt;)<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"http:\/\/4.10.4.%20The%20label%20element\" rel=\"noopener noreferrer nofollow\">4.10.4. The label element<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/adrianroselli.com\/2016\/12\/be-wary-of-nesting-roles.html\" rel=\"noopener noreferrer nofollow\">Be Wary of Nesting Roles by Adrian Roselli<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>14. \u041d\u0435\u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 &#171;type&#187;<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a type=\"button\" class=\"button\" href=\"\/signup\" tabindex=\"-1\"&gt;Sign up&lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;a&gt;<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>type<\/code> , \u0445\u043e\u0442\u044f \u043e\u043d \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0443\u043c\u0435\u0441\u0442\u0435\u043d<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0435\u0433\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c, \u0442\u043e \u043b\u0438\u0448\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u043c\u0441\u044f \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u043c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Basics_of_HTTP\/MIME_types\/Complete_list_of_MIME_types\" rel=\"noopener noreferrer nofollow\">MIME-\u0442\u0438\u043f\u043e\u043c<\/a>. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u043d\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u0430\u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>href<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0443\u0442\u044c \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0440\u0435\u0441\u0443\u0440\u0441 (\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442), \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code>, \u0430 \u043d\u0435 <code>&lt;button&gt;<\/code>, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435: \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0430 \u0438\u043b\u0438 \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>tabindex<\/code> \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u041f\u0440\u0430\u0432\u0434\u0430, \u0442\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0441\u0451 \u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0438\u0441\u0443\u0449\u0443\u044e \u0438\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u044f\u0432\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"\/signup\" class=\"button\"&gt;Sign up&lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/links.html#links\" rel=\"noopener noreferrer nofollow\">4.8.2. Links created by a and area elements<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/textlevel-semantics.html#the-a-element\" rel=\"noopener noreferrer nofollow\">4.5.1. The a element<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>15. \u0411\u0443\u043a\u0432\u0430 \u0437\u0430 \u0431\u0443\u043a\u0432\u043e\u0439<\/h3>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0431\u0443\u043a\u0432\u044b \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u044b \u0432 <code>&lt;div&gt;<\/code> \u0441 \u0446\u0435\u043b\u044c\u044e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0431\u0443\u043a\u0432\u044b \u0447\u0435\u0440\u0435\u0437 JavaScript<\/p>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;h3&gt;   &lt;div style=\"display: block; text-align: start; position: relative;\" class=\"title\"&gt;     &lt;div style=\"position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;H&lt;\/div&gt;     &lt;div style=\"position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;e&lt;\/div&gt;     &lt;div style=\"position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;a&lt;\/div&gt;     &lt;div style=\"position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;d&lt;\/div&gt;     &lt;div style=\"position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;i&lt;\/div&gt;     &lt;div style=\"position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;n&lt;\/div&gt;     &lt;div style=\"position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;g&lt;\/div&gt;   &lt;\/div&gt; &lt;\/h3&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0430\u0436\u0434\u0430\u044f \u0431\u0443\u043a\u0432\u0430 \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043f\u0440\u043e\u0438\u0437\u043d\u043e\u0441\u044f \u043a\u0430\u0436\u0434\u0443\u044e \u0431\u0443\u043a\u0432\u0443 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/p>\n<p><iframe id=\"608b0cb4d07205866cff5cc1\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/608b0cb4d07205866cff5cc1\" class=\"embed_video embed__content\" allowfullscreen=\"true\"><\/iframe><\/p>\n<p><a href=\"https:\/\/codepen.io\/matuzo\/pen\/vYEbmxp\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u0432\u0438\u0434\u0435\u043e<\/a><\/p>\n<ul>\n<li>\n<p>\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u044f DOM. \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e DOM-\u0443\u0437\u043b\u043e\u0432 \u0438\u043b\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043f\u043b\u043e\u0445\u043e \u043e\u0442\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u0411\u043e\u043b\u044c\u0448\u043e\u0435 DOM-\u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0435\u0434\u0451\u0442 \u043a \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0434\u0435\u0440\u0435\u0432\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043b\u043e\u0445\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u0421\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e, \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0432 CSS-\u0444\u0430\u0439\u043b<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21161<\/em><\/p>\n<pre><code class=\"xml\">&lt;h3&gt; Heading &lt;\/h3&gt;<\/code><\/pre>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21162<\/em><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u044d\u0442\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432\u0435\u0440\u0441\u0438\u044e \u0442\u0435\u043a\u0441\u0442\u0430, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432, \u0430 \u0442\u0435\u043a\u0441\u0442, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b\u0439 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0441\u043a\u0440\u043e\u0439\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>aria-hidden=\"true\"<\/code><\/p>\n<pre><code class=\"xml\">&lt;h3 class=\"title\"&gt;   &lt;span class=\"sr-only\"&gt;Heading&lt;\/span&gt;   &lt;div aria-hidden=\"true\"&gt;     &lt;div style=\"transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;H&lt;\/div&gt;     &lt;div style=\"transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;e&lt;\/div&gt;     &lt;div style=\"transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;a&lt;\/div&gt;     &lt;div style=\"transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;d&lt;\/div&gt;     &lt;div style=\"transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;i&lt;\/div&gt;     &lt;div style=\"transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;n&lt;\/div&gt;     &lt;div style=\"transform-origin: 50% 50% -30.8917px;\" class=\"char\"&gt;g&lt;\/div&gt;   &lt;\/div&gt; &lt;\/h3&gt;<\/code><\/pre>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>.sr-only<\/code> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u044b\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432.<\/p>\n<pre><code class=\"css\">.title {   display: block;   text-align: start;   position: relative; } .char {   position: relative;   display: inline-block;   transform: rotateX(90deg); } .sr-only {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/audits\/dom-size\" rel=\"noopener noreferrer nofollow\">Uses An Excessive DOM Size<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.technica11y.org\/performance-and-the-accessibility-tree\" rel=\"noopener noreferrer nofollow\">Performance and the Accessibility Tree<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>16. alt, \u0445\u043e\u0442\u044f \u043d\u0435\u0442&#8230;, aria-label, \u0445\u043e\u0442\u044f \u043d\u0435\u0442&#8230;, alt<\/h3>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0442\u043e\u0432\u0430\u0440\u043e\u043c<\/p>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a tabindex=\"0\"&gt;   &lt;div alt=\"Browser Wars: The Last Engine\" aria-label=\"Browser Wars: The Last Engine\"&gt;     &lt;div&gt;       &lt;img alt=\"Browser Wars: The Last Engine\" src=\"thumbnail.jpg\"&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong>  <\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;a&gt;<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>href<\/code> \u0438\u043c\u0435\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u043d\u0435\u0442 \u0432\u043e\u043e\u0431\u0449\u0435, \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u0433\u0434\u0435 \u043c\u043e\u0433\u043b\u0430 \u0431\u044b\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 (<a href=\"https:\/\/www.htmhell.dev\/16-alt-no-aria-label-no-alt\/#foot-note1\" rel=\"noopener noreferrer nofollow\">HTML \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/a>)<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043a \u0441\u0441\u044b\u043b\u043a\u0435-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0435, \u0442\u043e, \u043f\u043e \u0432\u0441\u0435\u0439 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u043d\u0435 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u043e\u0439, \u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>href<\/code> \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 <code>&lt;button&gt;<\/code>, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435<\/p>\n<\/li>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u0431\u0435\u0437 <code>href<\/code> \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. <code>tabindex<\/code> \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u0443 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043b\u0438\u0448\u044c \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u044b\u043b\u0430 \u0431\u044b \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043b\u0443\u0447\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>alt<\/code> \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <code>div<\/code> \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0438\u0445 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0439\u0442\u0435 ARIA. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-label<\/code> \u043b\u0438\u0448\u043d\u0438\u0439 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>div<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>img<\/code> \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0438\u043c\u044f (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>alt<\/code>)<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0441 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>href<\/code> \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 <code>alt<\/code> \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/p>\n<pre><code class=\"xml\">&lt;a href=\"detail.html\"&gt;   &lt;div&gt;     &lt;img alt=\"Browser Wars: The Last Engine\" src=\"thumbnail.jpg\"&gt;   &lt;\/div&gt; &lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/html.spec.whatwg.org\/#the-a-element\" rel=\"noopener noreferrer nofollow\">The a element<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.scottohara.me\/note\/2019\/07\/17\/placeholder-link.html\" rel=\"noopener noreferrer nofollow\">The accessibility of placeholder links<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>17. \u041d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438<\/h3>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/p>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;section&gt;   &lt;section&gt;     &lt;h2&gt;Overview&lt;\/h2&gt;     &lt;figure class=\"card\" data-url=\"image1.html\" style=\"background: url(image1.jpg)\"&gt;       &lt;figcaption&gt;         &lt;h4&gt;My heading&lt;\/h4&gt;         &lt;article&gt;Teasertext...&lt;\/article&gt;       &lt;\/figcaption&gt;     &lt;\/figure&gt;     &lt;figure class=\"card\" data-url=\"image2.html\" style=\"background: url(image2.jpg)\"&gt; \u2026 &lt;\/figure&gt;   &lt;\/section&gt; &lt;\/section&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0412\u0435\u0440\u043e\u044f\u0442\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0432 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;section&gt;<\/code> \u043d\u0435\u0442. \u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u043e\u0447\u0435\u043c\u0443, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e &#171;<a href=\"https:\/\/www.smashingmagazine.com\/2020\/01\/html5-article-section\/\" rel=\"noopener noreferrer nofollow\">Why You Should Choose HTML5 &lt;article&gt; Over &lt;section&gt;<\/a>&#187; \u0430\u0432\u0442\u043e\u0440\u0430 <a href=\"https:\/\/www.brucelawson.co.uk\/\" rel=\"noopener noreferrer nofollow\">Bruce Lawson<\/a><\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0435\u0434\u043e\u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0430\u0439\u0442\u0443 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e \u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, HTML5-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;figure&gt;<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c. \u041d\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u044c<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u043d\u0435\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c, \u043e\u043d\u043e \u043d\u0435\u0441\u0451\u0442 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0447\u0430\u0441\u0442\u044c\u044e HTML-\u043a\u043e\u0434\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0430 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background<\/code> . \u0424\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043d\u0435 \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043b\u0438\u043a\u0430 \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 JavaScript. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u043f\u0443\u0442\u0438 (<code>&lt;a href=\"path\/to\/page\"&gt;<\/code>), \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c. \u0422\u0430\u043a\u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;h1&gt;<\/code> &#8212; <code>&lt;h6&gt;<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0432\u0432\u043e\u0434\u043d\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0434\u043b\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;section&gt;<\/code>. <code>&lt;h4&gt;<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0438, \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u043c <code>&lt;figcaption&gt;<\/code>, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u0432\u0441\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;article&gt;<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0433\u0430\u0437\u0435\u0442\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f , \u044d\u0441\u0441\u0435 \u0438\u043b\u0438 \u043e\u0442\u0447\u0451\u0442, \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0432 \u0431\u043b\u043e\u0433\u0435 \u0438\u043b\u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u0438. \u0414\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0430\u0431\u0437\u0430\u0446\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;p&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443, \u0432\u0441\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0439, \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438&#187; \u043d\u0438\u0436\u0435<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div&gt;   &lt;section&gt;     &lt;h2&gt;Overview&lt;\/h2&gt;     &lt;article class=\"card\"&gt;       &lt;h3&gt;         &lt;a href=\"image1.html\"&gt; My heading &lt;\/a&gt;       &lt;\/h3&gt;       &lt;img src=\"image1.jpg\" alt=\"Description of image1\" \/&gt;       &lt;p&gt;Teasertext...&lt;\/p&gt;     &lt;\/article&gt;     &lt;article class=\"card\"&gt; \u2026 &lt;\/article&gt;   &lt;\/section&gt; &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/webaim.org\/techniques\/semanticstructure\/\" rel=\"noopener noreferrer nofollow\">Semantic Structure<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/adrianroselli.com\/2020\/02\/block-links-cards-clickable-regions-etc.html\" rel=\"noopener noreferrer nofollow\">Block Links, Cards, Clickable Regions, Etc.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/inclusive-components.design\/cards\/\" rel=\"noopener noreferrer nofollow\">Inclusive Components: Cards<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/justmarkup.com\/articles\/2020-02-21-teaser-with-multiple-links\/\" rel=\"noopener noreferrer nofollow\">Teaser with multiple links<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/css-tricks.com\/block-links-are-a-pain-and-maybe-just-a-bad-idea\/\" rel=\"noopener noreferrer nofollow\">Block Links Are a Pain (and Maybe Just a Bad Idea)<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>18. \u041f\u0430\u043d\u0435\u043b\u044c div-\u0438\u0433\u0430\u0446\u0438\u0438<\/h3>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 <\/p>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div class=\"nav\"&gt;   &lt;div&gt;     &lt;div&gt;about&lt;\/div&gt;     &lt;div&gt;thoughts&lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p><code>&lt;div&gt;<\/code> &#8212; \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 &#8212; \u043a\u043e\u0433\u0434\u0430 \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>&lt;div&gt;<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u043f\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;nav&gt;<\/code>. \u041e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u044b\u043c \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <a href=\"https:\/\/www.scottohara.me\/blog\/2018\/03\/03\/landmarks.html\" rel=\"noopener noreferrer nofollow\">\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u043c<\/a>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0435\u0451<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;ul&gt;<\/code> \u0438\u043b\u0438 <code>&lt;ol&gt;<\/code> \u0434\u043b\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e. \u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442 \u043d\u043e\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u0447\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>&lt;ol&gt;<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>&lt;ul&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e <code>&lt;a&gt;<\/code> \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;div&gt;<\/code>, \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0445 \u043d\u0435\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 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u0438 \u0442\u0435\u0445, \u043a\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;nav&gt;   &lt;ul class=\"nav\"&gt;     &lt;li&gt;       &lt;a href=\"\/about\"&gt;about&lt;\/a&gt;     &lt;\/li&gt;     &lt;li&gt;       &lt;a href=\"\/thoughts\"&gt;thoughts&lt;\/a&gt;     &lt;\/li&gt;   &lt;\/ul&gt; &lt;\/nav&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/sections.html#the-nav-element\" rel=\"noopener noreferrer nofollow\">4.3.4. The nav element<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/menus\/structure\/\" rel=\"noopener noreferrer nofollow\">Menu Structure<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/inclusive-components.design\/menus-menu-buttons\/\" rel=\"noopener noreferrer nofollow\">Menus &amp; Menu Buttons<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>19. \u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438<\/h3>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u0430<\/p>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;h1&gt;Product Status&lt;\/h1&gt; &lt;h2&gt;Is the product available?&lt;\/h2&gt; &lt;div&gt;   &lt;h3&gt;     &lt;div&gt;       &lt;div&gt;         &lt;i&gt;           &lt;h3 class=\"message is-success\"&gt;             It\u2018s &lt;a&gt;available&lt;\/a&gt;.           &lt;\/h3&gt;         &lt;\/i&gt;       &lt;\/div&gt;     &lt;\/div&gt;   &lt;\/h3&gt; &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;h1&gt;<\/code> &#8212; <code>&lt;h6&gt;<\/code> \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \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 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0438 \u0441\u043b\u043e\u0433\u0430\u043d\u043e\u0432, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u043d\u0435 \u043e\u0437\u0430\u0433\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0438\u043b\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;div&gt;<\/code> \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0437\u043b\u0438\u0448\u043d\u0438. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043e\u043d\u0438 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/reactjs.org\/docs\/fragments.html\" rel=\"noopener noreferrer nofollow\">Fragments in React<\/a> \u0438\u043b\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u044f DOM. \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e DOM-\u0443\u0437\u043b\u043e\u0432 \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u0411\u043e\u043b\u044c\u0448\u043e\u0435 DOM-\u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0435\u0434\u0451\u0442 \u043a \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0434\u0435\u0440\u0435\u0432\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043b\u0438\u044f\u0442\u044c \u0438 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 <code>&lt;h1&gt;<\/code> &#8212; <code>&lt;h6&gt;<\/code> \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u0440\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. <code>&lt;h3&gt;<\/code> \u0438 <code>&lt;div&gt;<\/code> \u043a \u043d\u0438\u043c \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f<\/p>\n<\/li>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;i&gt;<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043f\u0440\u043e\u0438\u0437\u043d\u043e\u0441\u044f\u0442 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u0439 \u0438\u043d\u0442\u043e\u043d\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>font-style: italic<\/code><\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;a&gt;<\/code> \u043d\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>href<\/code>, \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0433\u0434\u0435 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043a \u0441\u0441\u044b\u043b\u043a\u0435-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0435, \u0442\u043e, \u043f\u043e \u0432\u0441\u0435\u0439 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>href<\/code> \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 <code>&lt;button&gt;<\/code>, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\"> &lt;h1&gt;Product Status&lt;\/h1&gt;  &lt;p&gt;Is the product available?&lt;\/p&gt;  &lt;p class=\"message is-success\"&gt;    It\u2018s &lt;a href=\"\/product.html\"&gt;available&lt;\/a&gt;.  &lt;\/p&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements\" rel=\"noopener noreferrer nofollow\">4.13.1. Subheadings, subtitles, alternative titles and taglines<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/textlevel-semantics.html#the-i-element\" rel=\"noopener noreferrer nofollow\">4.5.22. The i element<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/html.spec.whatwg.org\/#the-a-element\" rel=\"noopener noreferrer nofollow\">4.5.1 The a element<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>20. \u0421\u043f\u0435\u0446\u0432\u044b\u043f\u0443\u0441\u043a HTMHell: \u043a\u043d\u043e\u043f\u043a\u0430 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187;<\/h3>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043f\u0435\u0446\u0432\u044b\u043f\u0443\u0441\u043a\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0441\u043f\u043e\u0440\u043d\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u2013 \u043a\u043d\u043e\u043f\u043a\u0430 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187;.<\/p>\n<p>\u0412 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043d\u0430\u0445, \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0431\u0430\u043d\u043d\u0435\u0440\u0430\u0445 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0438\u043b\u0438, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0447\u0430\u0441\u0442\u0438 \u0438\u0437 \u043d\u0438\u0445, \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e. \u0427\u0430\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 \u043b\u0438\u0448\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u043c\u044b\u0448\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f &#8212; \u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0442\u0441\u0442\u043e\u0439.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u0437\u0430\u043d\u044f\u0432\u0448\u0435\u0433\u043e \u043c\u0435\u043d\u0435\u0435 2 \u0447\u0430\u0441\u043e\u0432, HTMHell \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 11 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u043b\u043e\u0445\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 1:  \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c<\/h4>\n<pre><code class=\"xml\">&lt;div class=\"close\"&gt;&lt;\/div&gt;    <\/code><\/pre>\n<pre><code class=\"css\">close::after {   background: url(\"close.png\");   content: \"\"; }<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p><code>&lt;div&gt;<\/code> &#8212; \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u0440\u0430\u0439\u043d\u0435\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>&lt;div&gt;<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u043f\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 <code>&lt;div&gt;<\/code>  \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u041d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 <code>&lt;button&gt;<\/code> \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 <code>Enter<\/code> \u0438\u043b\u0438 <code>Space<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/p>\n<\/li>\n<li>\n<p><code>&lt;div&gt;<\/code> \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043e\u0437\u0432\u0443\u0447\u0430\u0442: \u041d\u0438\u043a\u0430\u043a<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 2:  \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/h4>\n<pre><code class=\"xml\">&lt;div class=\"close\"&gt;   \u2715 &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0421\u0438\u043c\u0432\u043e\u043b &#171;\u2715&#187; \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u043c-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187; \u0438\u043b\u0438 &#171;\u041f\u0435\u0440\u0435\u0447\u0451\u0440\u043a\u043d\u0443\u0442\u043e&#187;, \u044d\u0442\u043e \u0437\u043d\u0430\u043a \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 2 \u2715 2 (\u0434\u0432\u0430 \u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c \u043d\u0430 \u0434\u0432\u0430). \u0412 \u043a\u043d\u043e\u043f\u043a\u0430\u0445 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u0443\u043c\u0435\u0441\u0442\u043d\u043e<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;div&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: \u043a\u0430\u043a-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 &#171;\u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c \u043d\u0430&#187; \u0438\u043b\u0438 &#171;\u0440\u0430\u0437\u044b&#187; (times)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 3: \u0418\u043a\u043e\u043d\u043a\u0438 Font Awesome<\/h4>\n<pre><code class=\"xml\">&lt;div class=\"close\"&gt;   &lt;i class=\"fas fa-times\"&gt;&lt;\/i&gt; &lt;\/div&gt;<\/code><\/pre>\n<pre><code class=\"css\">.fa-times::before {   content: '\\f00d'; }<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 CSS<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/fontawesome.com\/v4.7.0\/accessibility\/\" rel=\"noopener noreferrer nofollow\">Font Awesome \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438<\/a> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>aria-hidden=\"true\"<\/code> \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;i&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>Font Awesome \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 Unicode-\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>::before<\/code>. \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u0443 Unicode-\u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0432\u0443\u0447\u0430\u0442\u044c \u043a\u0430\u043a &#171;\u0440\u0430\u0437\u044b&#187; (times), <a href=\"https:\/\/fontawesome.com\/icons\/times\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 fa-times &#8212; \u044d\u0442\u043e \u043d\u0435 \u043a\u0440\u0435\u0441\u0442\u0438\u043a, \u0430 \u0437\u043d\u0430\u043a \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f<\/a>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: Talkback \u0438 VoiceOver \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435 \u043e\u0437\u0432\u0443\u0447\u0430\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e<\/p>\n<\/li>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;i&gt;<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043f\u0440\u043e\u0438\u0437\u043d\u043e\u0441\u044f\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u0438\u043d\u0442\u043e\u043d\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>font-style: italic<\/code><\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;div&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: &#171;\u0440\u0430\u0437\u044b&#187; (times)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 4: \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430<\/h4>\n<pre><code class=\"xml\">&lt;a href=\"#\" class=\"close\"&gt; &lt;\/a&gt;<\/code><\/pre>\n<pre><code class=\"css\">a::after {   font-size: 28px;   display: block;   content: \"\u00d7\"; }<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>href<\/code>, \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0435\u0441\u0443\u0440\u0441: \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043b\u0438 PDF-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u2013 \u0432\u044b\u0437\u0432\u0430\u0442\u044c JavaScript-\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>type=\"button\"<\/code> \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043b\u0443\u0447\u0448\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code>, \u0430 \u043a\u043e\u0433\u0434\u0430 <code>&lt;button&gt;<\/code>, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043e &#171;<a href=\"https:\/\/www.youtube.com\/watch?v=8XjwDq9zG4I\" rel=\"noopener noreferrer nofollow\">The Links vs. Buttons Showdown<\/a>&#187; \u043e\u0442 <a href=\"https:\/\/twitter.com\/marcysutton\" rel=\"noopener noreferrer nofollow\">Marcy Sutton<\/a><\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 CSS <\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u043c\u0432\u043e\u043b &#171;\u2715&#187; \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u043c-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187; \u0438\u043b\u0438 &#171;\u041f\u0435\u0440\u0435\u0447\u0451\u0440\u043a\u043d\u0443\u0442\u043e&#187;, \u044d\u0442\u043e \u0437\u043d\u0430\u043a \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 2 \u2715 2 (\u0434\u0432\u0430 \u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c \u043d\u0430 \u0434\u0432\u0430). \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0439\u0442\u0435 \u0435\u0433\u043e \u0432 \u043a\u043d\u043e\u043f\u043a\u0430\u0445 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187;<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: &#171;\u0441\u0441\u044b\u043b\u043a\u0430, \u0440\u0430\u0437\u044b&#187; (link, times)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 5: \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c<\/h4>\n<pre><code class=\"xml\">&lt;a href=\"#\" class=\"close\"&gt;   Close &lt;\/a&gt;<\/code><\/pre>\n<pre><code class=\"css\">.close::before {   content: \"\\e028\"; }<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430, \u043d\u043e \u044d\u0442\u043e \u0432\u0441\u0451 \u0435\u0449\u0451 \u0441\u0441\u044b\u043b\u043a\u0430, \u0430 \u043d\u0435 \u043a\u043d\u043e\u043f\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;a&gt;<\/code> \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u043e\u0435 CSS \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: &#171;\u0441\u0441\u044b\u043b\u043a\u0430, \u0440\u0430\u0437\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u044c&#187; (link, times close)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 6: \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 href<\/h4>\n<pre><code class=\"xml\">&lt;a class=\"close\" onclick=\"close()\"&gt;\u00d7&lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430, \u043d\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>href<\/code> \u0432\u0441\u0451 \u0435\u0449\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u043e\u0439<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;a&gt;<\/code> \u043d\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>href<\/code>, \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0433\u0434\u0435 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u0430 \u043a \u0441\u0441\u044b\u043b\u043a\u0435-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0435, \u0442\u043e, \u043f\u043e \u0432\u0441\u0435\u0439 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u043d\u0435 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u043e\u0439, \u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>href<\/code> \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 <code>&lt;button&gt;<\/code>, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435<\/p>\n<\/li>\n<li>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code>, \u0430 \u043a\u043e\u0433\u0434\u0430 <code>&lt;button&gt;<\/code>, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043e &#171;<a href=\"https:\/\/www.youtube.com\/watch?v=8XjwDq9zG4I\" rel=\"noopener noreferrer nofollow\">The Links vs. Buttons Showdown<\/a>&#187; \u043e\u0442 <a href=\"https:\/\/twitter.com\/marcysutton\" rel=\"noopener noreferrer nofollow\">Marcy Sutton<\/a><\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: &#171;\u0440\u0430\u0437\u044b, \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u043e&#187; (times, clickable)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 7: \u0421\u0441\u044b\u043b\u043a\u0430-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430 \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/h4>\n<pre><code class=\"xml\">&lt;a onclick=\"close();\"&gt;    &lt;img src=\"close.png\"&gt;  &lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0414\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430. \u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430<\/p>\n<\/li>\n<li>\n<p>\u0412 6 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a-\u0437\u0430\u0433\u043b\u0443\u0448\u0435\u043a<\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442: &#171;close.png, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435&#187; (close.png, image)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 8: \u0420\u0430\u0434\u0438\u043e-\u043a\u043d\u043e\u043f\u043a\u0430<\/h4>\n<pre><code class=\"xml\">&lt;label class=\"close\" for=\"close\"&gt;    &lt;svg&gt; \u2026 &lt;\/svg&gt;  &lt;\/label&gt;  &lt;input id=\"close\" type=\"radio\"&gt;<\/code><\/pre>\n<pre><code class=\"css\">[type=\"radio\"] {   display: none; }<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 &#171;<a href=\"https:\/\/www.youtube.com\/watch?v=CZGqnp06DnI\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443<\/a>&#171;, \u043e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u0432 \u0432\u0438\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code>, \u0430 \u043d\u0435 \u0440\u0430\u0434\u0438\u043e-\u043a\u043d\u043e\u043f\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0434\u0438\u043e-\u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0433\u0440\u0443\u043f\u043f\u0430\u0445, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0445 <strong>\u043d\u0430\u0431\u043e\u0440 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 (\u043e\u043f\u0446\u0438\u0439)<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0423 SVG \u043d\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b. \u0427\u0442\u043e\u0431\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 SVG, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e &#171;<a href=\"https:\/\/www.deque.com\/blog\/creating-accessible-svgs\/\" rel=\"noopener noreferrer nofollow\">Creating Accessible SVGs<\/a>&#187; \u0430\u0432\u0442\u043e\u0440\u0430 <a href=\"https:\/\/cariefisher.com\/\" rel=\"noopener noreferrer nofollow\">Carie Fisher<\/a><\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0436\u0435, <code>display: none<\/code> \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>&lt;input&gt;<\/code>  \u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c <code>&lt;label&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043e\u0437\u0432\u0443\u0447\u0430\u0442: \u041d\u0438\u043a\u0430\u043a<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 9: \u041a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/h4>\n<pre><code class=\"xml\">&lt;button class=\"close\" type=\"button\"&gt;   \u00d7 &lt;\/button&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0421\u0438\u043c\u0432\u043e\u043b &#171;\u2715&#187; \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u043c-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187; \u0438\u043b\u0438 &#171;\u041f\u0435\u0440\u0435\u0447\u0451\u0440\u043a\u043d\u0443\u0442\u043e&#187;, \u044d\u0442\u043e \u0437\u043d\u0430\u043a \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 2 \u2715 2 (\u0434\u0432\u0430 \u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c \u043d\u0430 \u0434\u0432\u0430). \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0439\u0442\u0435 \u0435\u0433\u043e \u0432 \u043a\u043d\u043e\u043f\u043a\u0430\u0445 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187;<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: &#171;\u0440\u0430\u0437\u044b, \u043a\u043d\u043e\u043f\u043a\u0430&#187; (times, button)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 10: \u041a\u043d\u043e\u043f\u043a\u0430 \u0441 svg<\/h4>\n<pre><code class=\"xml\">&lt;button class=\"close\"&gt;   &lt;svg&gt; \u2026 &lt;\/svg&gt; &lt;\/button&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0423 SVG \u043d\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b. \u0427\u0442\u043e\u0431\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 SVG, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e &#171;<a href=\"https:\/\/www.deque.com\/blog\/creating-accessible-svgs\/\" rel=\"noopener noreferrer nofollow\">Creating Accessible SVGs<\/a>&#187; \u0430\u0432\u0442\u043e\u0440\u0430 <a href=\"https:\/\/cariefisher.com\/\" rel=\"noopener noreferrer nofollow\">Carie Fisher<\/a><\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: &#171;\u043a\u043d\u043e\u043f\u043a\u0430&#187; (button)<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440 11: \u0421\u0442\u0430\u0440\u0430\u044f \u0434\u043e\u0431\u0440\u0430\u044f \u0431\u0443\u043a\u0432\u0430 &#171;X&#187;<\/h4>\n<pre><code class=\"xml\">&lt;div role=\"button\" tabindex=\"0\"&gt;X&lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>role<\/code> \u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button<\/code><\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>&lt;button&gt;<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>tabindex<\/code> \u043d\u0435 \u043d\u0443\u0436\u0435\u043d. HTML-\u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u0412 1 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;div&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0411\u0443\u043a\u0432\u0430 &#171;X&#187; \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187;<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c: &#171;\u0438\u043a\u0441, \u043a\u043d\u043e\u043f\u043a\u0430&#187; (X, button)<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>&#171;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0443\u043a\u0432\u0443 &#171;X&#187; \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c&#187; \u2013 \u044d\u0442\u043e \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043a\u043e\u0444\u0435 \u0441\u043e\u043b\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0430\u0445\u0430\u0440\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u043d\u0430 \u0442\u0430\u043a \u0436\u0435&#187;<\/p>\n<p><a href=\"https:\/\/twitter.com\/mxbck\/status\/1187446513284325376\" rel=\"noopener noreferrer nofollow\">Max B\u00f6ck<\/a><\/p>\n<\/blockquote>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438<\/h4>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 1: \u041a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0431\u0435\u0437 \u0438\u043a\u043e\u043d\u043a\u0438<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button type=\"button\"&gt;   Close &lt;\/button&gt;<\/code><\/pre>\n<ul>\n<li>\n<p>\u0422\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0441\u0442: \u043b\u0435\u0433\u043a\u043e \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442: &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c, \u043a\u043d\u043e\u043f\u043a\u0430&#187; (Close, button)<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 2: \u041a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button type=\"button\"&gt;   Close   &lt;span aria-hidden=\"true\"&gt;\u00d7&lt;\/span&gt; &lt;\/button&gt;<\/code><\/pre>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 &#171;\u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c&#187;, \u0441\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0451 \u043e\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0442\u0435\u0440\u043e\u0432, \u043e\u0431\u0435\u0440\u043d\u0443\u0432 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;span&gt;<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>aria-hidden=\"true\"<\/code><\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442: &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c, \u043a\u043d\u043e\u043f\u043a\u0430&#187; (Close, button)<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 3: \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button type=\"button\"&gt;   &lt;span class=\"sr-only\"&gt;Close&lt;\/span&gt;   &lt;span aria-hidden=\"true\"&gt;\u00d7&lt;\/span&gt; &lt;\/button&gt;<\/code><\/pre>\n<pre><code class=\"css\">.sr-only {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }<\/code><\/pre>\n<ul>\n<li>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>.sr-only<\/code> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u044b\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442: &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c, \u043a\u043d\u043e\u043f\u043a\u0430&#187; (Close, button)<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 4: \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button type=\"button\" aria-label=\"Close\"&gt;   &lt;span aria-hidden=\"true\"&gt;\u00d7&lt;\/span&gt; &lt;\/button&gt;<\/code><\/pre>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u044c\u0442\u0435 \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u043b\u0438 SVG \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a \u043a\u043d\u043e\u043f\u043a\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-label<\/code><\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442: &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c, \u043a\u043d\u043e\u043f\u043a\u0430&#187; (Close, button)<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 5: Font Awesome<\/strong><\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b, \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 Font Awesome<\/p>\n<pre><code class=\"xml\">&lt;button type=\"button\" class=\"close\" aria-label=\"Close\"&gt;   &lt;span class=\"fa fa-times\" aria-hidden=\"true\"&gt;&lt;\/span&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>\u041e\u0431\u0449\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f<\/p>\n<p>\u041f\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0438\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043e\u043a\u043d\u043e&#187;, &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u0433\u0430\u043b\u0435\u0440\u0435\u0438\u044e&#187;, &#171;\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u0440\u0435\u043a\u043b\u0430\u043c\u0443&#187;.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445, \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0445 \u043e\u043a\u043e\u043d, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435, \u043a\u0430\u043a \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043f\u0435\u0440\u0435\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u0441\u0430\u0439\u0442. \u041d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u0445 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/tink.uk\/accessibility-support-for-css-generated-content\/\" rel=\"noopener noreferrer nofollow\">Accessibility support for CSS generated content<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/html.spec.whatwg.org\/#the-a-element\" rel=\"noopener noreferrer nofollow\">The a element<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.scottohara.me\/note\/2019\/07\/17\/placeholder-link.html\" rel=\"noopener noreferrer nofollow\">The accessibility of placeholder links<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>21. \u041b\u0435\u0433\u0435\u043d\u0434\u0430\u0440\u043d\u044b\u0439 legend<\/h3>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0438 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a \u0442\u0435\u043a\u0441\u0442\u0430<\/p>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button class=\"panel-heading\" tabindex=\"0\" href=\"#collapse0\" aria-expanded=\"true\"&gt;   &lt;legend&gt; Industries Served &lt;\/legend&gt; &lt;\/button&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p><code>&lt;legend&gt;<\/code> \u043d\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u0440\u043e\u043c\u0435 <code>&lt;fieldset&gt;<\/code> (<a href=\"https:\/\/www.htmhell.dev\/21-legendary-legend\/#foot-note1\" rel=\"noopener noreferrer nofollow\">HTML \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0434\u043b\u044f legend<\/a>)<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>&lt;button&gt;<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>tabindex<\/code> \u043d\u0435 \u043d\u0443\u0436\u0435\u043d. HTML-\u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>href<\/code> \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>&lt;button&gt;<\/code> (<a href=\"https:\/\/www.htmhell.dev\/21-legendary-legend\/#foot-note2\" rel=\"noopener noreferrer nofollow\">HTML \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0434\u043b\u044f button<\/a>)<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code>&lt;button class=\"panel-heading\" aria-expanded=\"true\"&gt;   Industries Served &lt;\/button&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/html.spec.whatwg.org\/#the-legend-element\" rel=\"noopener noreferrer nofollow\">The legend element<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/html.spec.whatwg.org\/#the-button-element\" rel=\"noopener noreferrer nofollow\">The button element<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>22. \u0421\u0442\u0430\u0440\u0430\u044f \u0434\u043e\u0431\u0440\u0430\u044f div-\u0441\u0441\u044b\u043b\u043a\u0430<\/h3>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/p>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div&gt;About us&lt;\/div&gt;<\/code><\/pre>\n<pre><code class=\"xml\">&lt;div onClick=\"location.href='about.html'\"&gt;   About us &lt;\/div&gt;<\/code><\/pre>\n<pre><code class=\"xml\">&lt;div data-page=\"aboutus\" data-url=\"index.php\"&gt;   About us &lt;\/div&gt;<\/code><\/pre>\n<p>&#8230; \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0433\u0434\u0435 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u0442 <code>&lt;a&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong>  <\/p>\n<ul>\n<li>\n<p><code>&lt;div&gt;<\/code> &#8212; \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u0440\u0430\u0439\u043d\u0435\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>&lt;div&gt;<\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u043f\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 <code>&lt;div&gt;<\/code>  \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u041d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 <code>&lt;a&gt;<\/code> \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <code>Enter<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p><code>&lt;div&gt;<\/code> \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u043c \u043c\u0435\u043d\u044e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u043d\u043a\u0442\u043e\u0432 &#171;\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435\/\u043e\u043a\u043d\u0435&#187; \u0438\u043b\u0438 &#171;\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438&#187;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u044e\u0442 \u0442\u0435\u043a\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 <code>&lt;div&gt;<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, &#171;\u041e \u043d\u0430\u0441&#187;). \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043a\u0438 <code>&lt;a&gt;<\/code> \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u0442\u0435\u043a\u0441\u0442 \u0438 \u0440\u043e\u043b\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, &#171;\u041e \u043d\u0430\u0441, \u0441\u0441\u044b\u043b\u043a\u0430&#187;)<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 <code>aria-label<\/code> \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;div&gt;<\/code> \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0441\u0441\u044b\u043b\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. <code>&lt;div&gt;<\/code>-\u0441\u0441\u044b\u043b\u043e\u043a \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>role=\"link\"<\/code><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"aboutus.html\"&gt;   About us &lt;\/a&gt;<\/code><\/pre>\n<h3>23. \u0428\u0430\u0431\u043b\u043e\u043d \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;article&gt;   &lt;div&gt;     &lt;div class=\"sr-only\"&gt;Image&lt;\/div&gt;     &lt;img src=\"\/feature-teaser.png\" alt=\"Feature teaser\" \/&gt;   &lt;\/div&gt; &lt;\/article&gt; &lt;div&gt;   &lt;span&gt;     &lt;span&gt;Exciting feature!&lt;\/span&gt;   &lt;\/span&gt;   &lt;div&gt; This text describes what the feature does! &lt;\/div&gt;   &lt;a href=\"\/blog\/feature\"&gt;     &lt;span&gt;Read more&lt;\/span&gt;     &lt;svg viewBox=\"0 0 9 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;       &lt;path d=\"M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z\"&gt;&lt;\/path&gt;     &lt;\/svg&gt;   &lt;\/a&gt; &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>&lt;article&gt;<\/code>.  \u042d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0415\u0441\u043b\u0438 \u0437\u0434\u0435\u0441\u044c \u0438 \u0435\u0441\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435, \u0442\u043e \u0432\u0441\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;section&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c <code>&lt;div&gt;<\/code> \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432 \u0442\u0435\u043a\u0441\u0442 &#171;<em>Image<\/em>&#171;. \u041e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u043e\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0437\u0430 \u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;img&gt;<\/code>. \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0430\u043c\u0438 \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0442 \u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0435. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 &#171;\u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u044f\u0445&#187; \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d <code>&lt;span&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c. \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u0434\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2013 <code>&lt;h4&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043e\u0431\u0451\u0440\u043d\u0443\u0442 \u0432 <code>&lt;div&gt;<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>&lt;p&gt;<\/code> \u043b\u0443\u0447\u0448\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u043e \u0431\u044b \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>&#171;Read more&#187; \u2013 \u043d\u0435 \u0441\u0430\u043c\u044b\u0439 \u043b\u0443\u0447\u0448\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438. \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c. \u0418\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0443\u0434\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u0435\u0434\u0451\u0442 \u044d\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>&lt;svg&gt;<\/code>  \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043a\u0440\u044b\u0442 \u043e\u0442 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;section&gt;   &lt;div&gt;     &lt;img src=\"\/feature-teaser.png\" alt=\"\" \/&gt;   &lt;\/div&gt;   &lt;div&gt;     &lt;h4&gt;Exciting feature!&lt;\/h4&gt;     &lt;p&gt;This text describes what the feature does!&lt;\/p&gt;     &lt;a href=\"\/blog\/feature\"&gt;       &lt;span&gt;Read more about our exciting feature &lt;\/span&gt;       &lt;svg aria-hidden=\"true\" viewBox=\"0 0 9 12\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;         &lt;path d=\"M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z\"&gt;&lt;\/path&gt;       &lt;\/svg&gt;     &lt;\/a&gt;   &lt;\/div&gt; &lt;\/section&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/section\" rel=\"noopener noreferrer nofollow\">The Generic Section element<\/a><\/p>\n<\/li>\n<\/ul>\n<h3>24. Placeholder &#8212; \u044d\u0442\u043e \u043d\u0435 label<\/h3>\n<pre><code class=\"xml\">&lt;input type=\"text\" placeholder=\"First name\"&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>&lt;input&gt;<\/code> \u043d\u0443\u0436\u0435\u043d <code>&lt;label&gt;<\/code>. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043a \u043f\u043e\u043b\u044f\u043c \u0444\u043e\u0440\u043c\u044b, \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 <code>&lt;label&gt;<\/code> \u0438 \u0442\u0438\u043f \u043f\u043e\u043b\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, &#171;\u0438\u043c\u044f, \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430&#187;). \u0415\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0435<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u0432\u0441\u0451 \u0436\u0435 \u0431\u0435\u0440\u0443\u0442 \u0442\u0435\u043a\u0441\u0442 \u0438\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>placeholder<\/code>, \u043d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u0435\u043a\u0441\u0442 <code>placeholder<\/code>  \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0441 \u043f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c\u044e. \u041b\u044e\u0434\u044f\u043c \u0441\u043e \u0441\u043b\u0430\u0431\u044b\u043c \u0437\u0440\u0435\u043d\u0438\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e \u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u0438 \u044f\u0440\u043a\u043e\u043c \u0441\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0432\u0435\u0442\u0435<\/p>\n<\/li>\n<li>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>::placeholder<\/code> \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0446\u0432\u0435\u0442\u0430. \u041d\u043e \u0442\u0443\u0442 \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u0449\u0438\u0442\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u043a\u0441\u0442 \u0441 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0437\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>&lt;label&gt;<\/code> \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u044b\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 <code>placeholder<\/code>  \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043c\u0435\u0441\u0442\u043e\u043c, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044f, \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u043e\u043d \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0439. <\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u0444\u043e\u0440\u043c\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u0438\u0434\u044f\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u043d\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u043b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e\u043b\u044f, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b\u043e\u0441\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043a\u0441\u0442 <code>placeholder<\/code> \u043e\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u043d \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u043f\u043e\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 Google Translate \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u043b\u0443\u0447\u0448\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u043d\u0430\u0434 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u0435\u043c, \u0430 \u043d\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\"> &lt;label for=\"firstname\"&gt;First name&lt;\/label&gt;  &lt;input type=\"text\" id=\"firstname\"&gt;<\/code><\/pre>\n<p><strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/form-design-placeholders\/\" rel=\"noopener noreferrer nofollow\">Placeholders in Form Fields Are Harmful<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/simple-human\/10-reasons-why-placeholders-are-problematic-f8079412b960\" rel=\"noopener noreferrer nofollow\">11 reasons why placeholders are problematic<\/a>&nbsp;by&nbsp;<a href=\"https:\/\/twitter.com\/adambsilver\" rel=\"noopener noreferrer nofollow\">Adam Silver<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2018\/06\/placeholder-attribute\/\" rel=\"noopener noreferrer nofollow\">Don\u2019t Use The Placeholder Attribute<\/a>&nbsp;by&nbsp;<a href=\"https:\/\/ericwbailey.design\/\" rel=\"noopener noreferrer nofollow\">Eric W. Bailey<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/form-design-white-space\/\" rel=\"noopener noreferrer nofollow\">Form Design Quick Fix: Group Form Elements Effectively Using White Space<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/codepen.io\/stevef\/post\/placeholder-the-piss-take-label\" rel=\"noopener noreferrer nofollow\">placeholder &#8212; the piss-take label<\/a>&nbsp;by&nbsp;<a href=\"https:\/\/twitter.com\/stevefaulkner\" rel=\"noopener noreferrer nofollow\">Steve Faulkner<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"http:\/\/www.webaxe.org\/floated-labels-still-suck\/\" rel=\"noopener noreferrer nofollow\">Floated Labels Still Suck<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/555192\/\"> https:\/\/habr.com\/ru\/post\/555192\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p><em>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0441 \u0441\u0430\u0439\u0442\u0430&nbsp;<\/em><a href=\"https:\/\/www.htmhell.dev\/\" rel=\"noopener noreferrer nofollow\"><em>HTMHell<\/em><\/a><em> &#8212; \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u043b\u043e\u0445\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 HTML-\u043a\u043e\u0434\u0430, \u0432\u0437\u044f\u0442\u044b\u0445 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/em><\/p>\n<p><em>\u041a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u0430\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f\u043c\u0438, \u0432 \u0447\u0451\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c. \u0410 \u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c.<\/em><\/p>\n<p><em>\u0422\u0430\u043a \u043a\u0430\u043a \u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b \u0432 \u0435\u0434\u0438\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0437\u0430\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c\u0438 \u0438 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c\u0438, \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u0441\u0435\u0431\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442 \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u043a\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u043e\u043a, \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043c\u0435\u043d\u0435\u0435 &#171;\u0441\u0443\u0445\u0438\u043c&#187; \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c.<\/em><\/p>\n<h3>1. \u041a\u043d\u043e\u043f\u043a\u0430, \u0437\u0430\u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434 \u0441\u0441\u044b\u043b\u043a\u0443<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;button role=\"link\" title=\"Name of website\" tabindex=\"0\"&gt;   &lt;img alt=\"Name of website\" src=\"logo.jpg\" title=\"Name of website\"&gt; &lt;\/button&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;button&gt;<\/code>. \u0414\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0441\u0430\u0439\u0442 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code> . \u041d\u0435 \u043f\u0440\u0435\u043d\u0435\u0431\u0440\u0435\u0433\u0430\u0439\u0442\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u043e\u0439 HTML-\u0442\u0435\u0433\u043e\u0432, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u044f\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<li>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c <code>&lt;a&gt;<\/code>, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0438 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f JavaScript<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>title<\/code> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;button&gt;<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437\u043b\u0438\u0448\u043d\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>tabindex<\/code> \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0432\u0435\u0434\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"https:\/\/\"&gt;   &lt;img alt=\"Name of website\" src=\"logo.jpg\"&gt; &lt;\/a&gt;<\/code><\/pre>\n<h3>2. \u042d\u043b\u0435\u043c\u0435\u043d\u0442  \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c role=&#187;button&#187;<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;div tabindex=\"-1\"&gt;   &lt;div role=\"button\"&gt;     &lt;svg width=\"28\" height=\"24\"&gt; \u2026 &lt;\/svg&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 <code>&lt;div&gt;<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>role<\/code>, \u0432\u0435\u0434\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>&lt;button&gt;<\/code> \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>tabindex<\/code> . HTML-\u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u043e\u043a\u0443\u0441<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 <code>&lt;div&gt;<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u041d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0436\u0435 <code>&lt;button&gt;<\/code> \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 <code>Enter<\/code> \u0438\u043b\u0438 <code>Space<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/p>\n<\/li>\n<li>\n<p>SVG-\u0438\u043a\u043e\u043d\u043a\u0438, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0439 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 SVG \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0438 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432, \u0432\u043d\u0443\u0442\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<pre><code class=\"xml\">&lt;button&gt;   &lt;span class=\"sr-only\"&gt;Send&lt;\/span&gt;   &lt;svg width=\"28\" height=\"24\" aria-hidden=\"true\"&gt; \u2026 &lt;\/svg&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043a\u0441\u0442\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 <code>.sr-only<\/code> \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0434\u0435\u043b\u0430\u044e\u0449\u0438\u043c \u0435\u0433\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e <\/p>\n<pre><code class=\"css\">.sr-only {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }<\/code><\/pre>\n<h3>3. \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 &#8212; \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;img src=\"\/images\/edit.gif\" onclick=\"openEditDialog(123)\"&gt; &lt;img src=\"\/images\/delete.gif\" onclick=\"openDeleteDialog(123)\"&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;img&gt;<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u043e\u0442\u043d\u044e\u0434\u044c \u043d\u0435 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JavaScript, \u0430 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0438 \u043d\u0430 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u043c \u0440\u0430\u043d\u0435\u0435 <code>&lt;div&gt;<\/code>, \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>img&gt;<\/code>  \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043b\u0438\u043a\u043e\u043c \u043c\u044b\u0448\u0438. \u0415\u0441\u043b\u0438 \u0431\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> , \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0431\u044b \u0435\u0449\u0451 \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043e\u043a <code>Enter<\/code> \u0438\u043b\u0438 <code>Space<\/code> \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 (\u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>alt<\/code> ). \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u043e<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21161: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438, \u0430 \u043a \u043f\u043e\u043c\u0435\u0449\u0451\u043d\u043d\u044b\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043d\u043e\u043f\u043e\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <\/em><code>alt<\/code><\/p>\n<pre><code class=\"xml\">&lt;button onclick=\"openEditDialog(123)\"&gt;   &lt;img src=\"\/images\/edit.gif\" alt=\"Edit product XY\"&gt; &lt;\/button&gt; &lt;button onclick=\"openDeleteDialog(123)\"&gt;   &lt;img src=\"\/images\/delete.gif\" alt=\"Delete product XY\"&gt; &lt;\/button&gt;<\/code><\/pre>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21162: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <\/em><code>alt<\/code> \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/p>\n<pre><code class=\"xml\">&lt;button onclick=\"openEditDialog(123)\"&gt;   &lt;span class=\"sr-only\"&gt;Edit product XY&lt;\/span&gt;   &lt;img src=\"\/images\/edit.gif\" alt=\"\"&gt; &lt;\/button&gt; &lt;button onclick=\"openDeleteDialog(123)\"&gt;   &lt;span class=\"sr-only\"&gt;Delete product XY&lt;\/span&gt;   &lt;img src=\"\/images\/delete.gif\" alt=\"\"&gt; &lt;\/button&gt;<\/code><\/pre>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>alt<\/code> \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u0432, \u0447\u0442\u043e \u043d\u0430\u043c \u0438 \u043d\u0443\u0436\u043d\u043e, \u0432\u0435\u0434\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0431\u043e\u0440\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <code>.sr-only<\/code><\/p>\n<pre><code class=\"css\">.sr-only {   position: absolute;   white-space: nowrap;   width: 1px;   height: 1px;   overflow: hidden;   border: 0;   padding: 0;   clip: rect(0 0 0 0);   clip-path: inset(50%);   margin: -1px; }<\/code><\/pre>\n<h3>4. \u0421\u0441\u044b\u043b\u043a\u0430 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"https:\/\/example.com\"&gt;   &lt;button&gt;Example&lt;\/button&gt; &lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0412\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u043d\u0443\u0442\u0440\u044c \u0441\u0441\u044b\u043b\u043a\u0438, \u0432\u044b \u043f\u043e\u0434\u0430\u0451\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0430 \u0441\u0438\u0433\u043d\u0430\u043b\u0430: \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u0438 \u0441\u0441\u044b\u043b\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code>, \u0430 \u043a\u043e\u0433\u0434\u0430 <code>&lt;button&gt;<\/code>, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0438\u0434\u0435\u043e &#171;<a href=\"https:\/\/www.youtube.com\/watch?v=8XjwDq9zG4I\" rel=\"noopener noreferrer nofollow\">The Links vs. Buttons Showdown<\/a>&#187; \u043e\u0442 <a href=\"https:\/\/twitter.com\/marcysutton\" rel=\"noopener noreferrer nofollow\">Marcy Sutton<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"css\">.button {   \/* \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CSS, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u0438\u0434 \u043a\u043d\u043e\u043f\u043a\u0438 *\/ }<\/code><\/pre>\n<pre><code class=\"xml\">&lt;a href=\"https:\/\/example.com\" class=\"button\"&gt;Example&lt;\/a&gt;<\/code><\/pre>\n<h3>5. \u041a\u043d\u043e\u043f\u043a\u043e\u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430, \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u0443. \u0412\u0435\u0434\u0451\u0442 \u043e\u043d\u0430 \u043d\u0430 \u0444\u043e\u0440\u043c\u0443, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u044d\u0442\u043e\u0439 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/p>\n<pre><code class=\"xml\">&lt;a href=\"#form\" role=\"button\" aria-haspopup=\"true\"&gt; &amp;nbsp;&amp;nbsp;Register&amp;nbsp;&amp;nbsp; &lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043a \u0441\u0441\u044b\u043b\u043a\u0435 <code>role=\"button\"<\/code> , \u0432\u044b \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430, \u0445\u043e\u0442\u044f \u043e\u043d\u0430 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0430. \u041d\u0435 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>aria-haspopup=\"true\"<\/code> \u043f\u0440\u0438\u0437\u0432\u0430\u043d \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043f\u0430\u043f, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442<\/p>\n<\/li>\n<li>\n<p>\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f <code>padding<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0447\u0435\u0440\u0435\u0437 CSS, \u0430 \u043d\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>&amp;nbsp;<\/code><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"css\">.button {   \/* \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u0438\u0434 \u043a\u043d\u043e\u043f\u043a\u0438  *\/ }<\/code><\/pre>\n<pre><code class=\"xml\">&lt;a class=\"button\" href=\"#form\"&gt; Register &lt;\/a&gt;<\/code><\/pre>\n<h3>6. \u0421\u0441\u044b\u043b\u043a\u0430 \u0441 void-\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 &#171;href&#187;<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"javascript:void(1)\" onClick='window.location=\"index.html\"'&gt;Link&lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 JavaScript-\u043a\u043e\u0434 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u0438\u043b\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0430\u044f \u0435\u0433\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430 \u0438 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript. \u0410\u0434\u0440\u0435\u0441 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>href<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 100% \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438. \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0435\u0451 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435\/\u043e\u043a\u043d\u0435 \u0449\u0435\u043b\u0447\u043a\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u043a\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043d\u0435 \u0443\u0434\u0430\u0441\u0442\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"index.html\"&gt;Link&lt;\/a&gt;<\/code><\/pre>\n<h3>7. \u0414\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b &#171;id&#187; \u0438 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0430<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\"> &lt;table&gt;    &lt;tr id=\"body\"&gt;      &lt;td id=\"body\"&gt;        &lt;table id=\"body\"&gt;          &lt;tr id=\"body_row\"&gt;            &lt;td id=\"body_left\"&gt;\u2026&lt;\/td&gt;            &lt;td id=\"body_middle\"&gt;\u2026&lt;\/td&gt;            &lt;td id=\"body_right\"&gt;\u2026&lt;\/td&gt;          &lt;\/tr&gt;        &lt;\/table&gt;      &lt;\/td&gt;    &lt;\/tr&gt;  &lt;\/table&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>id<\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u0442\u0435\u0433\u0443 \u043e\u043d\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 (\u044d\u0442\u043e \u043f\u0440\u0438 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0430\u0439\u0442\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0441\u044f \u0432 2016 \u0433\u043e\u0434\u0443). \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u0431\u043b\u0438\u0446, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u0422\u0435\u043a\u0443\u0449\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 HTML5-\u0442\u0435\u0433\u0438. \u042d\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u0433\u043e\u0432 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox\" rel=\"noopener noreferrer nofollow\">Flexbox<\/a>&nbsp;\u0438&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" rel=\"noopener noreferrer nofollow\">CSS Grid<\/a>, \u043d\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0430\u0431\u043b\u0438\u0446<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>ID<\/code>\u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;main id=\"body\"&gt;    &lt;aside id=\"secondary_content\"&gt; &lt;\/aside&gt;    &lt;article id=\"primary_content\"&gt; &lt;\/article&gt;    &lt;aside id=\"tertiary_content\"&gt; &lt;\/aside&gt;  &lt;\/main&gt;<\/code><\/pre>\n<h3>8. \u042f\u043a\u043e\u0440\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0432 \u0440\u043e\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;a href=\"#\" onclick=\"modal.open()\"&gt;Login&lt;\/a&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;a&gt;<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b: \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043b\u0438 PDF-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0436\u0435 \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2013 \u0432\u044b\u0437\u0432\u0430\u0442\u044c JavaScript-\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0414\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>type=\"button\"<\/code> , \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/p>\n<\/li>\n<li>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0438\u043c \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0447\u0451\u0442\u043e\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 JavaScript, \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21161: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <\/em><code>&lt;button&gt;<\/code><\/p>\n<pre><code class=\"xml\">&lt;button type=\"button\" onclick=\"modal.open()\"&gt;Login&lt;\/button&gt;<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0446\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f, \u0430 \u0432\u044b\u0437\u043e\u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c.<\/p>\n<p><em>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u21162: \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/em><\/p>\n<pre><code class=\"xml\">&lt;a href=\"\/login\" onclick=\"modal.open()\"&gt;Login&lt;\/a&gt;<\/code><\/pre>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;a&gt;<\/code> , \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>href<\/code>\u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0435 \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0447\u0442\u043e \u0438 \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435. \u0410 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 JavaScript<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0435\u043a\u0438\u0439 \u0444\u043e\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 JavaScript \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u043e\u043d \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b<\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/p>\n<h3>9. \u0417\u0430\u043f\u0440\u043e\u0441 \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u044f \u043d\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 Cookie<\/h3>\n<p><strong>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434<\/strong><\/p>\n<pre><code class=\"xml\">&lt;body&gt;   &lt;header&gt;\u2026&lt;\/header&gt;   &lt;main&gt;\u2026&lt;\/main&gt;   &lt;footer&gt;\u2026&lt;\/footer&gt;    &lt;div class=\"cookie_consent modal\"&gt;     &lt;p&gt;We use cookies\u2026&lt;\/p&gt;     &lt;div class=\"cookie_consent__close\"&gt;       &lt;i class=\"fa fa-times\"&gt;&lt;\/i&gt;     &lt;\/div&gt;     &lt;div class=\"cookie_consent__ok\"&gt;OK&lt;\/div&gt;   &lt;\/div&gt; &lt;\/body&gt;<\/code><\/pre>\n<p><strong>\u041e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/strong><\/p>\n<ul>\n<li>\n<p>\u041e\u043a\u043d\u043e \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 Cookie \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c  \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e \u0444\u043e\u043a\u0443\u0441 \u0438 \u0431\u044b\u043b\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u041d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>&lt;div&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 , \u0430 <\/p>\n<\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-322351","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322351"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322351\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}