unslug ru: move

3 files changed, 486 insertions, 0 deletions

diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..f34fe049f5
--- /dev/null
+++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,204 @@
+---
+title: Tips for authoring fast-loading HTML pages
+slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>Эти советы основаны на общих знаниях и экспериментах.</p>
+
+<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объемом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p>
+
+<p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p>
+
+<h2 id="Tips" name="Tips">Советы</h2>
+
+<h3 id="Reduce_page_weight" name="Reduce_page_weight">Уменьшайте вес страницы</h3>
+
+<p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p>
+
+<p>Уменьшение веса страницы за счет устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p>
+
+<p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p>
+
+<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">Минимизируйте количество файлов</h3>
+
+<p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p>
+
+<p>В зависимости от настроек кэша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменен с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p>
+
+<p>Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.</p>
+
+<h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3>
+
+<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p>
+
+<p>CDN - это географически распределенная сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кэшированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p>
+
+<p>Дальнейшее чтение:</p>
+
+<ul>
+ <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li>
+</ul>
+
+<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">Сократите поиск доменов</h3>
+
+<p>Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.</p>
+
+<p>Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.</p>
+
+<h3 id="Cache_reused_content" name="Cache_reused_content">Кэшируйте повторно использованный контент</h3>
+
+<p>Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.</p>
+
+<p>В частности, обратите внимание на  заголовок <code>Last-Modified</code>. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок <code>Last-Modified</code> к статическим страницам (напр. <code>.html</code>, <code>.css</code>), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. <code>.php</code>, <code>.aspx</code>), это, конечно, не может быть сделано, и заголовок не отправляется.</p>
+
+<p>Так, в частности, для страниц, которые генерируются динамически, небольшое исследование по этой теме полезно. Это может быть несколько сложным, но это сэкономит много запросов страниц на страницах, которые обычно не могут быть кэшированы.</p>
+
+<p>Больше информации:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">On HTTP Last-Modified and ETag</a></li>
+</ol>
+
+<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3>
+
+<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает еще более быстрый отклик для пользователя.</p>
+
+<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведет к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Уменьшайте количество встроенных скриптов</h3>
+
+<p>Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования <code>document.write()</code> для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> для управления содержимым страницы, а не устаревшие подходы, которые основаны на  <code>document.write()</code>.</p>
+
+<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">Используйте современный CSS и корректную разметку</h3>
+
+<p>Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.</p>
+
+<p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p>
+
+<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки</p>
+
+<h3 id="Chunk_your_content" name="Chunk_your_content">Разделяйте ваш контент</h3>
+
+<p>Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Floats"&gt;floats&lt;/a&gt;, &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning"&gt;positioning&lt;/a&gt;, &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox"&gt;flexbox&lt;/a&gt;, или &lt;a href="/en-US/docs/Learn/CSS/CSS_layout/Grids"&gt;grids&lt;/a&gt;.</p>
+
+<p>Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.</p>
+
+<p>Вместо глубоко вложенных таблиц, как в:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+
+<p>используйте невложенные таблицы как показано (или div'ы)</p>
+
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+</pre>
+
+<p>Смотри также: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> и <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+
+<h3 id="Сокращайте_и_сжимайте_активы_SVG">Сокращайте и сжимайте активы SVG</h3>
+
+<p>SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG</p>
+
+<h3 id="Сокращайте_и_сжимайте_ваши_изображения">Сокращайте и сжимайте ваши изображения</h3>
+
+<p>Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу.  Есть онлайн-инструменты, такие как &lt;a href="https://compressjpeg.com/"&gt;Compress Jpeg&lt;/a&gt;, &lt;a href="https://tinypng.com"&gt;Tiny PNG&lt;/a&gt; и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.</p>
+
+<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">Указывайте размеры для изображений и таблиц </h3>
+
+<p>Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине <code>height</code> и <code>width</code>  должны быть указаны для изображений всегда, когда это возможно.</p>
+
+<p>Таблицы должны использовать CSS селектор: комбинация свойств</p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>и должны указывать ширину колонок используя HTML теги <code>COL</code> и <code>COLGROUP</code></p>
+
+<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">Мудро выбирайте требования к пользовательскому агенту</h3>
+
+<p>Чтобы добиться наибольших улучшений в дизайне страниц, убедитесь, что для проектов указаны разумные требования к пользовательским агентам. Не требуйте, чтобы ваш контент казался идеальным во всех браузерах, особенно в устаревших.</p>
+
+<p>В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.</p>
+
+<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+
+<h3 id="Используйте_async_и_defer_если_это_возможно">Используйте async и defer, если это возможно</h3>
+
+<p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p>
+
+<p>При этом страница может перестать отображаться, пока JavaScript все еще загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p>
+
+<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Пример структуры страницы</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы</dd>
+  <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...<br>
+  Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.</dd>
+  <dd>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания</dd>
+  <dd>Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Related_Links" name="Related_Links">Ссылки по теме</h2>
+
+<ul>
+ <li>Книга: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li>Отличная и очень содеражательная статья <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li>Инструменты для анализа и оптимизации производительности: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li>
+ <li>Last Updated Date: Published 04 Apr 2003</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html
new file mode 100644
index 0000000000..1a780e676b
--- /dev/null
+++ b/files/ru/learn/html/howto/index.html
@@ -0,0 +1,153 @@
+---
+title: Использование HTML для решения общих задач
+slug: Learn/HTML/Рецепты
+tags:
+  - CodingScripting
+  - HTML
+  - На русском
+  - Программирование
+translation_of: Learn/HTML/Howto
+---
+<p class="summary">Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Основы_структурирования">Основы структурирования</h3>
+
+<p>Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Как создать простой HTML документ</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Как разделять веб-страницы на логические блоки</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Как задавать структуру заголовков и параграфов</a></li>
+</ul>
+
+<h3 id="Основы_организации_гипертекста">Основы организации гипертекста</h3>
+
+<p>HTML специализируется на предоставлении семантической информации для документа, поэтому HTML отвечает на многие вопросы, которые могут у вас возникнуть о том, как лучше донести ваше сообщение в документе.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Как создать список элементов с помощью HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Как подчеркнуть или выделить содержание</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Как подчеркнуть важность некоторого текста</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Как отображать компьютерный код в HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Как комментировать (подписывать) изображения и видео</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Как помечать аббревиатуры и делать их понятными</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Как добавлять цитаты на веб-страницы</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Как определять термины в HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Гиперссылки">Гиперссылки</h3>
+
+<p>Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Как создавить гиперссылки</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Как создать "оглавление" HTML</a></li>
+</ul>
+
+<h3 id="Изображения_и_мультимедиа">Изображения и мультимедиа</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Как добавить изображения на веб-страницу</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Как добавить видео на веб-страницу</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Как добавить аудио на веб-страницу</a></li>
+</ul>
+
+<h3 id="Сценарии_и_стили">Сценарии и стили</h3>
+
+<p>HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript).</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Как использовать CSS внутри веб-страницы</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Как использовать JavaScript внутри веб-страницы</a></li>
+</ul>
+
+<h3 id="Встраиваемый_контент">Встраиваемый контент</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Как встроить одну веб-страницу внутрь другой</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Как добавлять Flash содержимое на веб-страницы</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Необычные_или_продвинутые_проблемы">Необычные или продвинутые проблемы</h2>
+
+<p>Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространенными случаями использования, с которыми вы можете столкнуться:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Формы">Формы</h3>
+
+<p>Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвященное руководство. Вот где вы должны начать:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Как создать простую Веб-форму</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Как организовать Веб форму</a></li>
+</ul>
+
+<h3 id="Таблицы">Таблицы</h3>
+
+<p>Некоторая информация удобнее всего представима в виде таблиц состоящих из строк и столбцов. Это одна из самых сложных структур в HTML, управлять которой не так просто как кажется:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Как создать таблицу данных</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Как сделать HTML-таблицы доступными</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Как оптимизировать рендеринг HTML-таблицы</a></li>
+</ul>
+
+<h3 id="Представление_данных">Представление данных</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Как отображать числовые данные с помощью HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Интерактивность">Интерактивность</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Как добавить контекстное меню на веб-страницу</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Как создать диалоговое окно с помощью HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Продвинутая_организация_текста">Продвинутая организация текста</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Как контролировать  HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Как отмечать изменения (добавление и удаление текста)</a></li>
+</ul>
+
+<h3 id="Продвинутые_изображения_и_мультимедиа_images_multimedia">Продвинутые изображения и мультимедиа images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+</ul>
+
+<h3 id="Локализация">Локализация</h3>
+
+<p>HTML не одноязычен. Он имеет поддержку средств локализации документов.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Как добавить несколько языков в одну веб-страницу</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Как отображать дату и время с помощью HTML</a></li>
+</ul>
+
+<h3 id="Производительность">Производительность</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Как ускорить загрузку HTML страниц</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/ru/learn/html/howto/use_data_attributes/index.html b/files/ru/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..cef001e25a
--- /dev/null
+++ b/files/ru/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,129 @@
+---
+title: Использование data-* атрибутов
+slug: Web/Guide/HTML/Using_data_attributes
+tags:
+  - Guide
+  - HTML
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<p><a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. <a href="/ru/docs/Web/HTML/Global_attributes#data-*"><code>data-*</code> атрибуты</a> позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Синтаксис_HTML">Синтаксис HTML</h2>
+
+<p>Синтаксис прост — любой атрибут, чьё имя начинается с <code>data-</code>, является <code>data-*</code> атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать <code>data</code>-атрибуты:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Доступ_в_JavaScript">Доступ в JavaScript</h2>
+
+<p>Чтение <code>data-</code>атрибутов в <a href="/ru/docs/Web/JavaScript">JavaScript</a> осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Чтобы получить <code>data</code>-атрибут можно взять свойство объекта <code>dataset</code> с именем, равным части имени атрибута после <code>data-</code> (обратите внимание, что дефисы в имени преобразуются в camelCase).</p>
+
+<pre><code>var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</code></pre>
+
+<p>Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода <code>article.dataset.columns = 5</code> приведёт к тому, что новое значение атрибута станет равным <code>"5"</code>.</p>
+
+<h2 id="Доступ_в_CSS">Доступ в CSS</h2>
+
+<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Также можно использовать <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов </a>в CSS для изменения стилей в соответствии с данным:</p>
+
+<pre class="brush: css">article[data-columns='3']{
+  width: 400px;
+}
+article[data-columns='4']{
+  width: 600px;
+}</pre>
+
+<p>Увидеть как это работает можно <a href="https://jsbin.com/ujiday/2/edit">в примере на JSBin</a>.</p>
+
+<p><code>Data</code>-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p>
+
+<h2 id="Проблемы">Проблемы</h2>
+
+<p>Не храните данные, которые должны быть видимы и доступны в <code>data</code>-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в <code>data</code>-атрибутах.</p>
+
+<p>Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии <a href="https://caniuse.com/#feat=dataset">не поддерживают <code>dataset</code></a>. Для поддержки IE 10 и более ранних версий получение доступа к <code>data</code>-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, <a href="https://jsperf.com/data-dataset">производительность чтения <code>data-</code>атрибутов</a> по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование <code>dataset</code> ещё медленнее, чем чтение данных с <code>getAttribute()</code>.</p>
+
+<p>Тем не менее, для пользовательских метаданных, связанных с элементами, <code>data-</code>атрибуты являются отличным решением.</p>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<table class="standard-table">
+ <caption>caniuse</caption>
+ <thead>
+  <tr>
+   <th scope="col">
+    <h4 id="IE">IE</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Edge">Edge</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Firefox">Firefox</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Chrome">Chrome</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Safari">Safari</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Opera">Opera</h4>
+   </th>
+   <th scope="col">
+    <h4 id="iOS_Safari">iOS Safari</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Opera_Mini*">Opera Mini<sup>*</sup></h4>
+   </th>
+   <th scope="col">
+    <h4 id="Android_Browser">Android Browser</h4>
+   </th>
+   <th scope="col">
+    <h4 id="Chrome_for_Android">Chrome for Android</h4>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>11+</td>
+   <td>14+</td>
+   <td>52+</td>
+   <td>49+</td>
+   <td>10.1+</td>
+   <td>46+</td>
+   <td>9.3+</td>
+   <td>all</td>
+   <td>4.4+</td>
+   <td>59+</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>Тем не менее, для содержимого, которое не надо показывать это является отличным решением.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>